[WHATWG] HTML 5.1

History

Content Model

Aux deux catégories de base du HTML 4, avec d'un côté celle des éléments de bloc et de l'autre celle des éléments ligne, le HTML 5 substitue les trois suivantes avec : au premier chef, celles des titres (1) et des contenus dits sectionnants (2) (qui correspondent à l'ex-catégorie des éléments de bloc) ; et au second, celle des contenus dits phrasés (3) (qui elle correspond à celle des éléments de ligne).

Ces trois nouvelles catégories (contenu de titre/contenu sectionnant/contenu phrasé) sont liées à la super-catégorie des flux (4) qui de surcroît comprend les contenus intégrés (5) et les contenus interactifs (6) (héritée du HTML 4, cette notion de flux renvoie à l'ordre selon lequel les navigateurs devront interpréter, les uns après les autres, les différents éléments qui structurent les pages).

Un peu à part, la catégorie des métadonnées (7) comprend les éléments techniques (8) que les navigateurs devront parfois à traiter aussi comme des éléments de flux (l'éléments script (9) notamment).

The DOCTYPE

Character encodings

A quick introduction to HTML

The [global] elements of HTML (1)

Ensemble des éléments à considérer : html, head, title, base, link, meta et style.

Attention. — Il s'agit là des éléments de plus haut niveau seulement. Ces éléments intègrent des contenus qui, à l'exception de l'élément title, présentent tous un caractère purement technique (systèmes de codage utilisés et liens sur feuilles de style notamment).

Remarque. — L'élément title sert à intégrer les titres de page que l'on voudra voir apparaître dans les pages de résultats des moteurs de recherche. (Les titres affichés dans les pages des sites s'intègrent avec un autre élément : l'élément h1).

Sections (1)

En dehors des en-têtes, éléments à considérer : body, article, section, nav, aside, header (pour intégrer les en-têtes de page, que l'on ne confondra pas avec l'élément head), footer et address. (head : élément global intégrant les éléments title, base, link, meta et style.)

Cas des en-têtes : h1, h2, h3…, h6, plus hgroup.

Grouping content (1)

Éléments de base à considérer : p, hr, pre, blockquote, menu, main, search et div.

Éléments ol, ul et li, à utiliser pour les listes simples : ol (pour déclarer les listes ordonnées [numérotation automatique des items]) et ul (pour déclarer les listes non ordonnées [qui elles afficheront des tirets (ou des puces le plus souvent)]) ; et li (pour marquer les items).

Éléments dl, dt et dd, à utiliser pour les listes d'objets comprenant un terme général et la ou les descriptions, ou valeurs, de celui-ci : dl (pour déclarer les listes) ; plus dt (pour marquer le terme général) et dd (pour marquer les descriptions, autant que les éventuelles valeurs).

Éléments à utiliser pour marquer les contenus d'illustration (images, animations, vidéos…, ainsi qu'extraits de toutes sortes, y compris les citations (2)) : figure (pour déclarer les contenus) et figcaption (qu'il s'agisse d'introduire les contenus, avec un titre, ou de les annoter).

Pour ce qui concerne les citations, celles qu'on aura à présenter en dehors du texte courant (et non en incise), nous insistons ici sur le fait qu'il faudra effectivement les traiter elles aussi comme des figures d'illustration (fragments de code 1 et 2 ci-dessous).

<figure>
 <p>
  « C'était une journée d'avril froide et claire. » (i)
 </p>
 <figcaption>
  From : 1984 (ii) / G. Orwell. Gallimard, 1950. GoTo : page 11.
 </figcaption>
</figure>

Quand les citations font plus de quarante mots, en lieu et place des guillemets (éventuellement marqués par l'élément q [ci-dessus fragment de code 1, 1ère note]), il convient d'utiliser l'élément blockquote [fragment de code 2 ci-dessous].

<figure>
 <blockquote> 
  <p> 
   Il [Winston] remit à sa place le cavalier blanc
   mais ne put pour le moment, entreprendre une étude 
   sérieuse du problème d'échecs. Ses pensées s'égaraient
   de nouveau. Presque inconsciemment, il traça
   du doigt dans la poussière de la table : 2 + 2 = 5
  </p>
 </blockquote>
 <figcaption>
  From : 1984 / G. Orwell. Gallimard, 1950. GoTo : page 382.
 </figcaption>
</figure>

Text-level semantics (1)

Il y a en tout vingt-huit éléments à considérer. Laissant de côté ceux qui ont conservé et leur étiquette et leur fonction (comme l'élément p, avec les paragraphes), de même que ceux tout spécialement ajoutés pour enrichir la sémantique des contenus des pages (l'élément cite, par exemple, quant à lui utilisé pour marquer les titres d'œuvres), nous nous intéressons ici aux éléments qui, existant déjà en HTML 4, ont vu leur fonction évoluer : em, strong, i et b (2).

Élément em (1)

Sémantique, induite, de l'élément em : sert à souligner l'importance d'un mot au regard de tout autre, présupposé, et dont l'usage pourait aller jusqu'à renverser le sens des propos tenus.

Élément em et « petite typographie » : contenus concernés présentés normalement, et par défaut, en italique.

Élément strong (1)

Sémantique de l'élément strong :

• [Importance] Dans les en-têtes utilisant en entrée des termes généraux (Partie/Chapitre/Annexe/Figure/Tableau…), marquage des contenus propres.
• [Importance] Dans les documents s'apparentant à (ou contenant) des tables (les dictionnaires par exemple [les index notamment]) marquage des entrées.
• [Sérieux] Dans les messages d'information, marquage des termes généraux (Alerte/Avertisement/Information…).
• [Urgence] Dans les procédures, et lorsque cela s'impose, marquage des priorités.

Élément strong et « petite typographie » : contenus concernés présentés normalement, et par défaut, en gras.

Élément i (1)

Sémantique de l'élément i (2) :

• [Alternate mood or voice] Marquage des changements de registre : a) marquage des récits situés dans un autre espace (ou un autre temps) ; b) lorsqu'il y a dialogue, marquage des suppléments d'information (les jeux de scène notamment) ; c) toujours dans les dialogues, et en particulier dans les sous-titres de films, marquage des répliques hors-champs ; d) en dehors des véritables dialogues, marquage des apartés adressés au spectateur.
• [Taxonomic designation][Technical term] Marquage des termes scientifiques et techniques (mais attention, pas des symboles couramment utilisés en mathématiques ou en physique (3)).
• Marquage des devises.
• Marquage des notes de musique.
• Marquage des mots autonymes (il s'agira d'examiner un mot, qui par exemple serait le mot ordinateur, soit pour l'idée qu'il évoque spontanément dans notre esprit, en tant qu'objet faisant partie du monde réel, ici une machine qui sert à traiter des informations au travers d'un clavier et d'un écran, soit pour l'idée qu'il est « censé » évoquer , en tant qu'objet abstrait de notre grammaire, là un substantif, avec au sein d'une phrase une fonction bien déterminée, celle de sujet par exemple).
• [Another language] Marquage des mots étrangers non encore lexicalisés (en cours lexicalisation, ce sont les guillemets qu'il conviendra d'utiliser).
• [Another language] Marquage des locutions d'origine étrangère (a priori, last but not the least, illico presto…).
• [Phrase from another language] Marquage des contenus écrits dans une langue autre que la langue courante.
• [Transliteration] Marquage des transcriptions (<i lang="ja-latn" title="poulpe">tako</i> indique que tako est la transcription latinisé du mot poulpe en japonais (4)).
• Marquage des noms propres, exclusivement, donnés à des voitures, à des bateaux [ship name], à des avions (c'est ainsi qu'on utilisera l'élément i pour parler du seul et unique France, le paquebot, cependant que le célèbre supersonique Concorde s'en affranchira, car celui-ci, au contraire du France, a été, même s'il y en a eu très peu [seulement vingt], fabriqué en plusieurs exemplaires).

Élément i et « petite typographie » : contenus concernés présentés normalement, et par défaut, en italique.

Élément b (1)

Sémantique de l'élément b : a) marquage éventuel des chapôs (accroches, résumés ou extraits) selon un style (pas nécessairement en gras) qui servira à les distinguer clairement du corps des contenus ; b) marquage, toujours éventuel, des premières phrases, afin de styliser la présentation desdits contenus, à l'instar de la lettrine.

Élément b et « petite typographie » : contenus concernés présentés normalement, et par défaut, en gras.

Embedding content

Il y a en tout onze éléments à considérer, onze éléments qui se répartissent de la manière suivante :

• picture, source et img (1).
• iframe, embed et object (2).
• video (3), audio et track (4).
• map et area (5).

Tabular data (1)

Ensemble des éléments à considérer :

• table et caption (élément fils de table).
• colgroup (élément fils de table) et col (élément fils de colgroup).
• tbody, thead et tfoot (tous éléments fils de table).
• tr (élément fils de tbody, thead ou tfoot ; de table si tbody, thead et tfoot non utilisés) ; td et th (éléments fils de tr).

Forms

Ensemble des éléments à considérer :

• form et label (1).
• input (2).
• button, select, datalist, optgroup, option, textarea, output, progress, meter, fieldset et legend (3).

Interactive elements (1)

Ensemble des éléments à considérer :

• details et summary.
• a, button, input et option.
• dialog.

Links (1)

Les deux éléments à considérer : a et area.