• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 20/11/2019

Découvrez les nouvelles balises de structure

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

Dans ce chapitre, nous allons voir ce que HTML5 apporte de nouveau en termes de balises de structure.

Découvrez les nouveaux usages permis par HTML5

Tout d'abord, une chose important à savoir est que le terme HTML5 englobe trois technologies :

  • les balises HTML,

  • les feuilles de style CSS,

  • et le JavaScript !

En deux mots et sans entrer dans le détail, HTML5 permet de nouveaux usages, liés à :

  • une sémantique nouvelle qui se traduit notamment par des balises nouvelles ;

  • de nouvelles fonctionnalités (associées justement à ces nouvelles balises).
    Par exemple :

    • une gestion simplifiée de l'audio et de la vidéo,

    • des formulaires,

    • du glisser-déposer,

    • la création de dessins et d'animations,

    • l'intégration de la géolocalisation au sein des applications développées,

    • l'adaptation aux terminaux mobiles. 

Nouveaux usages permis par HTML5
Nouveaux usages permis par HTML5

Dans ce module, nous nous concentrerons sur la gestion de l'audio et de la vidéo, le glisser-déposer, et les dessins et animations. Pour ce premier chapitre sur HTML5, commençons doucement avec les nouvelles balises de structure HTML5.

Avant tout, révisons les différents types de balises que l'on rencontre dans un document HTML.

