Nouveau rôle de HTML

Donc dans le balisage HTML on ne doit trouver que des éléments qui apportent des informations ou de la structuration et aucunement des dispositifs de présentation. En conséquence de nombreuses balises ayant un rôle purement visuel sont dites dépréciées (ou obsolètes).
Rassurez vous les navigateurs récents sont toujours capables de les interpréter dans le cadre de la rétrocompatibilité.
L'expression "balises dépréciées (ou obsolètes)" veut simplement dire qu'elles sont seulement retirées de la spécification du W3C et qu'elles sont déclarées invalides lors des tests de conformité (emploi du validateur proposé par le W3C).

Balises et attributs de mise en forme retirés de la spécification

Bizarrement les balises b (mise en gras) et i (mise en italique) ne sont pas bannies alors que ce sont typiquement et uniquement des balises de mise en forme ...

Les balises strong et b

Il ne faut pas confondre la balise b avec la balise strong. C'est vrai que dans les deux cas le texte balisé est mis (par défaut) en gras par le navigateur.
La balise strong doit être utilisée pour encadrer les mots-clés. Elle permet d'améliorer le référencement de votre site sur ces mots-clés. Alors que la balise B ne fait que ressortir visuellement un mot ou une expression.
Rien n'interdit d'ailleurs de changer via le CSS la mise en forme associée à la balise strong.

Les balises em et i

Ces deux balises sont aussi à tort considérées comme identiques car dans les deux cas le texte balisé est mis (par défaut) en italique.
Alors que em indique une portion de texte importante ; la balise i n'apporte que du visuel.
Rien n'interdit d'ailleurs de changer via le CSS la mise en forme associée à la balise em.

De nouvelles balises très utiles

Je consacre tout une page aux nouvelles balises structurantes : header, nav, section, aside, article, footer.
D'autres pages sont dédiées aux nouvelles balises : figure, audio, video, button.

La balise abbr

Cette balise remplace la balise acronym qui est retirée de la spécification. La balise abbr définit une abréviation expliquée dans son attribut title.

Exemple :

La SNCF est en fait désormais un établissement public contrôlé à 100% par l'Etat.

Lorsque vous survolez l'acronyme "SNCF" sa signification apparaît dans une infobulle !

Le code HTML correspondant à l'exemple :

<p>La <abbr title =" Société Nationale des Chemins de Fer"> SNCF </abbr> est en fait désormais un établissement public contrôlé à 100% par l'Etat. </p>

L'acronyme apparaît en gras car dans la feuille de style il y a la règle : abbr {font-weight : bold;}

La balise time

Cette nouvelle balise permet de préciser qu'une donnée est une date.
Il s'agit donc d'une information sémantique très importante dans le cadre du référencement de la page. En effet cette information est reprise par le moteur de recherche.
La balise time comprend l'attribut datetime qui doit contenir la date dans un format standard.

Exemple :

Page créée le

Le code HTML correspondant à l'exemple :

<p>Page créée le <time datetime ="2015-11-11">11 novembre 2015 </time></p>

La date apparaît en italique car dans la feuille de style lié à cette page il y a la règle : time{font-style :italic; }

La balise svg

Désormais il est possible d'écrire directement dans la page web du code au format SVG à condition que ce code soit à l'intérieur du conteneur svg.

Exemple :

<svg width ="900" height ="600" style ="background : url(decor.svg)" > ... </svg>

Je dessine une zone de dessin de 900 pixels par 600 et cette boîte a pour fond une image vectorielle (ça pourrait être une image matricielle) qui fait fonction de décor.
Je n'ai plus qu'à dessiner voir animer des objets SVG dans cette zone de dessin qui seront bien sûr en premier plan.

La balise canvas

Pour dessiner dans une page web je peux aussi utiliser une API de Javascript : Canvas.

Exemple :

<canvas width ="900" height ="600" style ="background : url(decor.svg)" > Votre navigateur est obsolète </canvas> ... <script> // création de formes voire animation de celles-ci avec l'api Javascript Canvas ... </script>

Si vous utilisez un vieux navigateur qui ne reconnaît pas la balise canvas le message "Votre navigateur est obsolète va s'afficher" sinon une boîte est dessinée avec pour fond une image vectorielle (ça pourrait être une image matricielle) qui fait fonction de décor.
La page doit comprendre un script pour dessiner voire animer des formes qui seront en premier plan.

Attention les formes dessinées avec l'API Canvas sont matricielles.
Il y a dans ce site un tuto sur l'API Canvas. Retour menu