HTML5 Tutorial: new tags & attributes 2

Tags & Semantics

In the article "Tags & semantics1" we looked at how a simple HTML5 document can be structured using some new elements such as<section>, <article>, <aside>, <nav>, <header> and <footer>. In this tutorial we look at a typical blog page as an example of how we can structure a document even more. We choose a blog page because approximately 70% of all web professionals has one and almost everyone has ever seen one. In addition, most blogs have a header, footer, sidebar, multiple navigations and a form.

See the image below (Image 1) for a typical content section of a blogpage.

blog layout
Image 1. A typical content section of a blogpage.

In HTML4 a blog article was mostly formatted just about as follows:

<div class=”post”> 
	<h2>Improved semantics in HTML5</h2> 
	<small>Monday, 31 January 2012</small>   
	<div class=”entry”>     
	<p>Article text here. Various HTML4  functionalities have been 
improved in HTML5, some former presentation tags were given a new 
life, and some markup 'outsiders' were again welcomed in the transition 
to HTML5
	</p>   
	</div>   
	<p class=”more”>
	<a href=”/?cat=3”>Read more... </a> 
	<a href=”/?p=34#comment”>Add comment</a></p>
</div>

This markup will work fine in all browsers, including "HTML5" browsers, but apart from the title of the blog entry (the <h2> element>, the structure is not very evident and consists only of meaningless divs and paragraphs. A div is actually nothing more than a box with inscription: Here is some content and it belongs together. This hasn't any semantic value except for the fact that it belongs together. Therefore we will, whenever possible, replace this kind of generic boxes by HTML5 elements. If there is no better alternative, we keep the the <div> element. A <div> is actually often referred to as a safe haven for homeless content.

Let's focus first on a single article in the blog. As discussed in the article "Tags & semantics1" we can replace <div class="post"> by <article>. But we can go further. The <header> and <footer> element can occur multiple times on a page, each time applicable to the section where it is located, so we can place the title and time stamp in a separate <header>element within <article>. Just so, we can replace the section with class = "more" by a <footer> element. Finally, the <small> element with the time can be replaced by a new element, namely the <time> element. See Image 3.

The layout of the article in HTML5 looks as follows:

The HTML5 document

<article> 
	<header>
	<h2>Improved semantics in HTML5</h2> 
	<time>Monday, January 31th 2013</time> 
	</header>  
	<p>Article text here. Various HTML4  functionalities have been 
improved in HTML5, some former presentation tags were given a new 
life, and some markup 'outsiders' were again welcomed in the transition 
to HTML5</p>   
	<footer>
	<a href=”/?cat=3”>Read more... </a> 
	<a href=”/?p=34#comment”>Add comment</a>
	</footer>
</article>
html5
Image 3. Each <article> element can have its own <header> and <footer>.

Check this example in your browser

The <time> element

<time> is a new element for the unambiguous encoding of time and date for machines (computers), but is printed on the screen in a format to be read by people. The applications in web pages are obvious: the browser can display future events in a users calendar. Content aggregators can print visual timelines of events on screen. The machine-readable part of the <time> element is typically encased in the datetime attribute of the element. The content of the element is what users see. Some examples of the use of the <time> element:

<time datetime=2011-11-13>13 November 2011</time> 
<time datetime=2011-11-13T020:00Z>8 o'clock in the evening on my birthday</time> 
<time datetime=23:00>11 o'clock in the evening</time>

To be machine-readable, date should be placed in the format YYYY-MM-DD, and may also contain a time in the format HH: MM, preceded by a "T" to separate the date and time. Optionally, you can also add seconds (HH: MM: SS).

The pubdate attribute

Pubdate attribute is a Boolean (true or false) to indicate that a particular <time> is the publication date of a <article> or the entire <body>. You may wonder if this is necessary. Why not just assume that every <time> element in the <header> of an <article>is always the publication-date. But look at the following example:

<article>   
	<header>     
		<h1>Come to my party on 
			<time datetime=2010-12-01>5 March</time>
		</h1>      
		<p>Published on 
			<time datetime=2010-06-20 pubdate>20 February 2011</time>
		</p>   
	</header>   
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	Duis ligula lorem, consequat eget, tristique nec, auctor quis, 
	purus.</p> 
</article>

You can see that there are two dates within the <header>: the date of the party and the publication date of the article. The pubdate attribute is required in order to eliminate this ambiguity.

Doing even more with headers and footers

More footers per section or element

The HTML5 specification states that footers, not necessarily have to stand at the end of a section , even though it is usually the case. In addition, there may be several footers inside an element. The example below is therefore valid HTML5 markup:

<body>  
	<footer>
		<a href=”/”>Search again..</a>
		</footer>  
			<h1>Search results</h1>  
			<p>Lorem ipsum</p>  
			<p>Nam ipsum ligula</p>  
			<p>Curabitur posuere</p>  
		<footer>
		<a href=”/”>Search again..</a>
	</footer>
 </body>

The reason for this is that elements in general do not have to interfere with the presentation (layout) of a page. If "Search Again..." is part of a footer below the search results list and you choose to place a "Search Again..." above the search results list as well, then you should do so using the same element for the same content no matter where the content is located. See image 4:

meerdere headers en footers
Image 4. Exact same content (above: the "new search" link) should be placed within elements of the same type.

Check this example in your browser

The <blockquote> <footer>

A 'new' kind of footer is the footer in a <blockquote> element that can be used to specify the source of a quotation, by means of the nicely stylized <cite> element. Before you actually never saw the <cite> element within a <blockquote>.

<blockquote>The main problems can not be solved within the same context in which they were created.<footer>
		Ananias 
		<cite>
			<a  href=”http://www.voorbeeld.org/”>Speciale relativiteitstheorie</a>
		</cite>
		 (Albert Einstein)
	</footer> 
</blockquote>

Again the <article> element in blog posts with comments

We have already seen that we can nicely markup a blogpost with the <article> element, complete with a nested header, footer and time element. But what about the layout of the comments that we usually come across in blogs? In the HTML5 specification is recommended that comments are placed in nested <article> elements, see Image 5 :

The HTML5 markup

<article> article	
	<header>header		
		<h2><span >h2</span>Improved semantics in HTML5</h2> 		
		<time><span>time</span>Monday, januari 3, 2013</time> 	
	</header>  	
	<p>Verschillende HTML4 functionaliteiten zijn verbeterd in HTML5, 
        enkel voormalige presentatie tags kregen een nieuw leven, en sommige 
        markup 'buitenbeentjes' werden opnieuw verwelkomd bij de overgang 
        naar HTML5.</p>   	
	<footer>footer		
		<a href=”/?cat=3”>Read more... </a> 		
		<a href=”/?p=34#comment”>Place a comment</a>	
	</footer>        
	<article>    	
		<header>
			<h2>Title of Reaction here</h2>
			<time>Tuesday, februari 3, 2013</time>
		</header>  		
		<p>Comment text here. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>     
	</article>	 
	<article>
		<header>       	
			<h2>Titel Reactie 2</h2>        	
			<time>Thursday, februari 3, 2013</time>     	
		</header>  		
		<p>Comment text here. Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>     
	</article>
</article>

geneste <article> elementen als comments
Image 5. Weblog comments as nested <article> elements.

Check this example in your browser

Leave a comment