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
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
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
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 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 , Developers 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 code in Figure 3 shows a At first glance, you might assume that the Hopefully, 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
HighFive HTML5 Training
The one stop shop for all things HTML5
and
tags, all contained within an tag.
Nav Element
HighFive HTML5 Training
The one stop shop for all things HTML5
Footer Element
Keeping It Simple
