HTML5 Tutorial: new tags & attributes 1

Tags & Semantics

Why we actually say (or write ) in an HTML document, this is a <div> with class = "header". Why we don't write just: <header>. Like you wouldn't say: I drive a car from the Mercedes class. You just say: I drive Mercedes! (honestly, I drive a Lada '92). In interpreting the meaning of an element actually, the whole development of HTML5 is based: discovering quickly, both by human and computer, where you can quickly find certain information based on the name of the element in which the information is posted, in other words: based on the page semantics. Whether you're coming from Zwazulu, China, Taiwan or the Netherlands or whether you're a computer, it should be obvious immediately where to find information such as the name of the blogger, the copyright information, navigation, main content, etc.

The builders of the new HTML5 specifications introduced, on the basis of such considerations, an amount of new structural elements such as <footer>, <nav>, <header>, <article>, <time> etc. If we want to build footers, headers, navigations again and again, let's announce them as standard elements (tags) in a new version of HTML 5. And so it happened.

To the list of new elements were added more and more elements in the course of time, like <section> , <aside> , <hcard> , <details> , <figure> , <svg> , <mark> , <canvas> etc. In total 28 new elements were published eventually. In this article we look at some of these new elements that form the basis for the markup of a brand new HTML5 page. We also look at how it is with the support of these elements in the latest browsers as well as in the previous (especially IE) browsers. Each new element in HTML5 is described in two different HTML5 specifications drawn up by the developers : the W3C consortium and also the WHATWG (Web Hypertext Application Technology Working Group ). That's where you can go for the official details and specifications of the new elements and when they can and can not be applied. In this article we look at a few examples of new features and how they can be used in practice. OK, let's get to it then!. We'll begin with a glance at how you can simply replace an HTML4 document into a HTML5 document:

The HTML4 document

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>HTML4 (Safari)</title>
  </head> 
  <body >
    This is the body
    <div id="wrapper">
    div id="wrapper"
    <div id="header">
    div id="header" 
    </div>
    <div id="sidebar">div id="sidebar"</div>
    <div class="post">div class="post" </div>
    <div class="post">div class="post" </div>
    <div id="footer">div id="footer"</div>
    </div>
  </body>
  </html>

The CSS

    div{
  padding:5px;
  margin:5px;
  }
  
  #wrapper {
  display:block;
  position: absolute;
  width:650px;
  left:10px;
  top:120px;
  1background-color:#ff8f8b;
  border: 1px solid #cccccc;
  border-radius:10px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  padding:20px;
  }
  
  #header,
  #footer{
  background-color:#eee;
  border: 1px solid #cccccc;
  border-radius:10px; 
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  padding:30px 10px;
  }
  
  #sidebar {
  float:left; 
  width:20%;
  height:220px;
  background:#eee;
  border-radius:10px; 
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  margin-top:15px;
  margin-bottom:15px;
  padding:10px;
 } 
 
.post {
  float:right; 
  width:67%; 
  height:80px;
  margin-top:15px;
  background-color:rgba(0,0,0,0.2);
  border: 1px solid #cccccc;
  border-radius:10px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  padding:10px;
  }
   
  #footer {
  clear:both; 
  }
html4 ducument structure
Image 1. Familiar elements with id or class attributes that provide the semantics.

Check this example in your browser

The same document in HTML5

Before we proceed with the HTML5 code, first a few points on the styling of HTML with CSS. You can easily apply CSS to any element, including the new HTML5 elements. The fact that you can place new elements does not mean that the browser understands the element such as browsers do with HTML4 elements. Browsers in principle, don't do anything with HTML5 elements, except allowing and styling them based on the CSS rules added by the developer. We can stroke <nav>'s, float <articles>'s and give margins to <footer> 's and so on, but.... beware, CSS displays al these elements as inline. However, we want to use these elements as block elements, and so we will explicitly have to inform the browser about this, using the CSS rule display: block;

header, nav, footer, article 
{
  display:block;
}

Below then the HTML5 markup and CSS rules with a screenshot of the result in Safari

