Bojack, Henry. New Perspectives Blended HTML, XHTML, and CSS: Introductory. 2010. Boston. 2nd Ed.
HTML 5.0 Layout Elements
With HTML 5.0 which is still transition, creates a more consistent way to develop layouts. With HTML 5.0
you tend to replace the need for the div element. Many of the tags you used in XHTML are still heavily in
use but when it comes to layout, the majority of your document’s layout will be of specific layout
elements created for HTML 5.0 as opposed to using several div elements that are attached to various
CSS class and id selectors you’ve created for controlling the layout of the page. Since HTML 5.0 is still in
development, not all browsers support HTML 5.0 language. There is a great deal of HTML 5.0 that has
been in use but you will need to use your more current browsers, such as IE 9.0 & Firefox 18, to see this
version of HTML 5.0 in action.
New Layout Element/Tags for HTML 5.0
<header> ‐ The header element will be used to enclose the items displayed in the document header of
the page, such as logos and banners. Do not confuse the header element with the <head> element.
<head> ‐ As in previous versions the <head> continues to be used as a container for metadata. Instead
of creating the header area using div tags such as <div id=”header”></div>, you will instead use the start
<header> and end </header> tags to enclose the header information. There will be no need to create a
header id selector.
<nav> ‐ The nav element will be used anywhere that the document has a group of links. The nav element
could be used within the <header> element, in a sidebar, or in the footer.
<section> ‐ The section element indicates a section on the page, either horizontally or vertically. A series
of related content will be preceded and followed by <section> </section> tags. You can format and
position the section as you want.
<article> ‐ The article element will be used to specify the items on a page that are part of a particular
article. You can format and position the article as you want.
<aside> ‐ The aside element can be used when the content is pertaining to or in close relation to either
the content of the page or the site itself such as sidebars, annotations, footnotes, or other associated
site information.
<footer> ‐ The footer element will be used to enclose all the information that typically appears in a
footer.