• <div> : permet de regrouper des éléments mais sans que ce regroupement acquière de valeur sémantique. Cependant l'utilisation de l'attribut class permet d'appliquer les mêmes règles à l'ensemble des éléments paratgeant cette classe. A utiliser avec modération du fait de son absence de signification explicite.
• <span> : conteneur destiné au contenu textuel, sans valeur sémantique. Il permet aussi l'utilisation de l'attribut class.

Eléments

Ce sont des éléments permettant d'organiser sémantiquement le contenu d'une page et de spécifier leur rôle.

section

Générique. Regroupe le contenu relatif à une même thématique.

article

Regroupe du contenu dont la composition peut être différente du reste de la page, une portion de contenu qui se suffit à elle-même.

nav

Contenu servant à la navigation (au sein du document ou vers des ressouces extérieures).

aside

Contenu non essentiel à la compréhension mais lié au contenu (ex : notes, astuces)

header

Section d'introduction qui peut contenir des titres, des éléments de navigation, etc, selon le contexte.

footer

Pied de page.

Exemple

<!-- Début -->
<header>
  <nav></nav>
</header>
<section>
  <article></article>
  <article></article>
  <article></article>
</section>
<aside></aside>
<footer></footer>
<!-- Fin -->

Les éléments h1 h2 h3 h4 h5 h6 sont des titres dont le niveau est représenté par le chiffre de la balise. h1 est un titre de niveau 1, c'est à dire le plus important. Puis viennent les autres niveaux.
Il y a une vraie valeur sémantique dans les titres, pas uniquement une présentation différente (police plus grande, en gras, etc).

Les listes sont des énumérations possédant une valeur sémantique.

Non ordonnées

Ensemble d'élements liés mais dont l'ordre n'a pas de signification précise. Généralement représentée par les navigateurs avec une puce devant chaque élément. Doit avoir au moins un élément.

Conteneur ul

Eléments li

Ordonnées (numérotée)

Puces numérotées automatiquement par le navigateur. Doit avoir au moins un élément.

Conteneur ol

Eléments li

Listes de définitions

Permet de créer une liste contenant plusieurs termes à définir avec chacun un ou plusieurs éléments de définition.

Conteneur dl

Terme de définition dt

Elément de définition dd

L'ensemble de ces notions est illustré dans le fichier d'exemple sur les listes.

Les exemples d'éléments suivants ont une valeur sémantique permettant de donner une signification à leur contenu. Les éléments de présentation supprimés avec l'avènement d'HTML5 ne seront pas présentés.

Paragraphe

Elément p
Contenu textuel d'un paragraphe. Il peut contenir du texte, des retours à la ligne ou d'autres élément sémantique qualifiant le texte ( em strong abbr etc).
Exemple :

<p>Ceci est un paragraphe</p>

Importance forte

Elément strong
Permet de donner un caractère important au contenu. Au délà de la présentation visuelle en italique, il y a une valeur sémantique.
Exemple :

<p>Ce projet était à rendre <strong>pour hier</strong>.</p>

Emphase

Elément em
Permet de donner un caractère important fort au contenu. Au délà de la présentation visuelle en gras, il y a une valeur sémantique.
Exemple :

<p>Frank Herbert est l'auteur de la saga <em>Dune</em>.</p>

Balises historiques de style

Eléments b et i
Les bonnes pratiques demandent de séparer le contenu de la forme. Ces balises étaient représentées respectivement par du gras et de l'italique. Elles ont acquis un léger sens sémantique au passage à HTML5 mais sans pour autant que le texte qu'elles encadrent soit considérés comme important. Elles ont aussi conservé leur représentation graphique.

Citation

Elément blockquote
Bloc de citation (c'est à dire provenant d'une autre source). Il peut contenir d'autres éléments.
Exemple :

<p>Proverbe chinois :</p>
<blockquote>S'il n'est pas soutenu par un tuteur,
le jeune arbre se courbe facilement.</blockquote>

Portion de code

Elément code
Extrait de code informatique, quel que ce soit le langage. Il fait généralement l'objet d'une présentation spécifique. L'ensemble des exemples de code de ce cours sont entourés par cette balise.

Les données tabulaires sont représentées grace à l'élément table et à ses enfants. A l'intérieur de cette balise, vous pourvez trouver les balises suivantes :

caption

Titre du tableau

thead

Entête du tableau

tfoot

Pied du tableau

tbody

Corps du tableau

tr

Ligne du tableau (qui peut aussi être contenu dans le balises thead tbody tfoot)

A l'intérieur d'une balise tr, vous pourrez trouver les balises :

td

Cellule du tableau

th

Cellule d'entête du tableau

Etudiez l'exemple de tableau.

Les liens sont la raison d'être de l'HTML : du texte enrichi, permettant des intéractions.

Quelques attributs

href

Contient une URL

Représente la cible du lien

hreflang

Contient le code de la langue

Langue de la page ciblée par le lien

href

Contient une URL

Représente la cible du lien

Exemples

• Le lien peut être absolu (adresse complète) ou relatif (repose sur l'adresse courante).
  • Absolu : Lien externe <a href="http://www.unistra.fr" title="Lien Externe">Lien externe</a>
  • Relatif : Lien relatif <a href="./index.html" title="Lien relatif">Lien relatif</a>
• Courriel <a href="mailto:toto@unistra.fr" title="Courriel">Courriel</a>
• Ancre <a href="#ancre" title="Lien local">Texte</a> : pointe vers l'élément ayant la valeur ancre pour l'attribut id (il s'agit ici de la section contenant les explications sur les liens)

Les images sont insérées grâce à la balise img. Elle accepte, entre autres, les attributs suivants :

src

Adresse du fichier image

alt

Texte alternatif à utiliser en cas d'absence de la ressource ou de synthèse vocale

width

Largueur de l'image en pixels

height

Hauteur de l'image en pixels

<img src="images/picture.png" alt="Descriptif de l'image" title="Titre" />

La page suivante contient plusieurs erreurs HTML. Corrigez le fichier en suivant la norme HTML5 (c'est à dire aucune erreur relevée par le validateur).

Exercice

Corrigé

Une fois l'exercice réalisé, vous pourrez comparer avec le corrigé.