The HTML5 document

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>HTML5 (Safari)</title>
</head>
<body >
<p>This is the body element</p>
<section>
  <p>This is a section element</p>
  <header> 
  <p>This is a section header element</p> 
  </header>
  <nav>
  <p>This is a section nav element</p> 
  </nav>
  <article>
  <p>This is a section article element</p>
  </article>
  <article>
  <p>This is a section article element</p>
  </article>
  <footer>
  <p>This is a section footer element</p>
  </footer> 
</section>
</body>
</html>

The CSS

  body{
  font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size:12px; 
  }
  header, nav, footer, article {
  display:block;
  padding:5px 5px 5px 5px;
  margin:5px;
  }
  section{
  background-color: #999;
  padding:5px;
  }
  header{
  background-color: #ccc;
  }
  article{
  float:right; 
  width:67%; 
  background-color:#f3d14f; 
  }
  nav{
  float:left; 
  width:20%;
  background-color:#f3d14f; 
  height:100px;
  }
  footer{
  clear:both; 
  background-color:#ccc;
  margin-top:5px;
  }
 
html5 ducument structure
Image 2. HTML5 elements replacing the HTML 4 elements from image 1

Check this example in your browser

Internet Explorer is misbehaving again

In previous versions of Internet Explorer (8 and lower) the HTML5 elements in the above page will look completely unstyled. However, there is a hack again to activation the styling. Add the following Javascript to the page and Voilà (Do not ask how , but be grateful)

document.createElement(‘section’); 
document.createElement(‘header’); 
document.createElement(‘nav’); 
document.createElement(‘article’); 
document.createElement(‘footer’); 

You only have to do this for the HTML5 elements. The HTML4 elements are simply supported nicely. And despite the fact that other browsers are not affected by the script, you can choose to wrap it in a conditional comment"

<!--[if IE lt IE 9]> 
  <script>   Place the script here   </script
<![endif]-->

With each use of a new HTML5 element you need to add a line of code to the script, focused on the new element. This is quite a hassle though! However, there is a script that does this all this automatically for you. Use the conditional comment below:

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

No <content> element?

Despite the fact that a large amount of div's in web pages have a class called "content" (of course, every web page has content), the HTML5 specification doesn't mention a <content> element. That's odd! However, the idea behind the lack of a <content> element is that the first content which is not located in a <header>, <nav>, <aside>, or <footer> element, is in fact the beginning of the main content. However, if you want a risk-free approach, then you can opt for WAI-ARIA and add role=main, regardless of whether the main content is located in a <article>, <div> (see Figure 3) or whether the content is a direct descendant of the <body> or <section> (see Image4). Another solution is simply using the <div id="content"> or <div id="mainContent"> because in HTML5 we can continue to use the good old 'divider' (<div>), which is is also referred to as a shelter for homeless content.

div en aside element
Image 3. Main content in a separate <div> met id="mainContent".

Check this example in your browser

main content als descendent van body
Image 4. Main content as a direct descendant of <section>.

Check this example in your browser

The <aside> element

Many websites have a sidebar in which several navigation blocks and other components can be placed, such as images, ads, and other items that we can not display as a list of links. These items can be placed in the <aside> element. The HTML specification from the W3C describes the <aside> element as "can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of <nav> elements and any other content that is not part of the main content of the page. Below is an example of how a <aside> element might look like:

<aside> 
	<nav> 
		<h2>Subjects</h2> 
		<ul>.. </ul> 
	</nav>...
	<nav> 
		<h2>Recent comments</h2> 
		<ul>... </ul> 
	</nav> 
	<section> 
		<h2>Chatter, whining and whinging</h2> 
		<a href=”...”>Webdesign by Fred</a> 
		<img src=”...”> 
		<p>
		Powered by <a href=”...”>Wordpress</a>
		</p> 
		<p>
		<a href=”...”>RSS feeds</a> and 
		<a href=”...”>Latest comments</a>
		</p> 
	</section> 
</aside>

The <section> element

