Bruce Lawson, HTML5 Semantics:

HTML5 semantics

If your business is like mine, you've been hearing a lot of HTML5 this and HTML5 that lately. Lots of talk about the "Flash killing" video element, animations with canvas, geolocation, and much more. In fact, the buzz around HTML5 has been extended to include things that aren't even HTML5 at all. All over the web, people are talking about the new expressive capabilities of CSS3 while calling them HTML5. Often forgotten in the overwhelming marketing buzz of HTML5 are the new elements introduced and other semantic changes. In this article, I'd like to help you understand and learn to properly use these not-necessarily-exciting, yet definitely very important new, semantic elements. While the subject may seem dry and boring, there's actually a new richness you can add to your markup with the proper use of these new elements.

Why do we have new elements anyway? Did we need them? Where did they come from?

Think about your code. Do you ever use

, , or

? That's exactly where these new elements came from. Millions (maybe billions) of web pages were spidered and the common class names were compiled. You can imagine, after seeing "div class=header" for the umpteenth time, as an analyst, you pretty much knew you were on to something.

In fact, the above listed classes and IDs are three of the most obvious elements—header, nav, footer. And they make sense to most of us. Where it gets trickier, is adding article, section, and what in the world is an aside? More importantly, where do they go on the page? I won't discuss them all in this article, but some of the new elements introduced with HTML5 are (bearing in mind that a couple are still popping in and out of the spec):

article

aside

audio

canvas

command

datalist

details

embed

figcaption

figure

footer

header

hgroup

keygen

mark

meter

nav

output

progress

rp

rt

ruby

section

source

summary

time

video

wbr

One of the first challenges when you receive the content for a website, is deciding which of the new elements are appropriate to use and where they should go (see Figure 1).

Related video
Web semantics tutorial: Using HTML5 header, nav, and
Web semantics tutorial: Using HTML5 header, nav, and ...
HTML5 Semantics
HTML5 Semantics
HTML5 Structure, Syntax, and Semantics 5 syntax
HTML5 Structure, Syntax, and Semantics 5 syntax
Interesting facts
Related Posts