Editions ENI Livres | Vidéos | e-Formations
La nouvelle syntaxe HTML5
La doctype
1. La syntaxe en HTML 4 et XHTML 1.0
La toute première ligne d’un document HTML concerne la déclaration de type de document, la doctype. Cette DTD (Document Type Declaration) a pour objectif d’indiquer quelle version du langage HTML est utilisée dans le document.
Voilà la DTD pour HTML 4.01 de transition :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> Voilà la DTD pour XHTML 1.0 strict :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Cette déclaration précise le nom de la DTD et indique l’URL où les navigateurs peuvent trouver la source originale de cette déclaration. Cette syntaxe n’est pas forcément aisément compréhensible pour tout le monde, elle est longue et fastidieuse à saisir. Et soyons réalistes, nous avons tous, moi le premier, toujours fait des copiés-collés de cette ligne d’un projet à l’autre !
2. La syntaxe en HTML5
Pour la déclaration de la DTD en HTML, on ne peut pas faire plus simple :
<!DOCTYPE html> Ce qui est le plus troublant, en dehors de la concision de la syntaxe, c’est l’absence de numéro de version ! Nous pourrions parfaitement nous dire « Comment le navigateur...
Le document HTML
1. La syntaxe en XHTML 1.0
L’élément <html> indique dans une page web le début du contenu de la page HTML. Voici la syntaxe complète en XHTML 1.0 strict :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" > Là non plus, la simplicité n’est pas de mise.
2. La syntaxe en HTML5
En HTML5, la simplicité est de mise, il ne faut conserver que l’essentiel. Voici la syntaxe en HTML5 :
<html lang="fr" > Il suffit de préciser la langue. C’est tout.
Notez que vous pouvez parfaitement omettre l’élément <html>, la syntaxe sera valide.
L’encodage des caractères
1. La syntaxe en HTML4 et XHTML 1.0
Il est d’usage d’indiquer quel encodage des caractères est utilisé dans vos pages web. Vous l’indiquiez doublement : dans un élément meta pour l’en-tête http et pour le contenu, avec l’attribut charset :
Pour le HTML 4.01 de transition :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Pour le XHTML 1.0 strict :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 2. La syntaxe en HTML5
Là encore, en HTML5, la simplicité est au rendez-vous :
<meta charset="UTF-8" /> Nous avons le strict minimum requis pour une bonne compréhension par les navigateurs web.
Les scripts
La déclaration des scripts a aussi « perdu du poids » avec une syntaxe plus concise. Nous sommes passés de :
<script src="monScript.js" type="text/javascript"></script> à :
<script src="monScript.js"></script> Cette simplification est due au fait que l’on présuppose que les scripts sont écrits en JavaScript. D’ailleurs quel autre langage pourrait être utilisé ?
Les styles CSS
Partant toujours du même constat : simplification et unicité du langage, pour la déclaration des styles CSS, nous passons de :
<link href="mesStyles.css" rel="stylesheet" type="text/css" /> à :
<link href="mesStyles.css" rel="stylesheet" /> La syntaxe des éléments
1. L’objectif
Les objectifs pour la syntaxe des éléments HTML sont la simplicité (encore !) et la permissivité. Le HTML5 n’est pas une évolution du XHTML, le HTML5 a coupé le lien avec le XML. De ce fait nous n’avons plus les règles strictes de la syntaxe XHTML.
2. Les guillemets
Les guillemets sont optionnels pour les valeurs des attributs. Par exemple, pour l’encodage des caractères nous pouvons avoir ces trois syntaxes :
<meta charset=UTF-8>
<meta charset="UTF-8">
<meta charset="UTF-8"> Avec guillemets simples, guillemets doubles ou rien, la syntaxe est valide.
Par contre, si vous avez plusieurs valeurs pour un même attribut, les guillemets doubles sont obligatoires :
<div class="style1 style2"> 3. Les éléments avec la seule balise d’ouverture
Un certain nombre d’éléments HTML ne possèdent qu’une balise d’ouverture et sont sans balise de fermeture : img, br... Il faut indiquer la fermeture de l’élément dans la balise d’ouverture par /.
Exemples :
<br />
<img src="image.png" /> En HTML5, l’indication de la fermeture de la balise est optionnelle.
Exemples valides :
<br>
<img src="image.png"> 4. Les éléments à balise de fermeture...
Les éléments obsolètes
Dans la spécification HTML5, un certain nombre d’éléments sont déclarés « obsolètes ». Un élément obsolète est un élément qui n’est pas déclaré dans la spécification HTML5. Mais comme le HTML5 doit être compatible avec les versions antérieures, les éléments HTML obsolètes seront malgré tout correctement interprétés par les navigateurs.
Une page web utilisant des éléments HTML obsolètes sera bien affichée, mais sera déclarée « non conforme » par les moteurs de validation.
La liste des éléments obsolètes est en Recommendation au 14 décembre 2017 : https://www.w3.org/TR/html5/obsolete.html.
Antique élément de conception de pages web, les jeux de cadres sont déclarés obsolètes, à la grande joie de l’accessibilité des sites web et des référenceurs.
Les éléments HTML <frame>, <frameset> et <noframes> ne sont plus à utiliser.
Parmi tous les éléments obsolètes, notez la présence des éléments...
Les éléments redéfinis
Pour le HTML5, certains éléments HTML ont vu leur rôle redéfini, plutôt que d’être rendus obsolètes. Ces éléments sont liés au texte, nous les verrons dans le chapitre consacré au texte.
Les attributs obsolètes
La liste des attributs obsolètes est longue. Les attributs obsolètes le sont au profit des CSS, plus performantes. Pour avoir la liste complète, reportez-vous à l’URL des éléments obsolètes sur le site du W3C : https://www.w3.org/TR/html5/obsolete.html.
Les nouveaux éléments
La recommandation finale du HTML5 nous propose de nombreux nouveaux éléments. Nous avons notamment les éléments de structure sémantique que nous étudierons dans le chapitre suivant et les éléments dédiés au multimédia que nous verrons aussi dans un chapitre dédié. Voici l’URL sur le site du W3C qui recense les différences entre l’HTML4 et l’HTML5 : https://www.w3.org/TR/html5-diff/, au 9 décembre 2014.
1. L’élément <time>
Cet élément permet d’indiquer que son contenu est lié au temps : date ou/et heure. Il ne possède qu’une valeur sémantique, il n’y a pas d’affichage automatique d’une date ou d’une heure.
Voilà quelques exemples de syntaxe :
<p>Aujourd'hui, la date est : <time>05/09/2013</time></p>
<p>Nous sommes le <time>5 septembre</time>.</p> Vous pouvez utiliser l’attribut datetime pour indiquer la date ou l’heure au format ISO 8601 (http://fr.wikipedia.org/wiki/ISO_8601) :
<p>Nous sommes le <time datetime="2013-09-05">5
septembre</time>.</p> Vous pouvez aussi utiliser l’attribut pubdate. Cet attribut permet de préciser que la date indiquée est celle de la publication du plus proche parent de l’élément <article>.
2. L’élément <mark>
Cet élément permet de mettre en évidence un texte dans le contexte d’un texte plus général.
Voici un exemple :
<p>La nouvelle version du HTML est le<mark>HTML5</mark>.</p> La mise en évidence du texte marqué est usuellement sur fond jaune.
3. L’élément <meter>
Cet élément permet de définir une mesure donnée dans un contexte de valeurs spécifiées. Cet élément utilise six attributs :
-
value : la valeur de la donnée sur l’échelle utilisée.
-
min : le minimum possible.
-
low : le minimum atteint.
-
max : le maximum possible.
-
hight : le maximum atteint.
-
optimum : le maximum idéal.
Voici un exemple :
<p>Votre note est de 16 : <meter value="16" min="0" low="4"
max="20"...Les modèles de contenu des éléments
Le HTML4 prévoyait deux principaux types de contenu : en ligne (inline) et en bloc (block).
Le HTML5 prévoit des modèles de contenu plus étoffés (http://www.w3.org/TR/html5/dom.html#content-models). Sachant que certains éléments peuvent appartenir à plusieurs modèles, selon le contexte de leur utilisation :
-
Metadata content : pour les éléments de liaison entre les documents, de présentation ou de comportement du contenu (base, command, link, meta, noscript, script, style et title).
-
Flow content : pour les éléments utilisés dans le corps de la page (a, article, blockquote, details, label, table...).
-
Sectioning content : pour les éléments de structure (article, aside, nav et section).
-
Heading content : pour les éléments d’en-tête de section (h1 à h6 et hgroup).
-
Phrasing content : pour les éléments de texte (a, abbr, button, canvas, em, span, strong...).
-
Embedded content : pour les éléments incorporés (audio, canvas, embed, iframe, img, math, object, svg et video).
-
Interactive content : pour les éléments qui impliquent une interactivité avec les utilisateurs (a, audio, button, input, label video...).
Voilà le schéma du W3C :
Notez bien que cette classification a pour seul but d’organiser, de classer...
L’affichage des éléments
1. En HTML4
Le HTML4 « rangeait » les éléments selon un type d’affichage dans les navigateurs (http://www.w3.org/TR/html4/struct/global.html#h-7.5.3). Les éléments de type block s’affichent les uns sous les autres. C’est le cas des paragraphes <p>, des titres <hx>, des boîtes <div>...
Les éléments de type inline s’affichent les uns à côté des autres, dans la ligne de texte. C’est le cas des liens <a>, des divisions <span>, des styles <strong>, <em>...
Vous avez aussi les affichages : inline-block, list-item, table, table-row...
Les règles d’imbrication indiquent :
-
qu’un élément inline ne peut contenir que d’autres éléments inline et des données, c’est-à-dire du texte,
-
qu’un élément block peut contenir d’autres éléments block et des éléments inline.
Mais avec la propriété display, vous pouvez parfaitement changer le type d’affichage pour un autre. Un display: block permet à un lien <a> de s’afficher comme un bloc et de bénéficier ainsi de toutes les propriétés inhérentes aux blocs.
2. En HTML5
Le HTML5 rend obsolète cette « classification ». Elle...
