html5 Layout
updated October 12, 2011
Unlike previous versions of html and xhtm (differences W3C) where the code gave limited structure which was determined by the heading tags <h1> - <h6> tags, html5 (W3C) provides much more stucture. All of the layout tags are semantic elements that determine the structure of the page. Each tag describes the type of content and its relationship to other content. Whereas you could use divs indiscriminately the new tags require that some thought is given to their content and placement. I would imagine this will become especially important in terms of compliance to section 508.
Example page created with html5
Validate HTML5
Updates
Html5 is ongoing and W3C expects it to be completed by July 2014. May 22, 2011 is the confirmed date for the “Last Call” — after that date, there will be no new features added to the HTML5 specifications.
I will periodically post any updates here if they apply to the elements on this page.
Google Study
Some time ago Google did a study in which they focused on code elements that were used the most. Part of that study focused on the most commonly used id and class names. The new html5 tags for layout closely correlate with the names that are already commonly used by most web designers. So its not going to be much of a leap to start using html5 tags for layout.
Opening Tag & Doctype
Your Doctype tag will be:
<!DOCTYPE html>
that's it.
Any or all can be upper case or lower case.
Charactor encoding
has now become shorter
<meta charset="UTF-8">
Link
has also become shorter you not longer need to include text/css
<link rel="stylesheet" href="name.css">
Java Script
You not longer have to specify java script: text/javascript
<script src="name.js"></script>
Language
For US English
<html lang="en-US">
More at: Declaring Languages in HTML5
Internet Explorer
The layout tags should work for Internet Explorer 9 and all other recent browsers. There is a work around for earlier versions of Internet Explorer click here for details.
html5 Layout Elements
page created with html5
At the moment (February 2011) even the lastest browsers do not read any of the following layout tags as being at the block level therefore you need to have them display at block level in your CSS. You can just include them in your reset:
header, section, article, nav, footer{
display: block;
}
Add more elements if you need them.
<body></body>
W3CThe body element contains all of the content of the page and its tags. There should only be one set of body tags.
<header></header>
W3CThe header element can contain your logo, banner, slogan, headings, search form or other introductory information and also nav tags. The header can also contain a list, it depends upon the purpose of the list.
<nav></nav>
W3CThe nav element is used for links. Not all groups of links should be in nav tags. The nav tags are for major navigation blocks. The nav tags could be used for your main menu within the header tag or other main sections of the page that contain links within the page (within a particular section). You could have a number of nav tags on one page.
The nav tags can stand alone they do not have to be contained within another tag.
Originally I was under the impression that the nav tags should not contain an heading but now I see that they can for certain circumstances, for instance if the menu was contained in prose.
If the footer contains links it is not necessary to have these links within nav tags.
<section></section>
W3CThe section element is used in a simular way to how we have been using the div, it divides the information into sections, it is different from the div in that it has sematic meaning. The section should not be used for styling purposes. Each section should have its own heading (h1 can now be use a number of times within a page. ( Google on multiple h1s).
Sections can be used within an article. Each section can also contain its own header and footer. A section is not a generic container element, it shoul not be used as a wrapper. When placing a wrapper around all of the content use a div.
<footer></footer>
W3CThe footer element is for marking up the footer of not only the page, but can also be used for each section and article. The footer should contain copyright information, the author, possible contact information and links. The footer does not allow the header tag or a new section element and although you can include links you do not have to use the nav tag in the footer.
<article></article>
W3CThe most important aspect of the artical is that its content needs to stand alone. It needs to be independent of the rest of the content. It could be a blog, user comments, a magazine article or any other type of independent content.
An Article Can Contain Other Layout Tags
The article can contain separate sections. These sections should also contain their own headings (not shown)
It can have it own header and footer.
An Article Can Be Nested in Other Tags
It is also possible for an article to be nested inside of a section. But the article would still need to contain independent content. An article can also be nested inside another article it depends upon the relationship between the two. There would need to be some relationship but the inner article would still need to establish some independance.
eg: the main article could be a blog and nested within it could be the user comments.
<aside></aside>
(W3C)The content within the aside should relate to the content around it but be separate from it. It could be used for a typographic effect such as a pull quote, advertising, navigation or content that you want to stand out but is still related to the main content.. It should not be used for global navigation. It does not have to contain an heading.
Titles and Subtitles
<h1></h1> - <h6></h6>
These elements are headings and are used as titles for sections (not necessarily section elements) of your page . <h1> is ranked as the highest and <h6> is ranked as the lowest. They are used in decending order for subsequent subsets of lower importance within any given section. You need to first decide on the hierarchy of importance of your information and then apply the headings. Its more than likely that you will not use all six levels on a page.
Each section or article element should have its own group of headings.
<hgroup></hgroup>
The <hgroup> element is used to group headings together. It must contain at least two of the heading elements and no other information. It is for grouping a title with a subtitle. It can contain different combinations such as <h1> with <h2.> or <h3> with <h4> etc.
For those of you that create headings with display: inline ( to get rid of the unsitely gap) and then add a <br>(yes now we do not need to close the break) you will not longer be able to do this because it will not validate if a <br> is inside an hgroup. the other alternative to place a negative margin-bottom on your headings and hgroup.
<figure></figure>
(W3C)The contains of the figure element can be photographs, charts, maps, illustrations, diagrams snippets of code, videos etc, and needs to refer to the main information. But you should be able to move the content of the figure element out of the main flow of the rest of the information without affecting the meaning of the main information. The figure element can contain one figcaption.
The content of this tag will be indented. If you do not want it to indent give it a negative left margin.
<figcaption> </figcaption>
(W3C)The figcaption element can be used at the top or the bottom of the content of the figure element. It is used for the caption or legend for the figure.
<address> </address>
(W3C)The address contains contact information for its nearest body or article ancestor. It is normally placed in the footer. It must not arbitrary contain contact information. It must not contain any other type of information. It must not contain any other tag elements.
<blockquote> </blockquote>
(W3C)The contents of a blockquote element must contain information that is quoted from another source.
<cite> </cite>
If you include the address of the source that must be placed within the <cite></cite> tags. The address within the cite element must be a valid URL surrended by spaces.
<q> </q>
Can be used for short in-line quotes but is more likely to be used along with CSS mark-up
q:before {
content: '"'; }
q:after {
content: '"'; }
in which case you can place it inside a blockquote.
<div> </div>
(W3C)The div is not one of the semantic elements but it can still be used. You can still use it as a wrapper or styling purposes. It can be used with class, lang and title. http://www.deathofthediv.com/
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of the div element instead of more appropriate elements leads to poor accessibility for readers and poor maintainability for authors.W3C
<span> </span>
(W3C)The span is still with us. It is used to group or single out in-line content often for style purposes.
The span element can be used with the attributes: class, lang, xml:lang, and title.
<details> </details>
<summary> </summary>
Neither details or summary are supported by any browser at the moment so we will get back to them later.
Example page created with html5
You can validate using either W3C
or
share / bookmark