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

html5_structure

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 :

affiche :

<audio> : lecteur de fichier audio

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

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 :

 

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

Dépôt de fichier réponse

  • Ajouter un(des) fichier(s) puis cliquer sur Téléverser.
  • Rafraichir la page pour vérifier que le dépôt a bien eu lieu.

 

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

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

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

code