Benjawi.

HTML5 includes a few new structural elements that have been designed to make markup more meaningful. These elements are ready to be used today; they don't do much, so browsers don't need to explicitly support them and it takes only a little trickery to make them work even in Internet Explorer. To site visitors, these new elements are essentially useless, but their existence has a purpose and that is to make your web pages more understandable by both humans and robots.

Anyone looking at the source code of your site and trying to understand it will have more hints as to the purpose of various parts of the page. It's good for Search Engine Optimisation as robots, notably search engine spiders, will eventually find these tags helpful in understanding what a web page is all about. Users with disabilities and need to use Screen readers or other assistive devices will also be able to make use of these elements by being able to better choose what content to skip and how to jump around the site.

There are 28 new element tags in HTML5. I won't list them all, as there are a few that will rarely be used as some are cod coding in Ruby. Now Ruby would be a completely different topic; I did the main part of my degree on Ruby and I loved it, just wish it didn't cost so much to host.

New Structural Elements

<article>	Defines an article or other complete content
<aside>	Defines content aside from the page content, such as a sidebar
<header>	Defines the header region of a page
<nav>	Defines the navigation region of a page
<section>	A local region of a page
<footer>	Defines the footer region of a page
<datalist>	Defines a list of data available for an input element

The new elements that HTML5 bring are designed to replace the <div> element that modern web designs will have to wrap each region. They simply carry more meaning with which to replace the generic <div>. In essence this is the same thing that most designers have been doing for years with HTML IDs and classes and taking it to a more native HTML tag. By making these common names into proper tags they are so much more useful. Browsers or search engines are less likely to read your ID or class names and change behaviour but they may well do so based on the new structural element names.

Potential implications on SEO

Some of the new elements could potentially affect SEO results and so interest in them could rise quite quickly. The <section> tag, for example, allows you have have a page that is explicitly about more than one thing. Wisdom in the SEO world is that each page should only ever have one <h1> tag as search engines like a page to be clearly about one thing. But with the ability to clearly divide pages into sections, each section is encouraged to have it's own set oh header hierarchy, including the <h1> tag. The section is essentially setting a page like context for a topic. Within a section, not only do articles provide another level of grouping but an article can have it's own <header> and <footer> tags as a page is not limited to one.

What you can essentially do is have two pages on one and have them read as two pages by search engines.

Internet Explorer

As always, things aren't as simple with Internet Explorer as they are with other browsers such as Firefox, Safari, Opera, etc. HTML was designed to be extensible, the new elements don't have to do anything special, all they need is to be tolerated and connected with their styles in a stylesheet. Most browsers can deal with this just fine.

Internet Explorer, as usual, isn't so easy, although the work around is simple enough, you just need to add a little javascript to each page where these new elements are going to be used to give IE a little bit of a wake up so that it will connect the CSS rules for a new element with the HTML. So if you want to use the <header> element, you use this code:

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

All you have to do is use the document.createElement statement for each new element that you want to use on that particular page. Here's the code to make IE work with the header, section and footer elements:

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

Styling

The only other issue to be aware of when styling the new elements is that they start out as unknown elements, so although they will seem to be block-level elements naturally, they actually start out as inline elements unless you style them to be block-level. One simple CSS rule sorts this out easily, all you have to do is add the elements that you are going to be using:

<script>
    header, section, footer, aside { display: block; }
</script>

It's always nice to get a little more semantic content into web pages, and the new structural elements are easy enough to use and when used right could improve not only how your site is ranked and used by search engines, but also how disabled visitors get content from web pages. So they're a natural way to start moving your designs a little further into the HTML5 world.