In "The Past, Present, and Future of HTML5," we discussed the evolution from HTML to HTML5 in order to provide a firm foundation for understanding HTML5 coding. Now we're ready to dive into some of the most important and useful HTML5 elements.

In the HTML5 world, much emphasis has been placed on features such as animation, the tag, and hardware acceleration. However, in our opinion, only a small percentage of developers will be working with these high-profile elements. While the cool factor of sites like html5gallery.com is definitely a draw for developers and designers, the more mundane but nevertheless important elements will make a much bigger impact. In this article, we will discuss some of the new elements that are now available in HTML5, specifically

, , and .

Although these elements are not technically difficult to use, it is important to address why we use them. A few years ago, I (Daniel Egan) got my first taste of HTML5 at a code camp. As the speaker discussed elements such as

, , and , I thought, "What's the big deal? Won't more elements just serve to clutter up HTML even more? Why should I even care about this?" What we have learned since then is that these elements are important for a variety of reasons.

Reasons to Care About HTML5

Although these new elements are quite simple to use, their implications for the web are both subtle and profound. For example, web developers and designers are very accustomed to the universal, catch-all

element—which no longer exists in HTML5. The division element, as the name implies, divides markup into appropriate sections. But in practice, the element is used for everything. Therefore, it loses its effectiveness as an element itself. Even worse, the IDs used within the div element aren't consistent, as Figure 1 shows.

Figure 1: Inconsistent IDs used in the element

Although it would be nice if each and every developer used the same nomenclature, as shown in Figure 1, we know that individuality reigns supreme. Without consistency, there is no way to have any hooks into a web page. Hooks might include readers for the visually impaired or keystrokes that hook into certain areas of a site or that direct the user's focus onto a particular section of a page. None of this can be done at the browser or machine level because there is no consistent naming at that level. That's where this very simple and sometimes overlooked portion of the HTML5 specifications come in handy.

Although you can't count on certain sections of HTML pages to have the same name, a great majority of developers do use consistent naming practices for particular sections. In 2004, Ian Hickson, editor of the HTML5 specifications, did a Google search to determine the most common names used by developers. The names used by HTML5 for the new elements include many of these commonly used names; you can see the HTML5 and class-name mapping here.

Of course, that doesn't mean you can easily map your HTML code to the new elements; what it does mean, however, is that developers have a certain comfort level by using these names. While this simplicity might seem like a small detail, anyone who has ever done a redesign of a system knows that easing the transition is a big part of making the redesign successful. Simplicity is sometimes both overlooked and underestimated.

Now that we have discussed why we care about these elements, let's dive right into their use. If you like digging into functional specifications, go to the W3C HTML5 spec overview page. There you will find the definition and usage specification for each of these elements.

Header Element

We might as well start at the head of the class: the

element. According to the aforementioned W3.org site, "The header element represents a group of introductory or navigational aids… [It] is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos." In other words, the header element contains the stuff developers have been putting in their tag for many years. Figure 2 shows an example of the header element.

                                        HighFive HTML5 Training        The one stop shop for all things HTML5                    

You may notice from the code in Figure 2 that the syntax that starts with is quite different from what you're used to. The syntax has been simplified and no longer requires the long URL that we have become accustomed to. Additionally, the tag is not case sensitive. For example, is the same as . As a matter of fact, you can even leave out the , , and tags because they are implied in HTML5. However, we do not recommend leaving them out. You will also notice that the

section entails a logical grouping of an image and

and

tags, all contained within an tag.Nav ElementDevelopers frequently want to put menus in the header when menus are used as global resources across the site. This leads us to the use of the next new element, . The specification for this element states, "The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links." Of course, this specification identifies the basic use for the element, but as we discussed earlier, the real importance of these elements resides in their broader application. The specification goes on to say, "User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request."The code in Figure 3 shows a element. Of course, this code would normally put hyperlinks inside the elements, but we'll leave it as is for simplicity's sake. The specification also helps users determine where not to use this element. For example, simple links to terms of service or to copyright information in a footer do not typically use the element.

HighFive HTML5 Training The one stop shop for all things HTML5 Home Talks Training About Us Footer ElementAt first glance, you might assume that the element is meant for the bottom of your page. It is, but its intended use is broader than that. According to the specification, "The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element." This means that can go at the end of , , , , , , or elements (all new elements that will need to be discussed in a later article in this series). There are restrictions to where footer elements can be placed. For instance, you cannot put a at the end or above because they cannot be nested inside a , , or element.Keeping It SimpleHopefully, by now in this series, it's clear why we should care about HTML5. Like most things in programming, simple constructs can have deep underpinnings. Simple elements like , , and can have deeper implications than what initially meets the eye. Understanding why these elements were created can help us master best practices for their use. We hope you continue this journey with us into the dynamic world of HTML5 as we explore the importance of writing clean and effective HTML5 code structure in "HTML5 Syntax and Semantics: Why They Matter" to help you leverage HTML5 to its fullest.