HTML5 Tutorial: new tags & attributes 4

Tags & Semantics

One of the new concepts of HTML5 that we have not yet discussed is the so-called document outline concept. This is sometimes called the outlining algorithm. The purpose of this algorithm is to make it possible for user agents that visit the web page to make a similar outline ( layout) as that of the web page itself. Another use of the algorithm outline is syndication: picking up content and insert elsewhere in the knowledge that the target page looks also well structured. It is important to understand the document outline concept to know when exactly use <section>, <aside> or <div>. Since this concept is not yet supported by browsers ( HTML5 is still in the experimental phase), we can demonstration this concept by using an online tool at http://gsnedders.html5.org/outliner/

Before going any further, you must first understand another concept, that of the sectioning content. Elements like <article>, <section>, <nav>, and <aside> are examples of so called sectioning content; elements that start new sections of the page. Before discussing this kind of content we look at the following simple code:

<h1>Hoi</h1> 
<div> 
	<h1>Piepeloi</h1> 
</div>
outline
Image 1. No sectioning content

In HTML5 we can replace the meaningless <div> element by sectioning content, namely <article>. See Figure 2

<h1>Hoi</h1> 
<article>  
<h1>Piepeloi</h1> </article>
outline
Image 2. With sectioning content: <article>.

We see a shift plate takes of the content inside the <article> element and the page is organized hierarchically. Placement of a title element (h1-h6) in <section>, <nav> or <aside> has the same effect, because these elements are all of type sectioning content. Ok. all well and good, but what good is it? Well, this: you're no longer tied to six types of titles, such as in HTML4. another advantage is related to syndication. Suppose you have written an article in your blog, for example:

<article>  
	<h1>Differences between HTML4 and HTML5</h1> 
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. 
	</p> 
</article>

A magazine for webdesigners want to publish your blogpost in its online articles. After syndication the whole in the article looks as follows:

<h1>Webdesigner Artikelen</h1> 
<section>  
	<h2>De beste weblogs</h2>   
		<article>    
		<h1>Verschillen tussen HTML4 en HTML5</h1>    
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
		Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p>   
		</article> ...
</section>

Because of a mismatch of content, an <h1> element came to be under the <h2> element which is not common. The "the best weblogs" is higher in the hierarchy than "Differences between HTML4 and HTML5." But .... looking at the outline (see Figure 3) it's all correct!

outline
Image 3. The outline looks again like it should.

And so everything was fine in the end! (Pfppoe .... scared the hell out of me!)

Another new element: <hgroup>

The HTML5 <hgroup> tag will be removed from the W3C’s HTML5 specification!

Sometimes there is a title and a subtitle or slogan, for example on the Philips website: "sence and simplicity." In HTML4 you could format it as follows:

<h1>Philips</h1> 
<p>sence and simplicity</p>

But that is not what it actually says. An alternative might be:

<h1>Philips</h1> 
<h2>sence and simplicity</h2>

But then you're used up your h2 titles and you can only continue using H1-6. HTML5 however a subtitle can be made up as an <h2> element but can be removed from the document outline, in the following way:

<hgroup>  
	<h1>Philips</h1>  
	<h2>sence and simplicity</h2> 
</hgroup>

This gives the following outline (see image 4)

outline
Image 4. Within the

element, the <H1-6> element with the highest rank is printed in the outline. De lower <H1-6> elements are ignored
<article>  
	<hgroup>   
		<h2>Hello </h2>   
		<h1>There!</h1>  
	</hgroup> 
</article> 

Prints text "There!" in the outline, because it is the title of the highest rank.

Sectioning roots

In sectioning content, we also know the so-called sectioning roots, as there are the elements: <blockquote>, <body>, <details>, <fieldset>, <figure>, <td>. They may have their own outlines, but the sections and titles within these elements do not follow the outlines of their ancestors (parents). This is because, for example, different sections in an article can be provided with quotation marks, without these quoted sections being part of the overall document outline, as can be seen in the following example:

<h1>Lorem Ipsum</h1> 
<nav>  
<h2>Main nav</h2> 
... 
</nav> 
<article>  
	<h2>Mauris et eros eget</h2>  
	<p>Fusce ac quam. Donec neque. Nunc venenatis enim nec quam.</p>  
	<blockquote>   
		<h3>Pellentesque id arcu</h3>   
		<p>Cras faucibus, justo vel accumsan aliquam</p>   
		<h3>Fusce aliquam </h3>   
		<p>Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia 
		ut, augue. Nullam nunc.</p>  
	</blockquote> 
</article>

outline
Image 5. The outline does not contain the content of <blockquote>.

Leave a comment