Strictly speaking the top-level element <section> is not really necessary in the page as shown in Figure 4, because the <body> element in HTML5 has been improved and upgraded as a so-called "sectioning" element. A sectioning element is an element that defines the scope for different elements such as as <h1-h6> and <adress>. However, it is recommended to use such a top-level element like <section>, because it improves the portability of your markup by changing your page in a building block that you can insert as a whole into another page or website again.

The <article> element

The obvious place to post articles or blogs is in a <article> element. <article> is defined in the HTML5 specification as "the article element represents a component of the page, which is composed of an autonomic component in the document, page, application, or site, and which is intended to be distributed or re-used, for example, through syndication. "A blog post, an article, news item, comic strip or a video fit perfectly within this definition. Please note, as with the <nav> element, the heading (= title) is placed inside the element, so <h1> Tutorial </ h1> <article> <p> Bla bla bla bla </ p> </ article> is incorrect. It should be: <article> <h1> Tutorial </ h1> <p> Bla bla bla bla </ p> </ article>.

The <header> element

In the example above, as in most sites, the header is the first visual element on the page and contains the title of the website, logos, links back to the homepage etc. The specification says: "The header element represents a group of introductions or navigation additions.... Here, we note: a header is intended to contain the title of the section, (a h1-h6 element or a hgroup), but that is not required. The header element can also be used to contain a table of contents of a section or a search facility or any relevant logo. "An example of a typical header fragment in HTML is:

<header>  
<a href=”/”><img src=logo.png alt=”home”></a>
<hgroup>   
    <h1>Programming course PHP</h1>   
    <h2>Learn how to use design pattern</h2>  
</hgroup>  
<nav>   
    <ul>    
      <li>Home</li>    
      <li><a href=”cursus.html”>PHP course</a></li>    
      <li><a href=”contact.html”>Contact</a></li>   
    </ul>  
</nav> 
</header>

The navigation can of course also be placed outside the header element as horizontal strip under the header or even above it The header element is not mandatory

The <footer> element

In the HTML5 specification, the <footer> element is defined as follows, being: "a footer for the most nearest content section or root section element.... When the nearest ancester content section or section root element is the body, then the footer applies for the entire page. A footer usual contains information about its section such as the author, links to related documents, copyright information, and other such things." Make sure that, just like with the header element, there can be multiple footers present on a page.

When a footer contains copyright information then it is usually placed in the <small> element, an element that was also redefined in HTML5, see also the tutorial 'Semantic refinements.' In the example below we see the HTML code of a typical footer:

<footer>  
    <small>&copy;2011 Preludio</small>
</footer>

It is allowed to wrap, the so-called "footerlinks" to other pages, in a <aside> element but ask yourself whether the <aside> component thereby is a part of the footer, or more or a sibling (neighbor) of the footer. Finally, the links to other pages are likely, albeit indirectly, to have something to do with the page as a whole, rather than just the content of the footer. The following code shows an example of this principle:

<body>  
    <div id="mainContent">
        <h1>Tutorials</h1>
    </div> 
<!--below an aside element with "footer" links
to other pages placed outside the footer itself--> <aside> <nav> <h2>jQuery</h2> <ul>... </ul> </nav> <nav> <h2>Prototype </h2> <ul>... </ul> </nav> <nav> <h2>Dojo</h2> <ul>... </ul> </nav> <nav> <h2>Script.aculo.us </h2> <ul>... </ul> </nav> </aside> <footer> <small>&copy;2011 Preludio</small> </footer> </body>

Summary

In this article, we introduced a number of new HTML5 elements, such as <section>, <article>, <aside>, <nav>, <header> and <footer> that form the building blocks for a new HTML5 document. We saw that the biggest difference between HTML4 and HTML5 lies in the fact that we, by the name of the elements, which are placed around a page section, can see what kind of information we're dealing with. HTML5 documents can be, compared with HTML4 documents, marked up in a much more semantic way. This is beneficial for the clarity and consistency of the information exchanged by both humans and machines. It also provides options for asking more targeted information from a document for example by search engines. When you are looking for for example blog entries, then the search engine will search for content posted within <article> tags.

Leave a comment