Page Layout & New Elements

HTML5

HTML5 is the next major version of HTML. It introduces new elements that will make our pages more semantic. This will make it a lot easier for search engines and screenreaders to navigate our pages, and improve the web experience for everyone.

Before we begin marking up the page we should get the overall structure straight.

Basic Page Structure

This page is going to look at the new elements which specifically identify each of the following common constructs:

Header: The page header shown at the top of the page and additional smaller page headings. Importantly; it is not the same as the head element!

Nav: A collection of links to other pages

Section: A part or chapter in a book, a section in a chapter, or essentially anything that has its own heading in HTML5

Article: An independent entry in a blog, magazine, compendium, and so forth

Aside: The aside element contains anything outside the main flow of the page.

Footer: The page footer where the fine print goes or the signature in an e-mail message

Take a look at the markup, then we'll go through a few things:

< !doctype html >

In HTML5, there is only one doctype. It is declared in the beginning of the page by
< !doctype html > . It simply tells the browser that it's dealing with an HTML-document.

To see one immportant style declaration for the new elements click here. Now lets look at the new elements individually.

Header

< header>
< h1>Page Layout & New Elements< /h1>
< /header>

The new header tag is wrapped around introductory elements, such as the page title or a logo. It could also contain a table of contents or a search form. Every header typically contains a heading tag from h1 to h6. In this case the header is used to introduce the whole page, but we'll use it multiple times to introduce sections of the pages, for example here.

In the example to the left we use the header-tag to wrap around the introductory h1 element of the page. In addition to describing a whole document, the header-tag should also be used to describe individual sections, there are many examples on this page, for example, right at the bottom;

< header> < h3>Comments< /h3> < /header>

Return to the Top of the Page

Navigation

< nav>
list item 1
list item 2
.....
< /nav>

The nav-tag is used to contain navigational elements, such as the main navigation on a site or more specialized navigation like next/previous-links.

It is marked up exactly like we would do it in HTML4 or XHTML, using an unordered list. The key is that this list is placed inside the nav-tags. So we no longer have to create a div and name in nav, it already exists.

To see how the new nav element is styles go here.

Return to the Top of the Page

Within the main Body; Section and Article

Section

< section id="intro">
Introduction content goes here, e.g green flower picture
< /section>
< section>
main content containing multiple other divs will go here; < h1> < p> etc
< /section>

The section-tag is used to denote a section in the document. It can contain all kinds of markup and multiple sections can be nested inside each other.

To add content to the area now defined using the section tag we add an id to the section tag so we can identify it later when styling.

Return to the Top of the Page

Article

Posted on September 8th 2010 by Andrew - 3 comments

For the example of this page our main content area consists of three sections: the blog post, which you are reading a part of now, the comments below them, consisting of three zebra striped comments and the comment form, right at the bottom.

All other elements of the page you can see are outside of the main area and the main content div.

< section>
< article class=blogPost>
< div>
< header>< h3>Article< /h3>< /header>
< p>For the example of this .........

We start a new section and wrap the whole blog post in an article-tag. The article tag is used to denote an independent entry in a blog, discussion, encyclopedia, etc. and is ideal to use here. Since we are viewing the details of a single post we only have one article, but on the front page of the blog we would wrap each post in an article-tag.

The header element within this article is used to present the header and metadata about the specific blog post. We tell the user the title of the article, who wrote the post, when and how many comments it has.

You can see how our articles have been styled into the dual column layout here

Return to the Top of the Page

The Timestamp within the Article

< p>Posted on
< time datetime="2010-08-28T15:37:45+01:00">
August 28th 2010< /time> by..........< /p>

Note that the timestamp is wrapped in another new tag, the time-tag. This tag is used to mark up a specific place in time.

The contents of the datetime attribute should be:

-The year followed by a figure dash (a minus sign to you non-typography nerds)
-The month followed by a figure dash
-The date
-A capital T to denote that we are going to specify the local time
-The local time in the format hh:mm:ss
-The time zone relative to GMT. This example was stolen from someone in Denmark which is 1 hour after GMT, so we write +01. If you were in Colorado you would be 7 hours behind GMT, and you would write -07.

Click here to see another example of the timestamp within an artcle.

Return to the Top of the Page

Aside

< aside>
All sidebar content goes here
< /aside>

The aside element represents a note, a tip, a sidebar, an advert, a pullquote, a parenthetical remark, or anything that's just outside the main flow of the narrative. In this case we're using it for secondary navigation links and a blog archive.

To see how the Aside element fits into the markup of the page have a look here, to see how we then style the Aside click here

Return to the Top of the Page

Footer

< footer>
footer content goes here
< /footer>

The footer-tag should contain additional information about the main content, such as info about who wrote it, copyright information, links to related documents, contact details and so on.

Conclusion

To conclude this section; instead of using divs to contain different sections of the page we are now using appropriate, semantic tags. They will make it a lot easier for search engines and screen readers to figure out what's what in a page.

Return to the Top of the Page

Comments

Iggy Pop on August 29th 2010 at 23:40

Dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Benny Hill on August 29th 2010 at 23:35

Click here to learn how you can now apply a Zebra effect to the comments without using JavaScript.

Postman Pat on August 29th 2010 at 23:43

This is an ideal section to explain how you zebra stripe the comments using the new css3 styles.

Testing HTML5 & CSS3

This is the new Header Element in the new Intro Division.