Nous avons vu que l'on rencontre des balises de :

  • contenu de flux permettant la structuration du document :

    • a  (pour lien),

    • p  (pour paragraphe),

    • div  (pour définition d'un conteneur),

    • table  (pour tableau),

    • form  (pour formulaire)... ;

  • contenu de phrasé, qui sont des balises imbriquées dans les précédentes et qui confèrent une valeur sémantique à une partie de contenu :

    • a  (à nouveau, pour lien),

    • em  (pour une mise en relief, la plupart du temps en italique),

    • strong  (pour donner de l’importance au texte, la plupart du temps en gras),

    • span  (pour conteneur en ligne),

    • input  (pour champ de saisie),

    • select  (pour liste de choix), etc. ;

  • métadonnées, qui fournissent des renseignements complémentaires ou associent au document HTML un contenu extérieur :

    • link  (pour lier le document à un fichier extérieur, par exemple une feuille de style),

    • style  (pour définir directement un style dans le document HTML),

    • meta  (pour définir des métadonnées),

    • script  (pour définir du code JavaScript)...

Les nouvelles balises de structure qui sont présentées dans le tableau ci-dessous autorisent une nouvelle façon de penser une page web. C'est bien plus que de nouveaux éléments avec des noms génériques.

Balises

Fonctions

section

La balise section a été conçue pour permettre de regrouper un même sujet, une même fonctionnalité ; c'est par exemple une liste de dépêches d'actualités (des news, si vous préférez) regroupées sous un même thème.

article

La balise article est une partie de contenu indépendante, pouvant être extraite du document ou syndiquée (c'est-à-dire retransmise par abonnement, par exemple dans un flux RSS vers un autre site) ; c'est par exemple un texte d'actualité.

nav

La balise nav est une partie de contenu possédant des liens de navigation ; c'est par exemple un ensemble de liens permettant de naviguer entre les thèmes d'actualité.

aside

La balise aside est une partie de contenu qui est en rapport avec ce qui l'entoure, et qui peut apporter des informations supplémentaires ; c'est, pour notre exemple, un ensemble de liens se rapportant à un thème donné.

footer

La balise footer constitue une partie conclusive d'un article, d'une autre section ou du document tout entier ; c'est le pied de page de l'élément qui le contient.

Source : HTML 5, une référence pour le développement Web, Rodolphe Rimelé, Éditions Eyrolles.

Avec ces nouvelles balises, la stratégie lors la construction de pages web consiste à :

  • éliminer au maximum les balises div et les remplacer par des éléments HTML5 plus signifiants ;

  • écrire les CSS associés à ces éléments en les désignant explicitement ;

  • limiter au maximum la prolifération des attributs class et id, afin d'alléger les éléments HTML.

Voici pour les nouvelles balises de structure. Dans la prochaine section, je vous propose un petit exercice.

Exercice : Gabarit de page

Dans la section précédente, nous avons introduit les nouvelles balises de structure d’HTML5. Il est temps de mettre tout ceci en oeuvre sur un petit exercice.

Je vous propose d'utiliser quelques-unes de ces nouvelles balises de structure, et de reproduire la structure suivante :

  • un header (en-tête) contenant les liens de navigation ;

  • un contenu principal de type section contenant un conteneur aside (qui sera flottant) et des articles ;

  • un footer.

On peut représenter cette structuration à l’écran de la manière suivante :

Structuration à l'écran
Structuration à l'écran

Pour mettre en œuvre ces notions, je vous propose d’utiliser le code ci-dessous. Préalablement, merci d'utiliser une version récente de Firefox ou de Chrome.

Première étape : le fichier HTML complet est donné ci-dessous.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" media="screen" href="styles.css" type="text/css"/>
<title>Balises HTML5</title>
</head>
<body>
<!-- header -->
<header>
Texte du Header
<!-- menu ici dans le header et en ligne -->
<nav>Lien 1 | Lien 2 | Lien 3</nav>
</header>
<!-- contenu principal -->
<section>
<!-- un contenu latéral (mais la balise aside ne l’implique pas forcément) -->
<aside>Contenu de côté à droite</aside>
<!-- contenu de la section -->
<h1>premier titre</h1>
<p>un paragraphe</p>
<article>Hello 3</article>
<article>Hello 2</article>
<article>Hello 3</article>
</section>
<!-- footer -->
<footer>ici le pied de page</footer>
</body>
</html>

Vous voyez que l'on retrouve dans l'ordre :

  • l'élément header contenant un texte et un élément nav, avec déjà trois textes qui vont plus tard être transformés en liens ;

  • un élément section contenant un élément aside que l'on destine ici à être placé sur le côté droit, un titre et un paragraphe, trois articles presque vides pour l'instant ;

  • un footer, sous l'élément section, tout en bas.

Si vous testez ce fichier dans un navigateur, vous obtiendrez ceci :

Voici ce que donne ce fichier pour l'instant
Voici ce que donne ce fichier pour l'instant

Il faut donc maintenant introduire une feuille de styles.

Pour cela, nous ajoutons à présent au fichier HTML une balise <link> qui associe à la page HTML le fichier styles.css :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" media="screen" href="styles.css" type="text/css"/>
<title>Balises HTML5</title>
</head>

Le contenu de départ du fichier style.css est le suivant :

body {
width:800px;
}
article, section, aside, header, footer, nav {
background-color:#eee;
border:1px solid #6d6d6d;
margin-top:5px;
margin-bottom:5px;
margin-right:5px;
margin-left:5px;
}

Le code ci-dessus donne dans le détail :

  • un corps de la page de 800 pixels ;

  • les éléments auront :

    • un fond gris,

    • pour cadre une ligne continue et gris sombre,

    • une marge de 5 px de séparation sur les côtés.

Si vous testez ce fichier dans un navigateur, vous obtiendrez ceci, qui nous permet de bien identifier les contenus :

Nouvelle structuration
Nouvelle structuration

Il nous reste à placer l'élément aside sur la droite. Nous choisissons ici d'utiliser un positionnement flottant qui retire l'élément aside du flux normal, et le positionne sur la droite.

aside {
width:50%;
float: right;
}

On donne également à cet élément une largeur de 50 % (c'est-à-dire 50 % de la largeur de l'élément parent). Pour s’en convaincre, changer la largeur de l'élément section.

Voici donc pour cet exercice qui nous a permis de mettre en œuvre les nouvelles balises de structure d’HTML5. Dans la prochaine section, nous allons évoquer quelques problèmes de compatibilité avec les navigateurs.

Compatibilité

Il nous reste à traiter un dernier point : malheureusement, ces nouvelles balises de structure ne sont pas reconnues par les versions d'Internet Explorer antérieures à la version 9.

Que fait ce script ? Sans entrer dans les détails, il va lire le contenu de la page et réécrire les éléments que le navigateur ne saura pas traiter.
Comment lancer ce script ?
Il suffit d'insérer ce qu'on appelle un commentaire conditionnel.

Les commentaires conditionnels ont été conçus par Microsoft pour délivrer ou bien cacher au navigateur Internet Explorer du code HTML. Les autres navigateurs les considèrent comme des commentaires normaux.

Ce commentaire est inséré dans l'en-tête, et il s'écrit de la façon suivante :

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

Ce qui se lit : si le navigateur Internet Explorer qui lit la page est d'une version antérieure à 9, alors lancer le script situé à l'adresse écrite dans la balise src (source).

Au final, votre code prendra la forme suivante : 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" media="screen" href="styles.css" type="text/css"/>
<title>Balises HTML5</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

Voilà pour ces nouvelles balises HTML5.

Peut-être vous posez-vous la question de leur utilité, puisque l'on doit encore préciser leur positionnement et leur aspect grâce à un fichier CSS. Tout à l'heure, nous avons parlé de nouvelle sémantique : le nom de ces nouvelles balises donne une indication sur leur fonction et leur contenu. L'idée sous-jacente est que le contenu de ces balises soit mieux identifié et donc mieux référencé par les moteurs de recherche que des balises portant un nom plus générique, comme un simple div.

Vous pouvez profiter de cet exercice pour :

  • utiliser quelques balises :  blockquote,  strong,  i,  br,  abbrcode,  var ;

  • utiliser les tags de paragraphe par défaut  h1  ...  h6, et les modifier grâce à une feuille de style.

Je vous propose aussi de faire plusieurs tests de rendu avec des navigateurs différents.

Voilà donc pour les problèmes de compatibilité de navigateur.

En résumé

Nous venons de découvrir les nouvelles balises de structure. Dans le chapitre suivant, nous allons introduire les balises qui permettent d'afficher des images, celles qui permettent d'afficher de l'audio ou de la vidéo ainsi que celles permettant de jouer du son.

Sources

RIMELE, R. - HTML5, Une référence pour le développement web - Eyrolles : 2013 - 752 p.

HTML5 : Nouveaux éléments de section, article, header, footer, aside, nav

Introduction à HTML5

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