Nils Häbel's weblog

Good design...

1. ...is innovative
2. ...makes a product useful
3. ...is aesthetic
4. ...makes a product understandable
5. ...is unobtrusive
6. ...is honest
7. ...is long-lasting
8. ...is thorough down to the last detail
9. ...is environmentally friendly
10. ...is as little design as possible

Source

With the upcoming of HTML5 there are tons of new possibilities to enhance web sites or web applications. I decided to kick off this small weblog with some of new things introduced in HTML5. In this first post I'd like to name some of the new elements introduced in HTML5 that can be used to define semantic blocks within an HTML website.

The section tag

The new section tag allows you to group different kinds of content into different... well... sections. Normally each section has got a headline and some content. On a typical website you might have sections such as About us, Products, Contact us, etc. Using the section tag will also mean that you can make use of multiple <h1> tags - one per section only.
Keep in mind that the section tag was not made as a replacement for the <div> tag - you should only group completly different areas of your website with different kinds of contents into sections and not every single block element. Please also keep in mind that sections shouldn't be used to separate multiple content areas belonging to the same context - in this case you'd better make use of the <article> tag!

Styling sections is pretty much the same as styling every other block element.

The article tag

While the section tag can be used to separate different areas (with a different context) of a page the article tag is useful for grouping content from the same context - this could be blog posts, articles in a document or comments. You can also nest articles into each other.

In a typical weblog you might use a syntax like this:

<article>
	<header>
		<h2>Article heading</h2>
		Publishing information...
	</header>
	
	<p>Content...</p>
	
	<footer>
		<p><a href="#comments">View comments...</a></p>
	</footer>
</article>

The header tag

Now that we've grouped our website into sections and articles we can make use of the header tag. Header tags can be put around everything that (semantically) is a header. This means that there can be multiple »headers« on one page - each header will then be the header for it's following elements. In practice a header could contain a heading (<h1> - <h6>), a summary of the following text, an image, ...

The footer tag

As an equivalent to the header tag you can use the footer tag to mark areas as a footer. Within the footer you can give information about the author, the license (of an article), related information/sources, etc.

The nav tag

Now that we've used various tags to define headers, footers and content areas we can mark our website's navigation using the new nav tag. You'd normally make rare use of that element and only wrap main navigation areas inside it.

Again, a simple example:

<nav>
	<ul>
		<li><a href="#home">Home</a></li>
		<li><a href="#aboutus">About us</a></li>
		<li><a href="#products">Products</a></li>
		<li><a href="#contactus">Contact us</a></li>
	</ul>
</nav>

The aside tag

If you need to place information on your web site that is relating to the actual content you can use the aside element. The aside element helps you defining sidebars or info boxes or areas that have content which is not primarly important.

What about IE?

Of course Microsoft's Internet Explorer doesn't support the new HTML5 tags - at least not the older versions. Changing your document's Doctype to the (awesome!) HTML5 Doctype will work out fine. But as soon as you start styling your HTML5 elements via CSS you'll run into some problems.
But there are simple solutions to make nearly all HTML5 tags run in IE as well.

A small piece of JavaScript...

You can tell IE to render the new elements properly by simply adding some JavaScript to your website. Sample code:

document.createElement("section");

The problem with this is that you would have to call that method for each single new element. So why not automize this?

elements = [ "article", "aside", "figure", "figcaption", "footer", "header", "nav", "section" ];

for(var i = 0, l = elements.length; i < l; i++)
{
	document.createElement(elements[i]);
}

This code loops through each element of the array and create the corresponding HTML element. To support more tags than the few given here, just add them to the array at the top.

...and some CSS

Now that IE knows about the existance of these elements we still have to define them as block elements - otherwise they'd be handled like every other inline element:

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

Same thing here: Just add more elements to support them.
The effect of this piece of code is that the elements will be handled as block elements which means that they'll take up the whole width of the current line.

As some of you might remember, I already had a weblog some time ago. But due to a lack of time I decided to take a »blogging« break - at least for a few months.
So, now I'm back again. I don't think that there's an adequate description for this weblog but I'm planning to write about stuff concerning the web, various social aspects of it (Facebook, etc.), web technologies (such as HTML5), some thoughts about design, business and how other people do their business... Of course, all this can (and will) change over time.

I decided not to adopt older entries so this weblog will start all over (and empty).
So, off to new shores!

Look up all entries in the archive.