Des mots individuels ou des passages entiers peuvent être mis en italique ou en gras très facilement. Commençons par la variante en gras. Pour cela, deux éléments HTML sont principalement disponibles : b et strong.
Bienvenue sur <b>PSD-Tutorials.de</b>! <br /> Bienvenue sur <strong>PSD-Tutorials.de</strong>!
Un coup d'œil sur le résultat dans le navigateur montre l'image suivante :
Manifestement, les deux éléments produisent un affichage identique. Pourquoi alors deux éléments différents existent-ils ? En fait, il existe d'autres formes de présentation pour les sites Web que celles des navigateurs standard connus. On peut penser par exemple aux lecteurs pour les personnes aveugles ou encore aux appareils mobiles. Les éléments HTML offerts par le W3C visent à soutenir la sémantique. Ainsi, l'élément b ne signifie plus nécessairement que quelque chose doit être affiché en gras. En réalité, b représente un texte visuellement mis en évidence qui n'a pas une importance accrue. Il pourrait s'agir par exemple de noms de produits ou de mots-clés dans des documents.
L'élément strong avait jusqu'à présent pour but d'accentuer davantage. em, en revanche, était utilisé pour du texte important et mis en avant (emphatique). strong était auparavant la forme renforcée de em dans les anciennes versions HTML. Ces deux éléments se voient attribuer une signification différente en HTML5.
Commençons par un texte avec une emphase normale.
<p> Les chats sont des animaux mignons. </p>
Maintenant le même texte, mais cette fois avec l'emphase sur le premier mot.
<p> <em>Chats</em> sont des animaux mignons. </p>
En utilisant em, l'accent est mis sur le mot Chats. Cela pourrait être utile dans une discussion sur la question de savoir si les chiens ou les chats sont plus mignons.
À présent, dans cet exemple, on pourrait appliquer l'élément em également au mot sont.
<p> Chats <em> sont </em> des animaux mignons. </p>
Cette construction pourrait être une réponse dans une discussion où quelqu'un prétend que les chats ne sont pas du tout mignons.
En fait, les passages marqués avec em sont affichés en italique dans le navigateur. Le même effet visuel est obtenu avec l'élément i.
Le brouillon de travail HTML5 indique que l'élément i ne signifie plus désormais italique.
<p> Bienvenue chez <i>PSD-Tutorials.de</i> </p>
Cet élément signifie maintenant plutôt qu'on veut transmettre une autre ambiance. L'élément i est intéressant par exemple pour marquer les expressions techniques ou les termes taxonomiques.
Tout ceci est terriblement théorique, je sais. Fondamentalement, vous devriez essayer de vous conformer aux directives HTML5. D'un autre côté, personne ne vous en voudra bien sûr si vous utilisez strong à la place de b.
<p> <em>Ligne avec em</em><br /> <i>Ligne avec i</i><br /> <strong>Ligne avec strong</strong><br /> <b>Ligne avec b</b> </p>
En fin de compte, ce sont les fabricants de navigateurs qui doivent agir ici.
C'est finalement le CSS qui est responsable de la véritable mise en forme des textes équipés des éléments mentionnés.
Acronymes avec abbr
Pour mettre en avant un acronyme, on fait appel au même élément qui était jusqu'à présent utilisé pour les abréviations, à savoir abbr.
Le bureau Germano-Autrichien du <abbr title="World Wide Web Consortium">W3C</abbr> est installé à la Fachhochschule Potsdam depuis avril 2009.
Les navigateurs qui interprètent correctement l'élément abbr affichent le texte inclus dans l'élément abbr souligné.
De plus, il est conseillé d'assigner à abbr un attribut title. On y note généralement l'expression complète pour l'acronyme. Lorsque le visiteur survole l'acronyme avec la souris, l'expression apparaît dans une infobulle.
Coordonnées avec address
Avec l'élément address, vous pouvez mettre en forme les informations d'adresse.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Les navigateurs affichent généralement le contenu de l'élément address en italique.
Mise en forme du code avec l'élément code
L'élément code est utilisé pour mettre en forme le code du programme. Dans ce sens, rien n'a changé par rapport aux versions antérieures de HTML. code est toujours utilisé à cette fin.
<pre>
Ceci est un en-tête HTML:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
En général, on associe le code à l'élément pre pour conserver les indentations utilisées dans le code du programme.
La spécification HTML5 recommande d'utiliser l'attribut class en relation avec l'élément code. Cet attribut peut être utilisé pour assigner la langue utilisée à l'intérieur de l'élément code. Voici quelques exemples typiques de comment ces attributions peuvent apparaître :
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
Il n'est pas spécifié par le W3C comment les navigateurs doivent interpréter ces instructions.
<pre>
Ceci est un en-tête HTML:
<code class="language-html">
<html>
<head>
<title></title>
</head>
</code>
</pre>
Actuellement, l'attribut class n'a en tous cas aucun effet visible sur le navigateur. Cependant, les observateurs humains peuvent ainsi reconnaître dans quelle langue est écrit le code du programme en jetant un coup d'œil au code source de la page.
Mise en petites majuscules avec l'élément small
L'élément small était initialement prévu pour afficher du texte en plus petit. En HTML5, small est explicitement destiné aux petites majuscules. Ce texte en petites majuscules pourrait contenir par exemple :
• Informations de copyright
• Conditions de responsabilité
• Conditions de licence
• CGU
Le W3C souligne explicitement que small ne devrait pas être utilisé pour de longs passages de texte.
<small> Copyright par PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Souligner des textes
Vous pouvez souligner des mots en utilisant l'élément u. Voici un exemple :
<p>Bienvenue sur <u>PSD-Tutorials.de</u></p>
Le résultat s'affiche dans le navigateur de la manière suivante :
Lorsque vous regardez le résultat, il s'agit effectivement de l'effet souhaité. Cependant, il y a un inconvénient. Sur Internet, les textes soulignés sont généralement associés à des liens hypertexte. Si vous soulignez un texte ou un mot, les visiteurs pourraient penser qu'il s'agit d'un lien hypertexte. Tenter de cliquer dessus échouera bien entendu. Par conséquent, vous devriez éviter d'utiliser le soulignement.
