Organisation des contenus HTML5

Depuis HTML5, le contenu d’une page web est doté de blocs dont les intitulés sont signifiants : <header> , <nav> , <arcticle> , <section> , <figure> , <audio> ,  <video> ,  <embed> , … des balises aux noms explicites, indiquant ce que signifie leur contenu :

• <header> = entête, permet d’annoncer ce que contient la page,
• <nav> = zone de navigation (menu, …), une liste de liens menant aux contenus du site,
• <article> = article (message de forum, un article de presse, un billet de blog, …),
• <aside>  = contenu contextuel à un autre contenu
• …

Les noms de ces blocs définissent le type de contenu, mais ne spécifie pas leur forme (position, dimension, couleurs, police de caractère, comportement, …). Pour cela, on utilisera des feuilles de style CSS.

Exercice :

• Créer une page web conforme à la structure décrite ci-dessus. Le contenu de chaque bloc sera le nom du bloc.

<header> : en-tête

Cet élément permet d’annoncer (titre, slogan, logo, …) ce que contient la page (ou un article, une section, …).

Il peut également contenir des liens de navigation, un sommaire, un formulaire de recherche, …

<nav> : éléments de navigation

L’élément <nav>  contient les éléments de navigation du site (barre de navigation horizontale ou en menu latéral).

<article> : portion de document

La balise <article>  délimite une portion du document. Ce peut être un message de forum, un article de presse, un billet de blog ou toute autre portion de contenu indépendant. Un article imbriqué dans un autre désignera une citation.

<section> :

Une section permet de subdiviser le contenu d’un document (paragraphes, blocs thématiques, …). Elle peut elle-même se subdiviser en plusieurs sections et être constituée d’un en-tête, d’un pied, et d’une navigation…

<aside> : élément contextuel

Cette balise contient les contenus contextuels, c’est-à-dire en relation thématique avec ce qui l’entoure (liens « sur le même thème », encadré dans un article, …).

<canvas> : zone de dessin

La balise <canvas>  permet de créer une zone de dessin. On utilise ensuite du JavaScript pour la créer et l’animer :

<canvas id="myCanvas" width="300" height="140" style="border:1px solid #000000;" />
<script>
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.arc(95,50,40,0,2*Math.PI);
   ctx.stroke();
</script>

affiche :

<audio> : lecteur de fichier audio

La balise <audio>  permet d’afficher un lecteur audio.

<audio src="monfichier.mp3" autoplay controls loop />

Les attributs autoplay , controls  et loop  sont facultatifs. Ils permettent respectivement de lancer automatiquement la lecture, d’afficher les boutons lecture/arrêt et de lire la piste en boucle.

<video> : lecteur de vidéo

La balise <video>  s’utilise comme la balise <audio>, sauf qu’il faut préciser les dimensions de la vidéo, ainsi que le type MIME du fichier :

<video width="360" height="240">
   <source src="movie.ogv" type="video/ogg" />
</video>

 

<footer> : pieds de page

L’élément <footer>  contient les informations de « pied de page » : auteur, droits de reproduction, etc. de la section à laquelle il est appliqué.

Remarques :

• il peut être présent plusieurs fois dans la page (chaque section, article, …)
• il ne se place pas nécessairement à la fin.

---

Exercice :

Sans aucune mise en forme, mais en utilisant au mieux les balises HTML5 :

• Créer une page web présentant votre CV.
  • Identité (avec photo !)
  • Formation
  • Expérience professionnelle
  • Compétences en informatiques
  • Langues pratiquées
  • Hobbies / Voyages
  • …
• Créer une page web qui utilise toutes ces balises et résume une description de la mésange charbonnière, incluant, image, vidéo, chant, et liens vers toutes les pages source dans un menu. Aucune mise en forme !

[do_widget id=mla-text-widget-2]

 

Sources : http://romy.tetue.net/elements-html-5-de-structure

https://fr.wikibooks.org/wiki/Le_langage_HTML/HTML5