HTML5 introduces a whole new set of semantic elements. Semantic markup is HTML that introduces meaning rather than presentation. When semantic elements are used on a page, the browser can interpret their purpose within the structure of the
page. For example, when the HTML5 <footer> element is used on a page, the browser (as well as web spiders) will be more clear on the purpose of the contents of the element. This allows browsers and other user agents to handle the
content in a specific manner. Contrast that with a common example that you may use when developing a web page based on HTML4.01. In the footer example, you would use a <div> element and style the element in a manner that resembles a typical
footer. However, using the <div> element does not convey any clear meaning about its contents.
In the previous article in this series, you were introduced into some of the new HTML5 elments. Let's take a look at how some of these elements can be used in an HTML5 document.
The image above shows a typical web page that can leverage 6 new HTML5 elements. The header and footer elements are self-explanatory. The nav element can be used to create a navigation bar. The section and article elements can be used
to group your content. Finally, the aside element can be used for a sidebar of related links. Let us take a closer look at the actual markup.
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" />
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
This is the first article.
This is the second article.
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<img src="#" alt="Image1" width="#" height="#" />
Supporting New HTML5 Elements
At the time of this writing, browsers do not have full support for HTML5 specific elements, so they just treat them as user defined tags when they are encountered in a page. All major browsers, except Internet Explorer
will render the unrecognized element as a inline element, and give web developers the freedom to style them. So, aside from IE, web developers would be able to safely include these new elements in their web projects.
we can mitigate this issue. There is a well documented technique online that solves this problem. The simple technique just requires that you create a DOM element with the same name as the tag. Once that is established,
IE will honor the styling. Prior to version IE9 there was little to no support for HTML5 elements. Since IE still has a very high percentage of usage, it is important to ensure that your webpage functions correctly when accessed by
being used is a version of IE earlier than version 9.
<!--[if lt IE 9]>
Internet Explorer prior to version 9 will process the statement. Other non-IE browsers will treat the
conditional script as a comment. You can either download the JavaSript file or point directly to it on Google's site.
<!--[if lt IE 9]>
Recommended Books & Training Resources