HTML5 - La balise <header>

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

Sommaire

Introduction
Tutoriel

I- Introduction

Bonjour à toutes et à tous.

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

Informations :

Difficulté : Facile

II- Tutoriel

La balise HTML5 <header> </header> représente l’en-tête d’une page Web ou celle d’une section. Avant l’arrivée de cette balise HTML5, vous utilisiez en HTML4 l’élément <div> avec souvent les attributs id="header" ou id="en-tete".

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

html 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 -->
        </body>
</html>

En HTML5 vous allez écrire :

html 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 -->
        </body>
</html>

La balise <header> peut aussi définir l’en-tête d’une section.

Exemple avec la balise <section> :

html Code: Tout sélectionner

<section>
    <header>
        <h1>La balise Header</h1>
        <p>Présentation de la balise Header.</p>
    </header>
</section>

Exemple avec la balise <article> :

html Code: Tout sélectionner

<article>
    <header>
        <h1>La balise Header</h1>
    </header>
    <p>Présentation de la balise Header.</p>
</article>

Cette nouvelle balise a donc pour but de mieux hiérarchiser vos pages Web.

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

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

darky.

Publicités

Administrateur · par **darky** » Dim 6 Mai 2012 11:49

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

[Tutoriel] HTML5 - La balise <header>

Publicités

Qui est en ligne