Getting Started With HTML5 - The New Elements!

By: Daniel Imbellino
Updated: Feb 28, 2013

HTML5 is thought to be the “semantic” version of HTML, in the sense that it attempts to better describe the relationship between elements and the content those elements hold. Semantic literally means “of or relating to meaning”, especially in language. Many of the new HTML tags being implemented do just that, they are better at expressing the relationship between elements and their content. Some of the new elements that were implemented, such as the <nav>, <article>, or <section>, tags, are better able to describe these relationships when implementing our markup. We’re going to describe many of the new elements here and the best practices for implementing them. While HTML5 looks towards semantics for a cleaner form of markup, this is actually nothing new. In fact, XML solved this problem years ago, the issue here being that it required web designers to build their own markup language from scratch using descriptors as tags, such as the ones we used in our fictitious XBOX markup language in another tutorial. Nonetheless, the new tags streamline the process of better markup for us, without having to create a fully functioning markup language from scratch, nor have to define a set of rules such as a schema in order to make it valid.

Before we discuss the new elements we first need to clarify some other changes as well. For starters, the DOCTYPE declaration has been shortened as compared to previous versions of HTML. In HTML 4.01 the DOCTYPE was <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” http://www.w3.org/TR/html4/strict.dtd> . The DOCTYPE has now been shortened to just <!DOCTYPE html> . However, it still serves the same purpose as every type before it, to declare the version of HTML being implemented. In the case of HTML5 this signifies to run the document in “standards” mode, to signify that you are using the latest version of the HTML specifications in your webpage’s. Keep in mind HTML5 is NOT yet a standard. Not all tags and corresponding properties will function in all major browsers as of yet. Webkit based browsers such as Google’s Chrome have the best support to date.

The New Elements:

<header>
<footer>
<section>
<article>
<nav>
And more to follow.

The <header></header> and <footer></footer> tags are meant to help signify the beginning and end of a document and should be placed between the beginning and end of the <body> tags like so:

<html>
<body>
<header></header>
More content here!
<footer></footer>
</body>
</html>

The header might contain information such as an opening statement, a banner, site logo, or even a navigation section of links to various sections of your site. The footer tag is more geared to including information such as maybe copyright notice, ending statements, etc.

The <nav> (navigation) element:

In previous versions of HTML the <ul> unordered list, and <ol> ordered list elements were often used to place navigational links within a website. The problem with these tags is that they could be used to create a list of anything really, such as images, text, links, or other multimedia. The newer <nav> element is geared towards explicitly stating the use of a navigational list of links either being absolute (that is a URL with a full address being implemented IE: (“http://www.name-of-site.com/example-page.html”), or a relative URL (an internal page of your site that sits within the same directory ("html-tutorials/html5/getting-started-with-html5.html” ).

If you wanted to include a navigational section from your pages heading you could do so easily like this:

<html>
<body>
<header>
<nav>
<a href=”index.html” target=”_self”>Site Home</a>
<a href=”working-with-scalable-vector-graphics.html” target=”_self”>Get started with SVG!</a>
</nav>
</header>
More content!
<footer></footer>
</body>
</html>

The <nav> element is a lot more intuitive of the content which it contains vs using a standard list that could exist for anything.

The section “<section>” and article “<article>” tags:

In older versions of HTML we used the paragraph tag to signify the start or end of a section within a webpage. The problem here is that not every paragraph may be totally related, and designers needed a way to break up content into more defined sections within a page itself, and the <section> tag does just this. Just as with the paragraph tag, you can have multiple section tags as well:

<html>
<body>
<header>
<nav>
Links
</nav>
</header>
<section>
<hgroup>
<h1>section heading</h1>
<h2>section sub-heading</h2>
<h3>section sub-heading three</h3>
</hgroup>
</section>
<footer></footer>
</body>
</html>

Notice the <section> element can house its own headings, in this case we used the <hgroup> (heading group) tag to consolidate several headings within our section. Likewise, we can use a single set of <header></header> tags within our <section> instead if we choose to.

Just as our main document can have a header and a footer, so can each section within our document as well. We can even include navigational links in our sections also.

<section>
<header>
<h1>heading</h1>
<nav>Links!</nav>
</header>
</section>

The Article “<article>” tag:

Each section of our HTML document could contain a series of articles within them. You can use the paragraph “<p>” element directly in your article or section tags however you choose. If you are writing about a particular subject and only that subject on one single page, it might be best to skip the “<article>” tag altogether and just use the section and paragraph tags instead. However, if you are designing a main index page for your site where you to display descriptions and links to various alternate areas of your site, then incorporating the use of the article tag might be a great idea; such as with a news site for example. You may want to showcase current articles on weather, sports, local, and national news right from your sites home page.

<section>
<header>
<h1>heading</h1>
</header>
<article>
<header>
<h1>sports</h1>
</header>
<p>Info about sports here</p>
</article>
<article>
<header>
<h1>Local News</h1>
</header>
<p>Info about Current Local News Here</p>
</article>
<footer></footer>
</section>

The Aside <aside> tag:

The “aside” element should be placed explicitly within the <article> tag, between paragraphs. It is used to represent content that is somehow related to the article but is separated in some way, such as making a note about a particular point in the article flow.

<article>
<header>
<h1>heading</h1>
</header>
<p>article content</p>
<aside>additional info that pertains to the content in some way</aside>
<p>more article content</p>
</article>

The <figure> and <figcaption> elements:

The figure element acts to define a point of interest with an article element. You can use this tag to point out important textual or graphical information from within a particular article.

<figure>
<img src=”important-image.png” alt=”description of our image” title=”info to display in a tool tip” />
<figcaption>textual information we want to emphasize on</figcaption>
</figure>
This element was originally intended to be used only within an article element, although this may change at a later time. The figure element works to create a standalone area of an article that you want to stand out and readers to focus on.