Skip to Navigation | Skip to Content

MAT 235 - Web Design 3: Site design and Architecture

Menu

HTML5 NOTES

New HTML5 structural tags

<header> -- Use for page or section headers. There can be mutliple headers, but you cannot place headers within headers. It is appropriate to place H1-H6 tags, hgroup tags, and nav tags within header tags.

<hgroup> -- Use for grouping related heading elements, such as a an H1 for a title and an H2 for a tag-line. Only the H1 in this case would be represented in the content outline.

<footer> -- Use for page or section footers. There can be mutliple footers, but you cannot place footers within headers.

<nav> -- Use for defining a section intended for navigation. It should contain navigational links.

<main> -- Use to represent the main content of the <body> of a document or application. This content should be unique to the document and not repeated elsewhere. The main tag must not be nested in a section or article tag (but would more likely be the parent of such tags). There must not be more than one <main> tag within a document.

<section> -- Used for grouping together thematically related content and should contain (and be able to be described by) a heading element (either h1-h6 or hgroup or header).

<article> -- Used for "self contained" content that may be potentially syndicated such as blog posts, news stories, comments, reviews, forum posts, or widgets.

<aside> -- Use for sidebar content, tangentially related to page or section content. Note that "aside" doesn't necessary connote its position on the left or right side (although it may indeed be positioned in such places), but rather suggests that its content is tangentially related (but not essential) to the primary content of the section and/or page in which the aside resides.

Applying new structural tags to layouts

The following shows one example of how you might convert an older HTML layout that uses div tags to define structure to an HTML5 layout that uses HTML5 tags to define structure.

HTML4 HTML5
<div id="container">
<div id="header">
<h1>Company Name/Logo or Title</h1>
<h2>Tagline for Company</h2>
</div>
<div id="main_nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div id="main_content">
<h3>Page ID or Title Here</h3>
<p>Content of Page Here </p>
</div>
<div id="sidebar">
<p>Content of Sidebar</p>
</div>
<div id="footer">Footer content</div>
</div><!--/container-->

<div id="container">
<header><hgroup>
<h1>Company Name/Logo or Title</h1>
<h2>Tagline for Company</h2>
</hgroup></header>
<nav> <!--/could be included in header-->
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
<section id="main_content">
<h1>Page ID or Title Here</h1>
<p>Content of Page Here </p>
</section>
<aside>
<p>Content of Sidebar</p>
</aside>
<footer>Footer content</footer>
</div><!--/container-->

Ensuring cross-browser compatiblity

Given that old browsers don't support HTML5, there are a couple things that are needed to ensure cross-browser compatiblity for these new structural tags.

1) Many browsers don't add any styling to these new HTML5 tags, so at the very least you will want them to display as block elements. Add the following CSS code:

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

2) While this does the trick for most browsers, Internet Explorer versions less than IE9 still won't recoginze the new elements. However, some Javascript has been written to force them to do just that. Add the following before the closing of the head tag.

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

The above javascript code comes courtesy of Remy Sharp and is documented at:

Another way to do this is through the use of the Modernizr, which includes the same code used in the library above as well as adds the ability to detect support for various CSS3 and HTML5 elements which allows you to customize your CSS accordingly. Modernizer is available for download and documented at: