201 – HTML5 – Les nouveautés

Les déclarations HEAD

Pour la déclaration de la DTD en HTML, on ne peut pas faire plus simple :

La doctype 
Pour la déclaration de la DTD en HTML, on ne peut pas faire plus simple :
<!DOCTYPE html>

Le document HTML
L’élément <html> indique dans une page web le début du contenu de la page HTML
<html lang="fr" >

L’encodage des caractères
Il est d’usage d’indiquer quel encodage des caractères est utilisé dans vos pages web.
<meta charset="UTF-8" />

Les scripts
La déclaration des scripts :
<script src="script.js"></script>

Les styles 
Pour la déclaration des styles CSS
<link href="styles.css" rel="stylesheet" />

Les principales balises de texte

Avec HTML 5, de nombreuses balises de formattage héritée de HTML 4 sont devenues moins importantes en terme d’apparence et de style, fonction entièrement dévolue au CSS, mais sont chargées de plus de sens sémantique pour permettre une analyse plus fine du texte par les robots.

L’élément <b>

L’élément b indique qu’une partie d’un texte se différencie visuellement du reste du texte, mais sans qu’il y ait une importance plus grande. Si c’est le cas, il faut utiliser strong.

L’élément <strong>

Il est utilisé pour indiquer une forte importance.

L’élément <i>

Utilisez l’élément i pour indiquer des mots qui ne sont pas de votre usage courant (mots techniques, mots d’une autre langue…) et pour indiquer que vous utilisez un « ton différent » par rapport au reste du texte.

L’élément <em>

L’élément em sert à indiquer qu’un texte doit se prononcer avec emphase.

L’élément <small>

L’élément small est utilisé pour afficher un texte « légal » (restriction, avertissement, copyright…) en petite taille.

L’élément <cite>

L’utiliser pour indiquer tout titre de toute « œuvre de création » (livre, article, essai, chanson, film…)

L’élément <dl>

Toute liste d’associations formée de zéro à plusieurs groupes nom/valeur.

L’élément <ol>

Nous avons en plus un nouvel attribut booléen : reversed, qui permet d’inverser le sens d’une liste numérotée. L’attribut start donne le départ.

L’élément <hr>

hr représente une coupure thématique d’un paragraphe, une coupure dans une scène d’une histoire.

L’élément <a>

Cet élément a est l’essence même du web, c’est lui qui nous permet de relier nos pages web par des liens hypertextes.

L’élément <s>

L’élément s représente du texte qui n’est plus exact ou qui n’est plus plus pertinent.

L’élément <u>

L’élément u représente du texte sans importance particulière vis-à-vis du contexte, mais qui sera affiché en souligné pour mettre en évidence une orthographe ou une syntaxe grammaticale incorrecte. 

Les nouveaux éléments de structure

L’élément <header>

Le nouvel élément L’élément <header> permet d’insérer une zone d’affichage pour les en-têtes. Cet en-tête peut être défini pour la page ou pour une autre zone d’affichage : article, barre latérale.
Il faut considérer cet élément comme utilisable à deux niveaux :
au niveau de la page, c’est le classique en-tête de page, souvent placé en haut de l’écran, avec un logo, un slogan, une barre de navigation principale.
au niveau des contenus, cela permet d’avoir une zone d’introduction au contenu qui va suivre.

L’élément <footer>

Le nouvel élément <footer> permet d’insérer une zone d’affichage pour les pieds de page. Nous retrouvons la même sémantique que pour les en-têtes. Ces pieds de page peuvent être définis pour la page ou pour une autre zone d’affichage, ou pour un article.

L’élément <nav>

L’élément <nav>, comme son nom le laisse supposer, est dédié à l’affichage d’une navigation avec des liens hypertextes. Mais attention, ne vous sentez pas obligé de n’avoir qu’une seule zone de navigation par page ou de créer autant d’éléments que vous avez de navigations dans vos pages, du moment que chacun d’entre eux est identifié. L’élément est plutôt dédié à la navigation principale du site, à la création de liens entre les pages du site.

L’élément <section>

L’élément permet de regrouper des éléments partageant une même thématique. Cela permet de regrouper dans un même élément un contenu, avec son en-tête et son pied de page.

L’élément <article>

L’élément <article> permet d’insérer un contenu autonome, car il peut être réutilisé ailleurs dans le site, sans que sa compréhension soit nulle.

Un article peut parfaitement avoir un en-tête (<header>), un pied de page (<footer>) et des titres (<hx>).

L’élément <aside>

L’élément <aside> permet d’afficher un contenu lié au contenu auquel il est associé. Cela peut correspondre à des barres latérales (sidebar), à des zones de widgets, à des compléments sur des articles.

L’élément <main>

Dernier arrivé dans les brouillons du W3C, l’élément <main> permet de cibler le contenu principal de la page.
Le W3C indique des restrictions pour l’utilisation de l’élément :

  • un seul élément par page,
  • il ne doit pas être utilisé à l’intérieur (élément descendant) des éléments , , , ou ,
  • il devrait être associé avec le role main () pour une meilleure accessibilité des sites web.
  • vec le HTML5.2, nous pouvons utiliser plusieurs éléments <main> dans la même page..

Les boîtes <div>

Ce n’est pas parce que vous utilisez du HTML5, que vous devez abolir l’utilisation des boîtes ! Elles ont toujours leur utilité !

L’attribut sémantique « role »

Le HTML5 permet l’utilisation de l’attribut role pour un apport d’informations complémentaires. Ce module traite de la gestion du contenu des pages pour les personnes handicapées. Certains éléments HTML5 ont un role implicite, par exemple l’élément <nav> a comme role implicite navigation.

Voici les principales valeurs de l’attribut role :

  • main : définit le contenu principal d’un document.
  • secondary : définit une partie secondaire du document.
  • navigation : définit la barre de navigation du document.
  • banner : située classiquement en haut de page, la bannière contient habituellement le logo et le slogan de l’entreprise.
  • contentinfo : indique que l’élément contient des informations à propos du contenu de la page : auteurs, copyrights, mentions légales…
  • definition : représente la définition d’un élément.
  • note : correspond usuellement à une note entre parenthèses ou de bas de page.
  • seealso : indique que l’élément contient des informations en relation avec le contenu principal de la page.
  • search : contient le formulaire de recherche d’une page.

Voici un exemple simple d’utilisation :

<div id="recherche" role="search"> 
...
</div>

Un autre :

<header id="banniere" role="banner"> 
...
</header>

Pour plus d’informations concernant l’Accessible Rich Internet Applications (WAI-ARIA), consultez ce lien : http://www.w3.org/TR/wai-aria/

La structure des pages HTML

Une structure simple

Si nous reprenons notre exemple de structure de page indiquée au début de ce chapitre, nous pouvons le modifier pour le mettre en HTML5.

images/chap04-003.png

Dans l’élément <header>, vous retrouverez les éléments d’en-tête de la page, avec le logo, le slogan par exemple.

Dans l’élément <nav> placé à gauche, vous trouverez les liens pour naviguer au sein de ce site.

Tous les articles de ce blog seront placés dans des éléments <article>, bien sûr !

Enfin, le pied de page, <footer>, pourra contenir les mentions légales, les liens de contact.

Une structure plus élaborée

Voici une structure d’un site un peu plus élaborée :

images/chap04-004.png

Nous retrouvons un élément <header>, maintenant classique.

En dessous, nous avons un premier élément <nav> pour la navigation générale dans le site, pour naviguer de page en page.

Sur la gauche, une deuxième boîte <nav> est faite pour la navigation secondaire, pour des liens liés directement au contenu de la page affichée.

Sur la droite, un élément <aside> affiche des informations liées au contenu de la page, comme des liens promotionnels, des contenus en relation…

Le contenu de la page est affiché dans deux éléments <section> permettant ainsi de bien différencier ces deux contenus différents. Chaque <section> contient un élément <article> pour le contenu rédactionnel et un élément <aside> pour afficher des éléments d’information supplémentaire liés à l’article (iconographie, liens…).

Enfin, la page se termine par un pied de page <footer> pour afficher les informations légales, les conditions de vente, un lien de contact, un plan d’accès…

Bien sûr, chaque élément de structure devra utiliser un identifiant unique ou une classe commune à plusieurs éléments.

La structure d’un article

Voilà la structure de ce que pourrait être un article d’un site en HTML5.

images/chap04-005.png

Nous avons un élément <article> comme conteneur général.

Nos articles contiennent des en-têtes, des introductions, nous utilisons donc l’élément <header>. L’élément <header> contient le titre, <h1>, de l’article et son sous-titre, <h2>.

Le contenu rédactionnel de l’article est placé dans des éléments <p>. L’article contient des liens vers des compléments d’articles, listés dans une liste <ul>.

Enfin, l’article se termine par un pied de page <footer>, ou plutôt un pied d’article, avec la date de publication, la rubrique de l’article et le nom de l’auteur par exemple.