Lire un extrait ( PDF 112 Ko)

C hapitre 2 : Texte
67
<wbr>
Cet élément de Netscape 4, qui fait désormais partie de HTML5, indique au
navigateur qu’il peut (sans y être obligé) insérer une coupure de ligne s’il
doit couper la ligne.
Éléments redéfinis
Outre l’addition de nouveaux éléments, HTML5 redéfinit certains éléments
qui existaient déjà en HTML 4. En voici quelques-uns : certains ont radicalement changé, d’autres ont simplement subi un léger lifting.
<address>
Comme en HTML 4, <address> est prévu pour contacter l’auteur ; ce n’est
pas un élément générique pour les adresses postales.
Ce qui est nouveau est que vous pouvez désormais avoir plusieurs éléments
<address> dans un document : un par <article>. Les informations d’un auteur
associées à un élément <article> ne s’appliquent pas aux éléments <article>
imbriqués : un billet de blog dans un <article> peut donc contenir un élément
<address> pour son auteur, et chaque commentaire (ces commentaires sont,
vous vous en rappelez, des <article> imbriqués) peut également posséder
son propre élément <address>.
Nous roulons tous désormais sur la Grande Autoroute de l’information et
nous utilisons des méthodes électroniques pour contacter les auteurs : les
contacts peuvent donc être des adresses de courrier électronique, des
adresses postales ou tout autre moyen de contact (voir Figure 2.23).
<address>
<a href=”http://introducinghtml5.com”>
<img src=qr.png alt=””>
Bruce Lawson, Remy Sharp</a>
</address>
FIGURE 2.23 Un élément
<address> contenant un code
QR pour les détails du contact.
Accessoirement, le formatage des adresses (ainsi que les coupures de ligne
dans les poèmes, les paroles de chanson et les extraits de code) est l’une
des rares occasions où l’on a besoin de l’élément <br> :
<address>
Dunhackin<br>
123 Standards Boulevard<br>
Semantichester<br>
UK<br>
</address>
© 2012 Pearson France – Introduction à HTML5, 2e éd. – Bruce Lawson, Remy Sharp
HTML5-Livre.indb 67
05/04/12 10:42
68
INTRODUCTION À HTML5
<cite>
En HTML 4, l’élément <cite> pouvait servir à marquer le nom d’un auteur :
Comme le disait <cite>Harry S. Truman</cite>,
<Q lang=”en-us”>The buck stops here.</Q>
HTML5 interdit cet usage : “Le nom d’une personne n’étant pas le titre d’un
ouvrage – même si certains considèrent cette personne comme un ouvrage –,
cet élément ne doit pas servir à marquer les noms de personnes.”
C’est idiot. Des documents conformes aux règles de HTML 4 ne sont donc
plus conformes aux règles de HTML5, même si cela ne sera jamais considéré
comme invalide par un validateur, puisqu’une machine ne peut pas savoir
que “Harry S. Truman” est un nom et non le titre d’une biographie.
Dans l’article Incite a Riot, publié sur 24ways.org, Jeremy Keith écrit :
“Rejoignez-moi pour désobéir à la modification inutile et non compatible
de l’élément cite.”
Je suis d’accord. Utilisez <cite> pour les noms si vous en avez envie.
<dl>
En HTML 4, <dl> était une liste de définitions formées d’un terme et d’une
ou plusieurs significations de ce terme. Cette description était vague et
confuse, et elle mentionnait également que <dl> pouvait servir à marquer des
dialogues. Ce marqueur était souvent utilisé à contre-emploi pour marquer
n’importe quelle paire nom/valeur, même lorsque la seconde ne définissait
pas le premier.
HTML5 élargit cet élément qui devient “une liste d’associations formée de
zéro à plusieurs groupes nom/valeur… Ces groupes peuvent être des termes
et des définitions, des métadonnées et leurs valeurs, ou tout autre groupe
nom/valeur”. Voici un exemple énumérant les livres de la bibliothèque de
Remy, qui utilise <dt> et <dd> pour associer les titres et leurs auteurs :
<dl>
<dt>Répertoire des fabricants français de sandales en plastique</dt>
<dd>Phillipe Philloppe</dd>
<dt>Clinique du plastique de J-Lo : description</dt>
<dd>Hugh Jarce</dd>
<dt>Le mythe d’Orphée et Eurydice</dt>
<dd>Helen Bach</dd>
<dt>Le proctologue et le dentiste</dt>
<dd>Ben Dover</dd>
<dd>Phil McCavity</dd>
</dl>
© 2012 Pearson France – Introduction à HTML5, 2e éd. – Bruce Lawson, Remy Sharp
HTML5-Livre.indb 68
05/04/12 10:42
C hapitre 2 : Texte
69
<em>, <i>
<em> marque l’emphase qui modifie subtilement la signification d’une phrase.
Si la question était “As-tu dit que tu vivais à Paris ?”, la réponse pourrait être
marquée de la façon suivante :
<p>Non, mon <em>nom</em> est Paris. Je vis à <em>Troie</em>.</p>
Si vous voulez indiquer plusieurs niveaux d’emphase, vous pouvez imbriquer
les éléments em.
Selon la spécification, l’élément <i> “représente une portion de texte exprimée
par une autre voix ou avec un autre sentiment, ou avec tout autre décalage
par rapport à la prose normale – une désignation taxonomique, un terme
technique, une phrase idiomatique d’une autre langue, une réflexion, le nom
d’un navire ou n’importe quel texte dont la présentation typographique est
généralement en italiques”.
Voici quelques exemples d’utilisation de <i>, où <em> n’aurait pas été approprié :
<p>Le <i>Titanic</i> coula à l’aube.</p>
<p>La conception a besoin d’un peu plus de <i lang=fr>fanfreluches</
i>.</p>
<p>Faites comme le poète : <i>carpe diem</i> !</p>
<hr>
L’élément <hr> est désormais indépendant du support et indique “une coupure
thématique de paragraphe”. Un commentaire posté sur HTML5doctor
précise que ce marqueur équivaut au “* * *” que l’on rencontre souvent
dans les histoires et les essais. Nous allions le décrire comme une curiosité
historique, lorsque notre collègue Oli Studholme a écrit : “En japonais, <hr>
est très souvent utilisé comme séparateur de section. Il est généralement
caché par CSS, mais redevient visible lorsque la page est consultée par les
navigateurs cHTML des téléphones cellulaires qui ne reconnaissent que les
styles CSS très rudimentaires et ne peuvent rendre les effets visuels (et donc
la séparation des sections).”
Pour obtenir de belles séparations, nous conseillons d’utiliser plutôt les
sectionnements et les titres avec CSS. Vous aurez ainsi besoin de moins de
marqueurs et, en outre, il est difficile d’adopter un style cohérent pour <hr>
d’un navigateur à l’autre.
<ol>
Notre vieille amie <ol>, la liste numérotée, n’a pas été redéfinie, mais elle
possède désormais deux attributs supplémentaires.
En HTML 4, son attribut start était déclaré obsolète, car il était considéré
comme une information de présentation. Heureusement, HTML5 est revenu
© 2012 Pearson France – Introduction à HTML5, 2e éd. – Bruce Lawson, Remy Sharp
HTML5-Livre.indb 69
05/04/12 10:42
70
INTRODUCTION À HTML5
sur cette décision malheureuse. Si vous voulez qu’une liste numérotée
commence à 5 au lieu de 1, il suffit donc d’écrire :
<ol start=5>
Un nouvel attribut, reversed, a été ajouté, même s’il n’est encore reconnu
par aucun navigateur :
<h3>Le top cinq des bellâtres</h3>
<ol reversed>
<li>Brad Pitt</li>
<li>George Clooney</li>
<li>Orlando Bloom</li>
<li>Remy Sharp</li>
<li>Bruce Lawson</li>
</ol>
La liste ainsi créée ira de 5 (Brad Pitt) à 1 (moi). Désolé, Brad, George et
Orlando, mais connaissez-vous seulement HTML5 ?
<s>
HTML 4.01 disposait des éléments <strike> et <s> pour représenter du
texte barré. HTML5 a retenu <s> pour représenter un contenu qui n’est plus
d’actualité et qui a donc été “rayé” du document. Vous pouvez, par exemple,
vous en servir pour insister sur une remise :
<p>Photographie de Remy Sharp in mankini. <s>100 </s>
Prix actuel : 12 centimes.</p>
<small>
L’élément <small> a été totalement redéfini : de simple élément générique
de présentation, il est devenu un marqueur pour réduire la taille du texte
afin qu’il représente un “petit texte” qui “généralement contient les limites
de garantie, les avertissements, les restrictions légales ou les copyrights.
Les petits textes sont également parfois utilisés pour les attributions ou pour
satisfaire les termes d’une licence”.
Vous ne remarquerez peut-être pas cette redéfinition car votre navigateur
rendra sûrement le contenu dans une police plus petite, comme avant. Mais
la nouvelle sémantique signifie que <small> correspond également à ce qui
est dit très rapidement à la fin des publicités : un dispositif pour malvoyants
pourrait mimer ce comportement à l’aide d’effets auditifs, par exemple.
N’utilisez pas <small> si la page entière est une page “administrative” : dans
ce cas, le texte légal est le contenu principal et il n’est donc pas nécessaire
d’utiliser un élément pour le différencier du reste. Ce marqueur ne sert que
pour de petites portions de texte. Il n’a pas d’influence sur <strong> ou <em>.
© 2012 Pearson France – Introduction à HTML5, 2e éd. – Bruce Lawson, Remy Sharp
HTML5-Livre.indb 70
05/04/12 10:42
C hapitre 2 : Texte
71
<strong>, <b>
L’élément <strong> permet d’insister sur l’importance de son contenu, mais
à la différence de <em>, il ne change pas la signification de la phrase :
<p><strong>Attention ! Cette banane est dangereuse.</strong></p>
Vous pouvez imbriquer des éléments <strong> pour les rendre encore plus
importants.
L’élément <b> “représente une portion de texte dont le style est différent de
la prose normale sans pour autant indiquer une importance supplémentaire :
c’est le cas par exemple des mots-clés dans un résumé, des noms des produits
dans un article ou toute autre partie dont la présentation typographique est
généralement en gras”.
Voici un exemple :
<p>Remy n’a jamais oublié son cinquième anniversaire autour d’une
<b>biscotte en miettes</b> et sa joie d’ouvrir son cadeau : un
<b>Log de Blammo !</b>.</p>
<u>
L’élément <u> est également un élément qui servait à la présentation mais
qui a reçu une toute nouvelle signification sémantique dans ce qui ressemble
plus à un exercice de nettoyage qu’à une définition utile.
La spécification précise qu’il “représente une portion de texte avec une annotation non textuelle, rendue de façon explicite pour, par exemple, indiquer
qu’un texte est un nom propre en chinois (à l’aide de la marque chinoise pour
les noms propres) ou pour signaler que le texte a une faute d’orthographe”.
Éléments supprimés
Certains éléments de HTML 4 sont totalement obsolètes en HTML5 : <applet>
(utilisez <embed> à la place), <big>, <blink>, <center>, <font> et <marquee>
notamment. Ils ne passeront pas la phase de validation et ne doivent pas être
utilisés. Les frames ont disparu (mais <iframe> est conservé) : bon débarras !
Les navigateurs HTML5 doivent bien sûr continuer à afficher ces éléments
disparus car il en reste beaucoup sur le Web, mais évitez-les comme la peste,
les sandwiches au plutonium ou les chansons de Céline Dion.
© 2012 Pearson France – Introduction à HTML5, 2e éd. – Bruce Lawson, Remy Sharp
HTML5-Livre.indb 71
05/04/12 10:42