• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 12/11/2018

Structuring your page

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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>:

<header>
    <!-- Put your header here -->
</header>

The figure below, for example, shows part of OpenClassrooms website and you can see its header.

Header tag
Header tag

The header can contain anything you want: images, links, texts, etc.

<footer>: footer

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.

Footer tag
Footer tag

<nav>: main browsing links

The <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>:

<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 <nav>.

Nav tag
Nav tag

<section>: a page section

The <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).

Section tag
Section tag

<aside>: additional information

The <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 <aside> blocks.

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.).

Aside tag
Aside tag

<article>: an independent article

The <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.

Article tag
Article tag

Summary

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!

Page sections identified by tags
Page sections identified by tags

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?

Like nothing!
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.

A page that is well structured but without CSS
A page that is well structured but without CSS

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)!

Fortunately, this can be resolved fairly easily using a JavaScript script. Scripts are small pieces of code that allow the user to interact with the web page and perform certain actions. While we're not going to concern ourselves here with JavaScript (it's not the subject of this course), be aware that this type of script is called from HTML pages in a way quite similar to the way CSS files are called.

JavaScript files usually have the extension .js. In HTML code, they are generally placed in the <head> tag with this tag:

<script src="myscript.js"></script>

The reason I'm giving you a brief overview of JavaScript here is that a small script with the cute name HTML5shiv allows you to make sure that the tags we've just seen (<header>, <footer>, <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!

Summing up

  • Several tags were introduced with HTML5 to delineate the various areas making up the web page:

    • <header>: header;

    • <footer>: footer;

    • <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.

  • JavaScript HTML5shiv code is used to ensure that these tags are recognized by versions of Internet Explorer prior to IE9.

Exemple de certificat de réussite
Exemple de certificat de réussite