New HTML5 Tags
HTML5 has released new tags which help define the layout and structure of the page.
This is a typical page using the old HTML tags.
<html>
<head></head>
<body>
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
<div id="article">
</div>
<div id="sidebar">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
Just looking at this HTML you can clearly see the different sections and just reading it you can clearly understand what each div will be used for thanks to the ID tags.
But how does the search engines know what these are for?
This is where HTML5 comes into it’s own, below is the same structure but in HTML5.
<!doctype html>
<html>
<head></head>
<body>
<header>
</header>
<nav>
</nav>
<section>
<article>
</article>
<aside>
</aside>
</section>
<footer>
</footer>
</body>
</html>
Now again you can see exactly what these sections are and what content they are going to hold, but as these are defined tags the search engines will know what the sections are.
Another difference you may notice is the Doctype. HTML5 only has 1 Doctype which as always is defined at the start of the document
<!doctype html>
which simply tells the browser that this is a HTML document.
Semantic Tags
The main change with HTML5 is to create more semantic tags so they will explain what sort of content is going to be put into these tags.
Header
<header>
</header>
The header element represents a group of introductory or navigational aids.
A header element is intended to usually contain the sections heading (an h1–h6 element or an hgroup element), but this is not required.
It will contain the header for the page and/or section therefore header can appear in multiple places on the page. Can also be an ideal place for logos, search forms or a table of contents for the page and or section.
Nav
<nav>
</nav>
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element.
Therefore an ideal place for a nav tag to go will be in a header or footer. A header will normally hold links which help navigate around the site, also a footer will normally hold important links for the website.
Section
<section>
</section>
Is the most generic of the new structural elements, containing content that can be grouped thematically or is related.
Section is the most generic of the structural tags, a section is defined as the thematic grouping of content. A section will typically content it’s own header and content, which can be used separate to the page.
An example of a section would be a tabbed page or numbered sections of a page.
In typical web design you can separate the content of the website into different sections, introductions, features, news, contact etc. These example will be perfect candidates for section.
Aside
<aside>
</aside>
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as side bars in printed typography.
Normally used for content which is related to the main content but can be independently moved, this is ideally used for quotes or a sidebar. They are linked to the page but can also be used independently.
Article
<article>
</article>
The article element consists of self-contained content in a document, page, application, or site.
The content of the article is intended to be independently distributed or reused elsewhere.
This is ideally used for page content, a forum post or a blog post. It can be separated from the page and still hold value. This area of the page can then be syndicated.
Footer
<footer>
</footer>
The footer element represents a footer for its nearest ancestor sectioning content. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Footers will normally appear at the end of a page but like headers you can have multiple footers per page as they are used to define the end of a section.
HGroup
<hgroup>
</hgroup>
The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
