Webvanta Blog: Creating Effective Websites

Using HTML5's New Structural Tags

Using HTML5

HTML5 includes a handful of new structural elements that are designed to make markup more meaningful. You can use these elements today; they don’t really do much, so browsers don’t need to explicitly support them. And it takes only a little trickery to make them work even in IE.

From a site visitor perspective, the new elements are essentially useless, but don’t let that get you down: their reason for existence is to make web page code more meaningful.

Using these tags can make your web pages more understandable by both humans and robots:

  • Humans (even you!) who are looking at your web page code and trying to understand it will have more hints as to the purpose of various parts of the page.
  • Robots, notably search engine spiders, will eventually find the hints provided by these tags to be helpful in understanding what a web page is about.
  • Screen readers and other assistive devices for site visitors with disabilities will be able to better choose what content to skip and how to jump around.

The New Structural Elements

The major new structural elements are as follows:

nav Navigation region
header Header region
footer Footer region
article A article or other complete piece of content
aside Secondary content, such as a sidebar
section A logical region of a page

There’s a few other new structural elements, such as <figure>, but these are the main ones.

In many cases, modern web designs will have a <div> element wrapping each region playing one of the roles listed above. The new elements simply give you an element that carries more meaning, with which to replace the generic <div>.

In essence, this is doing with native HTML tags the same thing most designers have been doing for years with HTML IDs and classes. That’s no coincidence: one of the guiding principles of the HTML5 effort is to ‘pave the cowpaths.’

By making these common names into full-fledged tags, they become much more useful. No browser or search engine spider is likely to read your class or ID names and change behavior based on them, but they may well do so based on the new structural element names.

New Semantic Subtleties

In the days of HTML4, one could argue about the proper place to use <ol> or <ul>, and whether you should in fact be using a <dl> instead.

HTML5 introduces a new set of subtleties that, like older HTML elements in their early days, require some consideration to produce the best code. Some of these issues potentially affect SEO results, so interest in them could rise quickly.

The new <section> tag may have the most far-reaching implications, because it allows you to have a page that is explicitly about more than one thing. Prevailing wisdom in the SEO world is that each page should have one, and only one, <h1> tag, since search engine results tend to be best if a page is clearly ‘about’ one thing.

With the ability to divide pages into sections, each section is now encouraged to have its own <h1> and the rest of the heading hierarchy; essentially, the section sets a page-like context for a topic.

Within a section (if any), articles provide another level of grouping. An article can have its own <header> and <footer> tags; a page is not limited to one set.

Asides are Like Sidebars, Sometimes

The <aside> element is particularly subtle. It is meant to be used for information that is tangential. If a sidebar area has the sort of content that sidebars in magazine articles typically have, then <aside> is the right element to use. But if a sidebar contains navigation, that part of it should be in a <nav> element.

No doubt the specification provides new opportunities for people who like to argue the fine points of semantic markup, such as whether a piece of content should be marked up as an aside or as a footer, whether a region of a page is more properly an article or a section, and what heading levels are properly used within a new section or article.

Are These Really Safe to Use Now?

How is it that we can make up new elements and just start using them, even in older browsers?

This works, for the most part, because HTML was intended to be extensible. The new elements don’t have to do anything special, they just have to be tolerated, and connected with the corresponding styles in a stylesheet. This is something that most browsers deal with just fine.

There is one browser that has issues with adding elements in this way, and it is — get ready for it — Internet Explorer! But for once, it is easy to help it along.

It just takes a little bit of JavaScript to wake IE up so it will connect the CSS rules for a new element with the HTML. Here’s the code, for example, to make IE work with the header and footer elements:

<script> document.createElement('header'); document.createElement('footer'); </script> 

Just use the document.createElement statement for each new element that you want to use.

Alternatively, you can load the small JavaScript library, html5shim, which enables all of the new elements for IE.

Styling the New Elements

There’s one other issue to be aware of when styling the new elements: they are starting out as virgin, unknown elements. So while they may seem naturally to be block-level elements, they will start out as inline elements unless you style them as block. One simple CSS rule does the trick (be sure to add whatever elements you are using):

header, footer, nav, section, article, aside { display: block } 

Now you can just add CSS rules for these elements just as you would for any other block-level element.

It’s nice to get a little more semantic content into our pages, and the new structural elements are easy enough to use. So they’re a natural way to start moving your designs a little further into the HTML5 world.

For More Information

Topics: HTML5 and CSS3

Add Your Comments

(not published)