HTML5 - La balise <footer>

Administrateur · par **darky** » Dim 10 Juil 2011 14:36

Sommaire

Introduction
Tutoriel

I- Introduction

Bonjour à toutes et à tous.

Dans ce tutoriel, nous allons voir comment utiliser la nouvelle balise <footer> </footer> de l’HTML5.

Informations :

Difficulté : Facile

II- Tutoriel

La balise HTML5 <footer> </footer> représente le pied d’une page Web ou celui d’une section. Avant l’arrivée de cette balise HTML5, vous utilisiez en HTML4 l’élément <div> avec souvent les attributs id="footer" ou id="pied".

Pour exemple, en HTML4 vous écriviez ceci, pour définir l’en-tête de votre page Web :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>Page HTML 5</title>
        </head>
        <body>
            <!-- Debut: En-tête de la page Web -->
            <div id="header">
                    <h1><a href="index.html">Mon site</a></h1>
            </div>
            <!-- Fin: En-tête de la page Web -->
            <!-- Debut: Pied de la page Web -->
            <div id="footer">
                    <p>Mon Site &copy; Tous droits réservés</p>
            </div>
            <!-- Fin: Pied de la page Web -->
        </body>
</html>

En HTML5 vous allez écrire :

Code : Tout sélectionner

<!DOCTYPE HTML>
<html>
        <head>
                <meta charset="utf-8">
                <title>Page HTML 5</title>
        </head>
 
        <body>
                <!-- Debut: En-tête de la page Web -->
                <header>
                        <h1><a href="index.html">Mon site</a></h1>
                </header>
                <!-- Fin: En-tête de la page Web -->
                <!-- Debut: Pied de la page Web -->
                <footer>
                        <p>Mon Site &copy; Tous droits réservés</p>
                </footer>
                <!-- Fin: Pied de la page Web -->
        </body>
</html>

La balise <footer> peut aussi définir le pied d’une section.

Exemple avec la balise <section> :

Code : Tout sélectionner

<section>
    <header>
        <h1>La balise Header</h1>
        <p>Présentation de la balise Header.</p>
    </header>
    <p>Bonjour à toutes et à tous.<br/>Dans ce tutoriel, nous allons voir comment utiliser la nouvelle balise footer de l’HTML5. [...]</p>
    <footer>
        <p>Ecrit par darky.</p>
    </footer>
</section>

Exemple avec la balise <article> :

Code : Tout sélectionner

<article>
    <header>
        <h1>La balise Header</h1>
    </header>
    <p>Bonjour à toutes et à tous.<br/>Dans ce tutoriel, nous allons voir comment utiliser la nouvelle balise footer de l’HTML5. [...]</p>
    <footer>
        <p>Ecrit par darky.</p>
    </footer>
</article>

Cette nouvelle balise a donc pour but de mieux hiérarchiser vos pages Web, comme c’est la cas pour la balise <header>.

Voici ensuite les attributs liés à l’élément footer :

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

darky.

Publicités

Administrateur · par **darky** » Mer 25 Avr 2012 13:18

Tutoriel validé !
Votre tutoriel a été validé par darky.

[Tutoriel] HTML5 - La balise <footer>

Publicités

Qui est en ligne