Tips for HTML5, part 5: A closer look at selected tags

Most journalism students need to know only the bare minimum about HTML and how it works. For years I have been saying they need to know about 10 basic tags and not much more.

That’s probably going to change with HTML5.

This elegant illustration by Derek Bender (from his presentation The Future of the Web: HTML5) sums up the five new tags that just might make it easier to teach HTML (and CSS) to journalism students, even though it means learning more tags.

It’s nice that three of the six tags adopted the words that most of us already use to name our CSS divs for these page elements today: header, footer, nav. The aside is what we would normally call a sidebar, or in some cases, a rail. There can be more than one article on a page, as well as more than one section.

I think Bender’s illustration portrays section correctly — see this explanation about section at the HTML5 Doctor site. One rule is that you should not have a section unless it has a unique <h> inside it. (I’ll bet we will have to be very clear in teaching the difference between <header> and the familiar <h> tags!)

Oli Studholme also has a nice discussion about the difference between article and section.

We can style these HTML5 tags any way we like, with CSS. We can assign IDs or classes to them. And we can still use the <div> tag — that has not changed. We will simply use fewer DIVs in our style sheets once we start using these new tags.

For related posts, check out the “code” category here in this blog.