In order to start a new web project on developing better to have a basic structure of html.
A good solutionis to find a basic one on google or better one is to create our personal template, with requirement class and id. No metter if work on different cms platform or just on html.
When i start to code html / css always was searching on google for basic template and after that needed to add different stuff like js and css.
Is a good choise to have your own basic html template in oder to skip manual code. And a good personal implementation of this template is to incorporate on code snippet editor (text sublime, Bluefish etc.) for a easier life :).
Ok let’s start
On the top of the fille need to add
[code]<! DOCTYPE HTML>[/code]
The <! DOCTYPE> is not included on html code, tell it to the browser about the version of the html code writen on it.
[code]<html>[/code]
The <html> and </ html> need to describe the web page.
[code]<head>
<meta name=”keywords” content=”html5, template, tutorial”>
<meta name=”description” content=”What Should a HTML5 template contein”>
</ Script> <link rel=”stylesheet” type=”text/css” href=”style.css”>
<! – [F lt IE 9]>
<script src=”dist/html5shiv.js”> </ script>
<! [Endif] ->
<script type=”text/javascript” src=”js/javascript.js”> </ script>
<title> Website Title </ title>
</ head>[/code]
The <head> is one of the most important search engine pointer and description of the content of the page. It contains all data and specifications needed. All the css, js, ajax are included here, some other developer also nclude it in the footer, also this is a good practice.
Let specify each part.
[code]
<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>
<meta name=”description” HTML and Web content=”Free CSS”>[/code]
Meta keywords and meta description to the search engine explain the content of the page, the content of it. So every time the search engine or check the web page also check to see what informationt is store on it.
[code]<! – [f lt IE 9]>
<script src=”dist/html5shiv.js”> </ script>
<! [endif] ->[/code]
Html5shiv.js the script is required for the older browser in order to recognize the new HTML5 tags. Should you include this on every project you work, Because some people out there still use the older version of Internet Explorer.
[code]<script src=”js/vendor/modernizr-2.6.2-respond-1.1.0.min.js”> </ script>[/code]
The script is to include messages on the page the javascript function stored on js folder on other folder needed.
[callout1]<link rel=”stylesheet” href=”css/stle.css”>[/callout1]
The same for the css file. Include the style of the page stored on the css folder.
[code]<body>
<header>
<nav>
<ul>
<li> The menu </ li>
</ ul>
</ nav>
</ header>[/code]
Next is the body and the header of the file. The body begin after the head, and include the content displayed on the html Such as text, images, lists, etc. link. The header specifies a header for a document, a part of the html, or a nav link (menu). This part of the html can be different messages on part of the html Also on the footer. Normaly for basic project template’s or messages after the body tag to include the menu, and sometimes logo and search form.
[code]<section>
<article>
<header>
<h2> Title of the article </ h2>
<p> Some paragraph of this article </ p>
</ header>
</ article>
</ section>[/code]
The tag <section> define the tags in a document or section, the article tag define a article, or content of the page.
[code]<aside>
<h2> title of the aside </ h2>
<p> Some content of the aside </p>
</ aside>[/code]
The aside tag messages it is to define some content aside the section. It is normlay messages to display category of the page, the menu if will display on the right or left etc..
[code]<footer>
<p> Copyright 2013 </ p>
</ footer>
</ body>
</ html>[/code]
Also the footer by the name will display the footer content. So this is a basic content of a simple html template, test it f you see u will have no style, no css because it is specified. Also you can check the full code here:
[code]
<! DOCTYPE HTML> <html>
[/code]
The <html> and </ html> need to describe the web page.
[code]<head>
<meta name=”keywords” content=”html5, template, tutorial”>
<meta name=”description” content=”What Should a HTML5 template contein”>
</ script> <link rel=”stylesheet” type=”text/css” href=”style.css”>
<! – [F lt IE 9]>
<script src=”dist/html5shiv.js”> </ script>
<! [Endif] ->
<script type=”text/javascript” src=”js/javascript.js”> </ script>
<title> Website Title </ title>
</ head> <body>
<header>
<nav>
<ul>
<li> The menu </ li>
</ ul>
</ nav>
</ header>
<section>
<article>
<header>
<h2> Title of the article </ h2>
Some <p> paragraph for this article </ p>
</ header>
</ article>
</ section>
<aside>
<h2> Lorem Ipsum </ h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting Industry. Lorem. </ P>
</ aside> <footer>
<p> Copyright 2013 </ p>
</ footer>
</ body>[/code]
If you like a new basic project and ready with the latest code you can use www.initializr.com. You can find this very practice and compatible for the browser.
Regards