We're gradually getting there. If our website page don't look quite like the websites we know, it's because we don't as yet know how to do the page layout.
In general, a web page consists of a header (right at the top), browser menus (at the top or on the sides), various sections in the center... and a footer (right at the bottom).
In this chapter, we're going to look at the new HTML tags for structuring the website. These tags were introduced by HTML5 (they weren't available before) and will allow us to say: "This is my header", "This is my browsing menu", etc.
We're not going to do any page layout for the time being. In fact, we're going to prepare our HTML document so as to be able to find out about page layout in the next chapters.
HTML5 structural tags
I'm going to show you the new tags introduced by HTML5 for structuring our pages. You'll see, it won't change the look of our website much yet, but it's going to be well-built and ready to be laid out thereafter!
<header>: the header
Most websites usually have a header. It most often contains a logo, a banner, your website's slogan, etc.
You have to place this information inside the tag
<header> <!-- Put your header here --> </header>
The figure below, for example, shows part of OpenClassrooms website and you can see its header.
The header can contain anything you want: images, links, texts, etc.
Unlike the header, the footer is usually right at the bottom of the document. It contains information like contact links, the author's name, legal notices, etc.
<footer> <!-- Put your footer here --> </footer>
The figure below shows what the footer of OpenClassrooms website looks like.
<nav>: main browsing links
<nav> tag has to include all the website's main browsing links. For example, it would contain your website's main menu.
The menu usually takes the form of a bulleted list inside the tag
<nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="forum.html">Forum</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav>
In the figure below, you can see OpenClassrooms main browsing menu, which could use the tag
<section>: a page section
<section> tag includes contents according to their subject. It generally covers a portion of the content in the center of the page.
<section> <h1>My page section</h1> <p>Bla bla bla bla</p> </section>
On the home page of Wikipedia, there are several blocks that could be considered as page sections (figure below).
<aside>: additional information
<aside> tag is designed to contain information in addition to the document viewed. This information is usually located on the side (although it doesn't have to be).
<aside> <!-- Put here more information about your content --> </aside>
The page may contain several
In Wikipedia, for example, the article being viewed often has a block of additional information on the right. Thus, the page describing a star (next figure) contains a block giving the star's features (dimensions, weight, etc.).
<article>: an independent article
<article> tag is used to cover a portion of the page that is generally independent. It's a part of the page which could thus be reused on another website. This is the case, for example of the news (newspaper articles or blogs).
<article> <h1>My article</h1> <p>Bla bla bla bla</p> </article>
For example, an article on OpenClassrooms website is shown in the next figure.
Phew, that's a lot of new tags to remember.
Fortunately, I've made you a little diagram (figure below) to help you remember what they do!
Practical example of the use of tags
Let's try to use the tags that we have just found out about to structure our web page. The code below shows all the tags that we have just seen, in a full web page:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Zozor - The Website</title> </head> <body> <header> <h1>Zozor</h1> <h2>Travel diaries</h2> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Resume</a></li> </ul> </nav> <section> <aside> <h1>About the author</h1> <p>It's me, Zozor! I was born on November 23, 2005.</p> </aside> <article> <h1>I'm a great traveller</h1> <p>Bla bla bla bla (article text)</p> </article> </section> <footer> <p>Zozor Copyright - All rights reserved<br /> <a href="#">Contact me!</a></p> </footer> </body> </html>
This code can help you understand how tags have to be arranged. You can see it contains a header, a browsing menu, a page footer, etc. and, in the center, a section with an article and a
<aside> block providing information about the article author.
What does the page we've just created look like?
If you test the result, you'll see just black text on a white background (figure below). This is normal, there's no CSS! The page is, however, well structured, which we will find useful for the next step.
I don't understand the purpose of these tags. You could very well get the same result without using them!
That's true. In fact, these tags are only there to explain to the computer "This is the header", "This is my page footer", etc. They do not, contrary to what one might think, specify where the content should be placed. That's what CSS does, as we're going to see shortly.
To be honest, these tags aren't very useful for the time being. You could just as well use the
<div> generic tags instead to include the various portions of our content. In fact, this is how it was done before the arrival of these new HTML5 tags.
However, it's quite likely that, in the near future, computers will begin to intelligently take advantage of these new tags. You could imagine, for example, a browser choosing to display the
<nav> browsing links so that they are always visible! Once the computer "understands" the page structure, everything becomes possible.
Ensuring compatibility with IE
The new tags we've just seen have only been recognized by Internet Explorer since its version 9 (IE9). This is going to be a problem as when older versions of IE don't know a tag... they don't handle the page properly (you can't edit their CSS for example)!
.js. In HTML code, they are generally placed in the
<head> tag with this tag:
HTML5shiv allows you to make sure that the tags we've just seen (
<section>…) are displayed correctly in older versions of Internet Explorer (IE6, IE7, IE8). In practice, you simply add the following lines to your code:
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Enter this code in the
<head> tag like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <title>Inclusion of HTML5shiv</title> </head> <body> </body> </html>
And there you are, your website will now be displayed with no problem in Internet Explorer!
Several tags were introduced with HTML5 to delineate the various areas making up the web page:
<nav>: main browsing links;
<section>: page section;
<aside>: additional information;
<article>: independent article.
These tags can be nested within each other. A section can thus have its own header.
These tags are not involved in the page layout. They just tell the computer what the text they contain means. You could just as well put the header at the bottom of the page if you wanted.
HTML5shivcode is used to ensure that these tags are recognized by versions of Internet Explorer prior to IE9.