Utiliser des attributs

Les attributs sont d'autres composants importants du HTML. Ils viennent compléter l'élément et certains attributs sont obligatoires.

Définition et utilisation d'attributs

Si vous essayez ce dernier cas sur votre page HTML, vous verrez qu'aucune image ne s'affiche ans le navigateur. Alors, pour mettre une image, comment allons-nous nous y prendre ? Faudrait-il rajouter une balise supplémentaire ? Eh bien non. Le html n'aime pas trop fractionner les informations de mise en forme : chaque mise en forme a sa balise et il n'y a pas généralement de sous balise (on verra qu'il y a une exception). En fait, lorsqu'il s'agit de donner une précision sur une mise en forme, on utilise des attributs. C'est notre cas ici avec l'image. La balise sert à dire qu'il va falloir mettre une image et c'est l'attribut qui donnera le chemin de celle qui faut mettre.

Utilisation des attributs

Un attribut se met toujours à l'intérieur de la balise ouvrante (uniquement), après l'élément, en laissant bien sûr un espace entre eux de manière à ce qu'ils puissent être différenciés. Une balise peut contenir plusieurs attributs différents, mais chaque attribut doit être suivi du signe = puis d'une valeur encadrée dans des guillemets.

<element attribut1="valeur"> contenu </element>

Dans le cas de l'insertion de l'image nous obtiendrons le code suivant :

 <img src="image.jpg" />

où image.jpg est le nom de fichier de votre image, éventuellement précédé de son chemin d'accès, qui est normalisé en epub et src, son attribut. Un autre exemple très utile en édition électronique et spécifique est la création de lien permettant de passer directement à d'autres ressources internet ou externes. Dans ce cas, la balise est a, une balise double, et l'attribut href, ce qui nous donne :

<a href="http://www.flossmanualsfr.net"> Texte ou image cliquable</a>

Bien sûr, il y a une liste des attributs officiels en HTML. Retenez aussi que certains attributs seront utilisables avec certaines balises, mais pas avec d'autres. Il est cependant inutile de tous les connaître à moins que vous n'ayez de réelles velléités de personnalisation et de contrôle pour plus de détail, reportez-vous à notre référence W3C http://dev.w3.org/html5/spec/single-page.html#elements-1).

Il est possible de cumuler les attributs selon la forme :

<element attribut1="valeur" attribut2="valeur"> contenu </element>

Comme par exemple dans :

<img src="image.jpg" alt="illustration de page accueil montrant notre association présente dans un salon" />

Les attributs sont séparés les uns des autres par des espaces. Certains attributs peuvent parfois posséder plusieurs valeurs. C'est le cas de style, class...

La permissivité du HTML5

Le HTML5, comparé au XHTML, autorise quelques pratiques dites de simplification. Elles n'ont en fait que l'apparence de la simplification et permettant l'écriture de quelques signes en moins et seront perçues bien différemment selon le point de vue adopté.

Suppression des guillemets d'attributs

Le HTML5 étant ce qu'il est, et tentant de faire plaisir à tout le monde, il sera possible dans certains cas de se passer d'encadrer la valeur des attributs par les guillemets. Dans ce cas, que se passe-t-il vos attributs contiennent plusieurs valeurs ? Comment les différencier et les associer ? Les choses se compliquent donc et nous conseillons d'utiliser toujours la même règle pour faciliter les corrections d'erreurs éventuelles et évacuer les doutes sur les choses les plus simples. Le temps occupé à écrire les deux guillemets sera bien inférieur à celui passé à résoudre les problèmes éventuels qui apparaîtront dans le cas de mauvaises interprétations du code par les navigateurs.

Omission de la valeur

En revanche certains attributs peuvent être spécifiés sans leur associer de valeur. Si cela a peu de sens dans certains cas par exemple dans celui d'une image (que serait en effet la balise image sans définir l'image captée par l'attribut src), elle peut cependant avoir un sens particulier dans certains contextes.

Le premier cas est lorsque les attributs sont de type booléen, c'est-à-dire qu'ils n'acceptent que 2 valeurs possibles. C'est le cas par exemple de l'attribut autoplay de l'élément video et qui permet de lancer une vidéo au chargement de la page. On considérera que si l'attribut est présent, c'est que le lancement est automatique et que s'il est absent, il n'aura pas lieu. Dans ce cas, pas besoin de valeur, il est vrai, ce qui est bien plus simple.

 <video src="fichier_video.ogv" type="video/ogg" autoplay />

L'autre cas consiste à utiliser des fonctions javascript pour ajouter automatiquement des valeurs à un attribut. Il est alors possible d'imaginer qu'il n'y a pas de valeur initiale. On peut observer ce comportement dans certains systèmes de galerie web dans lesquelles une image est remplacée par une autre, agissant ainsi sur la valeur de l'attribut src. Cette pratique ne devrait cependant pas être utilisée par défaut et être particulièrement mûrie.

L'en-tête et le corps

La page HTML se répartie en deux parties principales toutes deux filles de l'élément racine html. Il s'agit de :

head
body

On mettra dans head tous les éléments généraux sur le document et son contexte, alors que body contiendra le contenu de la page proprement dite : articles, images, vidéos...

Le head se place tout de suite après html, lui-même placé après le doctype. On y retrouve toutes les informations nécessaires pour expliquer au navigateur que la page est rédigée dans tel encodage de caractères et dans telle langue, par exemple. Il contient également de nombreuses informations qui serviront à indexer automatiquement le site via des moteurs de recherches, telles que Google. Il est donc important de bien le rédiger.

L'en-tête se place entre les balises

<head></head>

Le body (corps) se place entre les balises

<body></body>

Le fichier obtenu est donc a minima :

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
 
   </body>
</html>

Pour l'instant cette page n'affiche aucune information puisque le body est vide. Les balises qui permettront de paramétrer le contenu de la page seront parcourues tout au cours de ce document. Concentrons-nous pour l'instant sur l'en-tête.

Le contenu placé entre les balises head n'apparaîtra pas de façon visible sur le site internet. Il s'agit d'informations nécessaires et qu'il faut absolument soigner. Il est d'usage de renseigner au moins certains paramètres dont nous allons parler dans ce chapitre, mais cette liste n'est pas exhaustive. De nombreux scripts se placent entre ces balises, d'analyse (des appels à statistiques), d'amélioration (du code spécifiquement dédié à tel navigateur) de performance (des appels à des feuilles de styles, des fontes) ou d'ajouts de fonctionnalités par exemple (des librairies, des scripts, etc). La plupart du temps l'ordre des balises à l'intérieur du head n'est pas important sauf dans certains cas, généralement spécifiés.

La balise title

La balise title fait partie de la catégorie des balises fondamentales. Toute page doit contenir une balise title placée dans le head. Elle devra contenir un titre pour la page, unique pour l'ensemble du site, autant que possible, car c'est lui qui sera utilisé dans les onglets et l'historique de navigation. Toute duplication de titre entre page peut donc entraîner une difficulté pour le visiteur et les moteurs de recherche prennent aussi en compte cette spécificité.

<title>Titre de votre page</title>

Le titre est indexé par les moteurs de recherche et s'affiche également dans la barre de titre de la fenêtre du navigateur. Il s'agit donc de la première donnée textuelle à informer.

Notre fichier minimal devient :

<!DOCTYPE html>
<html>
   <head>
     <title>Titre de la page</title>
   </head>
   <body>
 
   </body>
</html>

La balise Link

La balise link sert à relier le html à sa feuille de style css ou à d'autres documents externes qui seront utilisé en général dans le rendu de la page.

<link href="/dossier/fichier.css" rel="stylesheet" type="text/css" media="screen"/>

Lier une favicon :

<link rel="shortcut icon" href="dossier/fichier.ico" type="image/x-icon"/>

Lier un flux rss :

 <link rel="alternate" type="application/rss+xml" href="http://www.votreur/fichier.xml" title="Flux Rss de votre site />

Les valeurs d'attributs pour les balises link sont très nombreuses. Elles sont systématiquement accompagnées de :

type : définissant le type mime du fichier lié.
href : définissant l'adresse du fichier à lier.
rel : mentionne le type de relation.

Pour plus d'informations sur le CSS et la façon de l'insérer dans la page HTML, reportez-vous au manuel correspondant.

Encodage de caractère

<head>
<meta charset="UTF-8" />
</head>

Il est d'usage de spécifier l'encodage de caractères afin que les caractères utilisés dans notre langue s'affichent bien sur tous les navigateurs. Pour le cas où cette information n'est pas renseignée, ces caractères seraient peut-être remplacés par des signes cabalistiques bizarres rendant la lecture de votre site inconfortable.

Aujourd'hui l'encodage utf_8 est privilégié afin d'être le plus universel possible. Le but d'un site internet n'est-il pas d'être potentiellement lu depuis le monde entier ? Comment le navigateur avec lequel vous surfez peut connaître le jeu de caractère utilisé sur ce site internet parmi des centaines existantes ? Aidez-le en le lui informant.

Les autres balises <meta …>

Les balises métas informent sur les métadonnées de la page html. Elles n'ont pas vocation à s'afficher, c'est pourquoi elles sont réservées au head de la page. Elles sont destinées aux navigateurs, aux moteurs de recherche et aux outils d'indexations.

En html5, les balises <meta> ont été réduites. Cependant certaines restent essentielles. Elles doivent au moins contenir l'un des attributs parmi :

name
http-equiv
charset
itemprop

Les balises meta http-equiv

encodage de caractère, <meta charset=''utf-8'' >,
ou <meta http-equiv="Content-Language" content="fr" />

Les balises meta name

Les meta name les plus courantes permettent :

une description de la page, permettant de placer un petit descriptif du contenu de la page : <meta name=''description'' content=''décrivez votre page'' >
d'ajouter des mots clés pour cette page <meta name=''keywords'' content=''mot clé, mot clé, mot clé''>

Il existe beaucoup d'autres possibilités. Elles ne sont pas essentielles mais renseignés pour des cas précis :

generator <meta name=''generator'' content=''Nom de l'outil - version'' />, elle renseigne sur l'outil qui a aidé à réalisé le site. Cela permet aux CMS de réaliser des statistiques de leur utilisation.
author <meta name=''author'' content=''prénom nom'' />, elle renseigne sur l'auteur du code.
licence <meta name=''copyright'' content=''LAL'' />, elle informe sur la licence et les droits appliqués au contenu de la page.

Cette liste n'est pas exhaustive. Renseignez-vous si vous pensez avoir besoin d'autres balises meta name directement sur le site du W3C afin d'être certains de son actualisation.

Balise meta http-equiv ou balise meta name ?

Les balises ci-dessus sont considérées à l'heure actuelle comme standard. Il n'est pas utile de dupliquer les informations présentes en utilisant les balises équivalentes meta name et meta http-equiv, sauf peut être concernant l'encodage des caractères. Mais ce n'est pas une règle, à vous de l'adapter selon les cas que vous rencontrerez notamment concernant la configuration du serveur.

Autres balises meta possible

Si vous vous intéressez au référencement, n'oubliez pas d'ajouter la balise meta Site verification sur la page d'accueil du site uniquement et non sur toutes les pages. Il est possible, et d'ailleurs cette seconde méthode est conseillée par Google, de ne pas inclure cette ligne dans votre page html mais de placer un fichier html à la racine du site ou dans l'enregistrement DNS contenant cette ligne avec votre code personnel.

Exemple pour Google :

<meta name=''google-site-verification'' content=''entrez ici le code fourni par google''>

Pour connaître les recommandations de Google lisez ou écoutez http://support.google.com/webmasters/bin/answer.py?hl=fr&answer=35179

Par défaut les moteurs de recherches indexent tous les pages présentent sur internet. Si pour une bonne raison vous ne souhaitez pas que la page soit référencée, alors, insérez-le dans le code.

Exemple :

<meta name="googlebot" content="option1, option2" >

Les options sont diverses :

noindex, empêcher l'indexation de la page.
no follow, empêcher le robot de suivre les liens présent dans la page.
nosnippet, empêcher l'affichage d'un extrait dans les résultats de recherche.
noodp, empêcher l'utilisation d'une description de remplacement tirée des sites ODP/DMOZ.
noarchive, empêcher Google d'afficher le lien «en cache» associé à une page.
unvailable_fater:[date], empêcher l'exploration et l'indexation de la page à partir de la date indiquée.
noimageindex, empêcher les moteurs de recherche d'afficher votre page comme source de l'image.

Il est courant également d'ajouter ces instructions dans un fichier robots.txt placé à la racine du site afin d'alléger le code de la page.

Il existe une balise meta pour empêcher Google de proposer la traduction automatique de votre site

<meta name=''google'' content=''notranslate''>

Pourquoi souhaiteriez-vous réduire les visites de votre site internet même si la traduction proposée par Google est imparfaite ?

Vous trouverez également la balise meta Refresh qui contraint le navigateur a rafraîchir la page ou diriger vers une autre page après un temps indiqué. Cette méthode est aujourd'hui fortement recommandée par le W3C. Google propose d'utiliser plutôt la redirection 301.

<meta http-equiv=''refresh'' content=''…;url=…''>

Les réseaux sociaux et notamment Facebook prennent de plus en plus d'ampleur, plutôt que de se laisser happé par les entreprises qui ont le pouvoir dessus, tentez de rester un tant soit peu maître du contenu présent sur ces sites. Des balises sont là pour cela.

<meta property=''og:title'' content=''Titre''>
<meta property=''og:description'' content=''Description''>
<meta property=''og:image'' content=''URL_image''>

Ces balises sont propres à Facebook et vous permettent de choisir quelles informations présentent sur votre page peuvent être affichés dans Facebook (par exemple lors de l'insertion d'un lien). Sinon Facebook affichera ce qui lui semblera pertinent avec un grand potentiel d'erreur.

Lisez ces deux articles en anglais pour en savoir plus sur le protocole de ces balises (The open Graph protocol http://ogp.me/) et sur les spécifications de partage Facebook (http://developers.facebook.com/docs/reference/dialogs/feed/).

Le statut particulier de la balise meta keyword

En 2009 Google annonce ne plus focaliser son attention sur les mots clés présents dans ces balises pour indexer le site. Est-ce que cela signifie que Google préfère générer la liste des mots-clés à partir du texte présent dans la page. ? Par contre il s'appuie sur ces mots-clés pour placer au mieux les publicités provenant d'AdSense.

Référencement et SEO

Puisque vous en êtes à la rédaction des balises, vous devriez porter votre attention sur le souci du référencement.

Il y a quelques règles à suivre sur lesquels la veille est particulièrement importante.

La description du site ne doit pas dépasser 150 caractères et au mieux contient 70 caractères. Le contenu de cette balise s'affiche dans le moteur de recherche. Il s'adresse donc aux internautes et doit être rédigé de façon à donner envie à l'internaute de venir visiter votre site. Son contenu n'est pas du tout pris en compte par le référencement, soignez donc son contenu.
Concernant le contenu de la balise keywords, ne rédigez pas une liste exhaustive de mots clés mais plutôt une courte liste de mot clé pertinent adapté à la page html. Plus il y a de mot clés, plus le poids de ceux-ci est dilué. Peu de mots clés auront plus d'impact que beaucoup.
Prenez soin de la façon de rédiger la balise title. Celle-ci est unique par page et adapté au contenu. Elle ne doit pas dépasser 60 caractères. Un texte court et concentré en mot clé est préférable. Les mots clés en début de balise auront plus d'impact que ceux placés en fin. Adaptez vos tournures !

Structure de l'information

Le HTML5 a porté beaucoup d'attention à la structuration de sites existants et a standardisé leur usage au sein de quelques balises. Alors qu'auparavant la balise div était utilisée pour organiser le découpage de la page en partie, on utilisera maintenant des éléments spécifiques au rôle du contenu inclus.

Cela a l'avantage de rendre les choses plus claires pour les moteurs de recherche qui identifient mieux les parties informatives du site, par rapport aux parties de navigations et aux parties publicitaires. Il ne reste pas moins que cela devient une contrainte à suivre pour les intégrateurs.

Cependant, ces balises sont souvent difficiles à appréhender par le débutant, car elles n'ont pas d'impact visuel. Elles servent juste à structurer la page de façon sémantique.

Cette partie est simple en principe, mais ne sont pas toujours les plus faciles. Les débutants, en particulier, pourront être gênés par le fait que les balises vues ici ne produisent pas de rendu visuel spécifique, rendant ainsi difficile toute évaluation de l'action effectuée. Vous pouvez très bien passer ce chapitre et y revenir ultérieurement.

header

Header définit un ensemble introductif relatif à son élément parent. Le header est considéré avant le bandeau de la page (body), mais il peut aussi être introduit dans tout autre élément : une liste, une section, un article... un header peut lui-même contenir d'autres balises comme les balises de titre (h), paragraphe (p) ou de navigation (nav).

Un exemple d'utilisation de header serait :

<body>
  <header>
    <h1>Les petits hommes verts</h1>
    <h2>Les martiens sont là !</h2>
  </header>
  <p>Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.</p>
  <h1>Nous rencontrer</h1>
  <p>Il suffit de vous inscrire et vous aurez des petites nouvelles de nous sans tarder.</p>
  <h1>S'inscrire</h1>
  <p>C'est par <a href="#mars">là</a> illico. Et devenez nos amis.</p>
</body>

ce qui affichera le résultat :

Les petits hommes verts

Les martiens sont là !

Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.

Nous rencontrer

Il suffit de vous inscrire et vous aurez des petites nouvelles de nous sans tarder.

S'inscrire

C'est par là illico. Et devenez nos amis.

nav

L'élément nav apporte au HTML la capacité de marquer de façon claire les zones dédiées spécifiquement à la navigation dans le site. Les barres horizontales en haut de site ou les colonnes de gauche sont des exemples typiques de sections devant être spécifiées en nav. Mais d'autres cas d'utilisations sont envisageables :

Pied de page avec une liste de liens vers les mentions légales, conditions générales, contact...
Des liens propres à une rubrique d'un site web et permettant de naviguer au sein de cette rubrique.
Des liens propres à un article sur une page et permettant d'accéder facilement aux parties à partir d'une sorte de table des matières placée en début d'articles.
Des liens propres à un article répartis sur plusieurs pages et parmi lesquelles il faudra naviguer...

Ce que l'on voit ici c'est l'élément nav servira à chaque fois pour regrouper des liens permettant de se déplacer dans un contenu identifié et organisé. Ces liens peuvent être écrits en prose ou sous forme de liste, selon le souhait. En général, la liste semble être la plus courante.

L'utilisation de la balise nav permettra aux moteurs de recherche d'identifier spécifiquement les liens importants de votre site, de naviguer plus facilement dans votre contenu et de réduire l'importance des liens annexes dans leur contexte d'utilisation. La balise nav et les liens qui y sont inclus seront donc systématiquement associés au niveau informationnel de la section courante qu'il s'agisse du body, d'un article ou autre.

<body>
  <nav>
    <ul>
      <li><a href="/initiation-html5/inscription">Inscription</a></li>
      <li><a href="/initiation-html5/actualite">Actus</a></li>
      <li><a href="/initiation-html5/rencontres">Rencontres</a></li>
    </ul>
  </nav>
  <header>
    <h1>Les petits hommes verts</h1>
    <h2>Les martiens sont là !</h2>
  </header>
  <p>Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.</p>
  <h1>Nous rencontrer</h1>
  <p>Il suffit de vous inscrire et vous aurez des petites nouvelles de nous sans tarder.</p>
  <h1>S'inscrire</h1>
  <p>C'est par <a href="#mars">là</a> illico. Et devenez nos amis.</p>
</body>

Cela permettra d'arriver au résultat :

Les petits hommes verts

Les martiens sont là !

Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.

Nous rencontrer

Il suffit de vous inscrire et vous aurez des petites nouvelles de nous sans tarder.

S'inscrire

C'est par là illico. Et devenez nos amis.

et avec un peu de mise en forme CSS :

Les petits hommes verts

Les martiens sont là !

Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.

Nous rencontrer

Il suffit de vous inscrire et vous aurez des petites nouvelles de nous sans tarder.

S'inscrire

C'est par là illico. Et devenez nos amis.

main

L'élément main permet de définir la partie principale d'une page impliquant par ailleurs que cette partie est spécifique à cette page web. Aucun contenu dupliqué sur plusieurs pages ne devrait normalement se retrouver dans un main. On ne devrait donc pas y trouver, les bandeaux, parties principales de navigation ou footer. On peut ainsi faire les remarques suivantes :

Main devrait être unique dans une page web.
Main devrait être unique à une page web.
Main devrait être un enfant de body et ne pas être inclus dans d'autres balises structurantes comment section, article, header... Il pourra en revanche en contenir s'il s'avère utile d'avoir un découpage de cette partie principale avec les balises appropriées.

Il est possible de compléter l'élément main par l'attribut ARIA avec une valeur spécifique role="main" pour en augmenter la compréhensivité.

En reprenant notre exemple précédent, l'utilisation de la balise main produirait le résultat suivant :

<body>
  <nav>
    <ul>
      <li><a href="/initiation-html5/inscription">Inscription</a></li>
      <li><a href="/initiation-html5/actualite">Actus</a></li>
      <li><a href="/initiation-html5/rencontres">Rencontres</a></li>
    </ul>
  </nav>
  <header>
    <h1>Les petits hommes verts</h1>
    <h2>Les martiens sont là !</h2>
  </header>
  <main>
    <p>Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.</p>
    <h1>Nous rencontrer</h1>
    <p>Il suffit de vous inscrire et vous aurez des petites nouvelles de nous sans tarder.</p>
    <h1>S'inscrire</h1>
    <p>C'est par <a href="#mars">là</a> illico. Et devenez nos amis.</p>
   </main>
</body>

Cela permettra d'arriver au résultat :

Inscription
Actus
Rencontres
Les petits hommes verts
Les martiens sont là !
Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.
Nous rencontrer
Il suffit de vous inscrire et vous aurez des petites nouvelles de nous sans tarder.
S'inscrire
C'est par là illico. Et devenez nos amis.

Comme on peut le voir, main ne change rien à notre page, il a juste clarifié la structure entre les différents éléments la constituant. Sans la balise main, la pratique est d'utiliser l'élément div avec un identifiant spécifique du type id="main". Cette pratique n'est cependant plus à conseiller, car div est un élément passe-partout qui ne renseigne pas sur la nature du contenu ni son importance.

section

Une section agit comme un découpage de la partie principale de l'élément dans lequel elle est placée. Elle peut contenir son propre titre (h), sa propre introduction, son propre header... Elle est en général insérée comme enfant de body ou de article. Si vous devez migrer des sites au préalable réalisés avec XHTML, il est probable que de nombreux div deviendront des sections ou des articles.

Il peut y avoir autant de section que nécessaire dans la page et ils peuvent être répartis dans divers emplacements et divers éléments parents.

<body>
  <nav>
    <ul>
      <li><a href="/initiation-html5/inscription">Inscription</a></li>
      <li><a href="/initiation-html5/actualite">Actus</a></li>
      <li><a href="/initiation-html5/rencontres">Rencontres</a></li>
    </ul>
  </nav>
  <header>
    <h1>Les petits hommes verts</h1>
    <h2>Les martiens sont là !</h2>
  </header>
  <main>
    <p>Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.</p>
    <section>
       <h1>Nous rencontrer</h1>
       <p>Il suffit de vous inscrire et vous aurez des petites nouvelles de nous sans tarder.</p>
    </section>
    <section>
       <h1>S'inscrire</h1>
       <p>C'est par <a href="#mars">là</a> illico. Et devenez nos amis.</p>
    </section>
   </main>
</body>

Dans cet exemple nous avons encadré dans des sections différentes chaque partie de la page ayant trait à des informations spécifiques. Cela permettra d'arriver au résultat, identique aux précédents visuellement, mais toujours plus riche dans l'organisation du document :

Les petits hommes verts

Les martiens sont là !

Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.

Nous rencontrer

Il suffit de vous inscrire et vous aurez des petites nouvelles de nous sans tarder.

S'inscrire

C'est par là illico. Et devenez nos amis.

Selon les navigateurs, l'affichage peut cependant varier en particulier au niveau des titres. Chaque page ne devant contenir qu'un seul titre principal h1, les h1 insérés dans la section pourront alors être affichés automatiquement comme des h2.

article

L'élément article est un autre élément de groupage de contenu, au même titre que main ou section. En principe, là ou main se réfère à la partie principale de contenu de page, là où section représente un découpage de contenu, article représente un découpage spécifique d'une unité d'information qui peut ensuite être redécoupée en section, paragraphes... article accepte donc tout type de contenu dont section, header, footer, nav, p, voire article lui-même ... nécessaire à l'organisation du contenu propre à cet article.

En pratique il sera souvent difficile de savoir s'il est préférable de définir une section ou un article, l'usage se fera certainement de lui-même à long terme.

<body>
  <nav>
    <ul>
      <li><a href="/initiation-html5/inscription">Inscription</a></li>
      <li><a href="/initiation-html5/actualite">Actus</a></li>
      <li><a href="/initiation-html5/rencontres">Rencontres</a></li>
    </ul>
  </nav>
  <header>
    <h1>Les petits hommes verts</h1>
    <h2>Les martiens sont là !</h2>
  </header>
  <main>
    <p>Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.</p>
    <article>
      <h1>Rencontrer des martiens</h1>
      <section>
       <h1>Nous rencontrer sur le web</h1>
       <p>Abonnez-vous au flux d'actualité et vous aurez des petites nouvelles de nous sans tarder.</p>
       <p>Ou connectez-vous sur marsnet :)</p>
     </section>
      <section>
       <h1>Nous rencontrer en chair</h1>
       <p>Envoyez un doigt et nous verrons si la rencontre sera profitable.</p>
     </section>
    </article>
    <section>
       <h1>S'inscrire</h1>
       <p>C'est par <a href="#mars">là</a> illico. Et devenez nos amis.</p>
    </section>
   </main>
</body>

Une fois encore, le résultat visuel n'est pas affecté. Nous avons ici regroupé remplacé une section par un article qui regroupe à présent 2 sections traitant du même sujet. Il y a toujours une section dans le body, qui aurait pu éventuellement elle-même être convertie en article.

Inscription
Actus
Rencontres
Les petits hommes verts
Les martiens sont là !
Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.  
Rencontrer des martiens  
Nous rencontrer sur le web   
Abonnez-vous au flux d'actualité et vous aurez des petites nouvelles de nous sans tarder   
Ou connectez-vous sur marsnet :)    
Nous rencontrer en chair 
Envoyez un doigt et nous verrons si la rencontre sera profitable.
S'inscrire
C'est par là illico. Et devenez nos amis.

aside

Aside est l'élément que l'on peut opposer à main, même si ce n'est pas tout à fait exact. Il sert à définir tout contenu qui n'est pas relié directement à la partie informationnelle principale de la page. Cela peut être un contenu issu d'un autre site, un bandeau publicitaire, des informations annexes... Il s'agit d'un type de section particulier qui peut contenir tout type d'information, généralement représenté dans les documents sous formes de barres latérales. Il peut exister plusieurs aside par page.

Un aside peut être placé dans body, comme dans tout autre élément de section (section, article, main, header, footer...). Dans ce cas, on considérera que le contenu est raccordé, même étroitement, au contenu de la section dans laquelle il est placé. On observe une fois encore qu'il s'agit du placement dans le code, pas le placement dans la page qui, lui, reste libre, et représenté en CSS.

<body>
  <nav>
    <ul>
      <li><a href="/initiation-html5/inscription">Inscription</a></li>
      <li><a href="/initiation-html5/actualite">Actus</a></li>
      <li><a href="/initiation-html5/rencontres">Rencontres</a></li>
    </ul>
  </nav>
  <header>
    <h1>Les petits hommes verts</h1>
    <h2>Les martiens sont là !</h2>
  </header>
  <main>
    <p>Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.</p>
    <article>
      <h1>Rencontrer des martiens</h1>
      <section>
       <h1>Nous rencontrer sur le web</h1>
       <p>Abonnez-vous au flux d'actualité et vous aurez des petites nouvelles de nous sans tarder.</p>
       <p>Ou connectez-vous sur marsnet :)</p>
       <aside>
         <h1>Messagerie</h1>
         <p>Nous utilisons aussi la messagerie instantanée IRC</p>
       </aside>
     </section>
      <section>
       <h1>Nous rencontrer en chair</h1>
       <p>Envoyez un doigt et nous verrons si la rencontre sera profitable.</p>
     </section>
    </article>
    <section>
       <h1>S'inscrire</h1>
       <p>C'est par <a href="#mars">là</a> illico. Et devenez nos amis.</p>
    </section>
   </main>
   <aside>
     <h1>Les saturniens</h1>
     <p>Faites parti du cercle des saturniens sur <a href="#">Saturn Ring</a>.</p>
  </aside>
</body>

Nous avons ici rajouté un aside dans la section Nous rencontrer sur le web et un autre en dernier élément enfant du body. Ils ne font pas tous les deux références au même contenu et sont donc placés en conséquence dans le flux de contenu.

Inscription
Actus
Rencontres
Les petits hommes verts
Les martiens sont là !Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.      
Rencontrer des martiens
Nous rencontrer sur le web
Abonnez-vous au flux d'actualité et vous aurez des petites nouvelles de nous sans tarder. Ou connectez-vous sur marsnet :)
Messagerie
Nous utilisons aussi la messagerie instantanée IRC      
Nous rencontrer en chair       
Envoyez un doigt et nous verrons si la rencontre sera profitable.
S'inscrire
C'est par là illico. Et devenez nos amis.
Les saturniens
Faites partie du cercle des saturniens sur Saturn_ring.

footer

Enfin, footer est le dernier élément sémantique introduit dans HTML5. Il est un équivalent au header mais sera en général placé en fin de section parente même si rien de contraint à cette position. Il peut donc être placé dans un body (pour faire un pied de page), mais aussi en fin d'article (par exemple pour noter le nom de l'auteur ou la date de publication, licence). Il peut contenir des sections complètes comme des index, par exemple. Il n'est cependant pas considéré comme un élément de section au même titre, qu'article ou aside.

<body>
  <nav>
    <ul>
      <li><a href="/initiation-html5/inscription">Inscription</a></li>
      <li><a href="/initiation-html5/actualite">Actus</a></li>
      <li><a href="/initiation-html5/rencontres">Rencontres</a></li>
    </ul>
  </nav>
  <header>
    <h1>Les petits hommes verts</h1>
    <h2>Les martiens sont là !</h2>
  </header>
  <main>
    <p>Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.</p>
    <article>
      <h1>Rencontrer des martiens</h1>
      <section>
       <h1>Nous rencontrer sur le web</h1>
       <p>Abonnez-vous au flux d'actualité et vous aurez des petites nouvelles de nous sans tarder.</p>
       <p>Ou connectez-vous sur marsnet :)</p>
       <aside>
         <h1>Messagerie</h1>
         <p>Nous utilisons aussi la messagerie instantanée IRC</p>
         <footer>Posté le 01-01-01</footer>
       </aside>
     </section>
      <section>
       <h1>Nous rencontrer en chair</h1>
       <p>Envoyez un doigt et nous verrons si la rencontre sera profitable.</p>
     </section>
    </article>
    <section>
       <h1>S'inscrire</h1>
       <p>C'est par <a href="#mars">là</a> illico. Et devenez nos amis.</p>
    </section>
   </main>
   <aside>
     <h1>Les saturniens</h1>
     <p>Faites parti du cercle des saturniens sur <a href="#">Saturn Ring</a>.</p>
  </aside>
  <footer>Mentions légales - [email protected]  - tel : 01 23 45 67 89</footer>
</body>

Nous avons ici rajouté un footer dans le aside concernant Les saturniens contenant une date de publication et en pied de page contenant les informations générales sur le site.

Inscription
Actus
Rencontres
Les petits hommes verts
Les martiens sont là !Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.      
Rencontrer des martiens
Nous rencontrer sur le web
Abonnez-vous au flux d'actualité et vous aurez des petites nouvelles de nous sans tarder. Ou connectez-vous sur marsnet :)
Messagerie
Nous utilisons aussi la messagerie instantanée IRC      
Posté le 01-01-01
Nous rencontrer en chair       
Envoyez un doigt et nous verrons si la rencontre sera profitable.
S'inscrire
C'est par là illico. Et devenez nos amis.
Les saturniens
Faites partie du cercle des saturniens sur Saturn_ring.
Mentions légales - [email protected]  - tel : 01 23 45 67 89

Structure du texte

L'écriture du texte, comme nous l'avons déjà vu, doit être au mieux structuré, en particulier en HTML5. Cela va bien sûr signifier le recours à des balises en adéquation avec le contexte et l'objectif.

Balises sémantiques de structuration

Souvenons-nous déjà des balises de structuration du contenu.

header : permets de définir une zone d'en-tête, en général le titre principal ou un texte introductif.
footer : zone de bas de contenu, où sont souvent notés les dates de publications, noms d'auteur et autres informations relatives au texte lui-même.
main : zone principale de contenu de la page web.
article : une partie de la page ayant une homogénéité de contenu, un article de blog peut être un bon exemple.
section : un découpage d'un contenu plus important, par exemple d'un article.
aside : une zone de contenu annexe au contenu principal, comme des notes ou des compléments d'information.
nav : une zone de navigation qui contiendra le plus souvent une liste de liens.

Toutes ces balises sont apparues en HTML5. Elles permettent aux moteurs de recherche de bien comprendre le rôle des informations de la page et de référencer au mieux les parties les plus importantes. Un corps de base en HTML5 ressemblera donc souvent à :

<body>
   <header></header>
   <nav></nav>
   <main>
      <article>
         <header></header>
         <section></section>
         <section></section>
         <aside></aside>
      </article>
   </main>
   <aside></aside>
</body>

Hormis main, toutes ses balises peuvent être utilisées plusieurs fois dans la page. Leur contenu sera attaché à l'élément dans lequel elles sont insérées. Par exemple, le premier header de notre exemple pourra contenir le titre de la page web (bandeau), alors que le header placé dans article contiendra le titre spécifique de l'article. idem pour les autres : le aside directement enfant de body sera considéré comme donnant des informations annexes sur la page web, alors que celui placé dans article fournira des informations spécifiques à l'article.

On voir ici une donnée fondamentale du HTML5 par rapport au pratiques précédentes : il faut absolument éviter de structurer le texte selon sa mise en forme, mais bien selon la relation entre les différentes informations.

Balises pour mettre en forme le texte structuré

Elles ne sont bien sûr pas les seules et nous avons aussi régulièrement été confrontés aux balises :

h1 à h6 pour les titres, éventuellement insérées dans un hgroup.
p pour un paragraphe.

Ce sont là des balises extrêmement courantes que l'on retrouve dans presque tous les sites.

On pourra donc avoir quelque chose du genre :

 <section>
   <hgroup>
      <h1>Les titres à la nouvelle sauce</h1>
      <p>Les titres peuvent dorénavant être encadrés dans un hgroup pour être associés à des informations comme dans le cas de ce paragraphe d'introduction.</p>
   </hgroup>
   <p>Les titres commencent tous par la lettre h, comme en xHTML voire même le HTML1 :)</p>
   <p>Mais la capacité de les placer à différents niveaux de la page pour structurer efficacement chaque contenu de la page est un apport fondamental.</p>
</section>

ce qui donne ici :

Les titres à la nouvelle sauce

Les titres peuvent dorénavant être encadrés dans un hgroup pour être associés à des informations comme dans le cas de ce paragraphe d'introduction.

Les titres commencent tous par la lettre h, comme en xHTML voire même le HTML1 :)

Mais la capacité de les placer à différents niveaux de la page pour structurer efficacement chaque contenu de la page est un apport fondamental.

Lorsqu'un h1 est placé en tant que fils de body, il est considéré comme titre de la page, mais lorsqu'il est placé comme fils d'article, il est considéré comme titre de l'article et ne vas se confondre avec le premier. Cet apport du HTML5 est une grande clarification des différents contenus placés dans les différents textes d'une même page.

gras (b) et italique (i) sont bannis et span

Concernant la mise en forme de texte, elle est maintenant strictement interdite en HTML5 (comme en xHTML pour la majeure partie) est doit être réalisée uniquement en CSS. Ainsi les balises b et i qui servaient auparavant à mettre en gras et en italique ne seront plus utilisées que pour faire mise en évidence de texte dans le texte comme il pourrait être fait avec strong ou em.

Attention cependant la confusion pourra toujours venir du fait que les navigateurs pourront toujours afficher ces balises comme du gras et de l'italique par défaut. Il sera donc particulièrement important d'utiliser le CSS pour adapter leur mise en forme.

Pour des changements de mise en forme sans signification sémantique, le recours à l'élément span reste possible. Celle-ci est sans mise en forme ce qui implique qu'elle sera utilisée pour placer un attribut spécifique ou associer une classe CSS.

Citation et balises spécifiques

A noter cependant que pour certains types d'informations, des éléments spécifiques seront toujours utilisés comme :

cite pour les noms d'ouvrage (livre...)
ou q pour les citations dans le texte.

Pour rappel, les blocs de citations sortis du paragraphe courant seront toujours représentés par blockquote qui agit comme une balise de section et qui peut contenir plusieurs paragraphes, voire titres et footers... et qui peut être accompagné de l'attribut cite pour mentionner explicitement la source et ainsi faciliter la tâche de mise en relation des moteurs de recherche.

 <p>Le philosophe français <strong>Descartes</strong> a écrit dans <cite>Méditations sur la philosophie première</cite> une phrase reprise ensuite maintes fois résumée en <q>je pense, donc je suis</q> :</p>
<blockquote cite="http://www.gutenberg.org/files/13846/13846-h/13846-h.htm">
<p>Puis, examinant avec attention ce que j'étois, et voyant que je pouvois feindre que je n'avois aucun corps, et qu'il n'y avoit aucun monde ni aucun lieu où je fusse; mais que je ne pouvois pas feindre pour cela que je n'étois point; et qu'au contraire de cela même que je pensois à douter de la vérité des autres choses, il suivoit très évidemment et très certainement que j'étois; au lieu que si j'eusse seulement cessé de penser, encore que tout le reste de ce que j'avois jamais imaginé eût été vrai, je n'avois aucune raison de croire que j'eusse été; je connus de là que j'étois une substance dont toute l'essence ou la nature n'est que de penser, et qui pour être n'a besoin d'aucun lieu ni ne dépend d'aucune chose matérielle; en sorte que ce moi, c'est-à-dire l'âme, par laquelle je suis ce que je suis, est entièrement distincte du corps, et même qu'elle est plus aisée à connoître que lui, et qu'encore qu'il ne fût point, elle ne l'auroit pus d'être tout ce qu'elle est.</p>
<p>Après cela je considérai en général ce qui est requis à une proposition pour être vraie et certaine; car puisque je venois d'en trouver une que je savois être telle, je pensai que je devois aussi savoir en quoi consiste cette certitude. Et ayant remarqué qu'il n'y a rien du tout en ceci, je pense, donc je suis, qui m'assure que je dis la vérité, sinon que je vois très clairement que pour penser il faut être, je jugeai que je pouvois prendre pour règle générale que les choses que nous concevons fort clairement et fort distinctement sont toutes vraies, mais qu'il y a seulement quelque difficulté à bien remarquer quelles sont celles que nous concevons distinctement.</p>
</blockquote>

ce qui rend le résultat suivant dans votre navigateur :

Le philosophe français Descartes a écrit dans Méditations sur la philosophie première une phrase reprise ensuite maintes fois résumée en je pense, donc je suis :

Puis, examinant avec attention ce que j'étois, et voyant que je pouvois feindre que je n'avois aucun corps, et qu'il n'y avoit aucun monde ni aucun lieu où je fusse; mais que je ne pouvois pas feindre pour cela que je n'étois point; et qu'au contraire de cela même que je pensois à douter de la vérité des autres choses, il suivoit très évidemment et très certainement que j'étois; au lieu que si j'eusse seulement cessé de penser, encore que tout le reste de ce que j'avois jamais imaginé eût été vrai, je n'avois aucune raison de croire que j'eusse été; je connus de là que j'étois une substance dont toute l'essence ou la nature n'est que de penser, et qui pour être n'a besoin d'aucun lieu ni ne dépend d'aucune chose matérielle; en sorte que ce moi, c'est-à-dire l'âme, par laquelle je suis ce que je suis, est entièrement distincte du corps, et même qu'elle est plus aisée à connoître que lui, et qu'encore qu'il ne fût point, elle ne l'auroit pus d'être tout ce qu'elle est.

Après cela je considérai en général ce qui est requis à une proposition pour être vraie et certaine; car puisque je venois d'en trouver une que je savois être telle, je pensai que je devois aussi savoir en quoi consiste cette certitude. Et ayant remarqué qu'il n'y a rien du tout en ceci, je pense, donc je suis, qui m'assure que je dis la vérité, sinon que je vois très clairement que pour penser il faut être, je jugeai que je pouvois prendre pour règle générale que les choses que nous concevons fort clairement et fort distinctement sont toutes vraies, mais qu'il y a seulement quelque difficulté à bien remarquer quelles sont celles que nous concevons distinctement.

Mettre en évidence des contenus spécifiques avec time ou data

Il existe d'autres types d'informations régulièrement utilisés sur les sites web, en fonction de leur destination.

Dates avec time

Enfin, pour les sites organisés à la manière d'un blog ou mentionnant des évènements (concerts, meeting...), le HTML5 apporte le nouvel élément time qui peut être utilisé sans attribut :

<p>Participez au Libérathon ce soir à partir de <time>20:00</time>.</p>

ou avec un attribut datetime spécifiant la date au format informatique :

<p>Participez au Libérathon à partir du <time datetime="2013-12-01 20:00">1 décembre 2013, 20h</time> à Rennes.</p>

Affichage de code informatique samp, code, kbd ou var

Mais si vos données ne rentrent pas dans ces catégories, vous écrivez peut-être souvent des lignes de codes (rien ne vous oblige cependant à écrire des tartines comme nous !).

var servira à mentionner les variables ;

kbd une saisie utilisateur ;

code, un code informatique au sens large ;

samp, un exemple de rendu à l'écran ou de résultat.

Bien sûr la balise pre. Elle permet d'écrire du texte en gardant la mise en forme (espace, tabulation telle qu'ils ont étaient placés dans le code alors qu'ils sont normalement non interprétés en HTML.

<pre>

   Ceci est un texte écrit dans pre           et ici la suite



Avec un vide i   c   i.
</pre>

ce qui rend :

   Ceci est un texte écrit dans pre           et ici la suite



Avec un vide i   c   i.

alors qu'avec p, cela donnerait :

Ceci est un texte écrit dans pre et ici la suite Avec un vide i c i.

ou avec samp:

Ceci est un texte écrit dans pre et ici la suite Avec un vide i c i.

ou encore code :

Ceci est un texte écrit dans pre et ici la suite Avec un vide i c i.

Eh oui, c'est ainsi. Ce n'est pas l'aspect qui compte en HTML, mais le sens.

Mise en avant de données personnalisées avec l'élément data

L'élément data permet de relier un texte avec un attribut value pouvant contenir un référent spécifique pour ce contenu. Cela peut être un numéro de produit, par exemple. On l'utilisera sous la forme :

<data value="123456789">Un nouveau livre Fmfr !</data>

Listes

Les listes, s'ils sont peu fréquent dans la plupart des textes que l'on trouve dans la presse, sont néanmoins une forme courante d'écriture sur le web qui exige concision plus que qualités littéraires au vu de la rapidité avec laquelle les internautes passent d'un contenu à l'autre. Dans ce contexte la liste va permettre d'énumérer un certain nombre d'éléments. Les différents types de listes sont :

liste à puce ;
liste numérotée ;
liste de définition.

Dans chaque cas, la liste se définit d'au moins deux éléments :

celui qui définit le type de liste et l'encadre ;
ceux qui définissent chaque objet énuméré.

Liste à puce et liste numérotée

Liste à puce et liste numérotée partagent toutes deux le même type de code HTML. Les objets de la liste sont énumérés avec l'élément li répété autant de fois que nécessaire.

La liste à puce ul

La liste à puce se définit avec l'élément ul pour unordered list. Les listes à puces sont à utiliser lorsque l'ordre des éléments dans la liste n' pas d'importance particulière.

<ul>
  <li>Germinal</li>
  <li>Du contrat social</li>
  <li>Les misérables</li>
</ul>

ce qui affiche le résultat suivant :

Germinal
Du contrat social
Les misérables

Remarquez que la puce par défaut est un petit rond noir et que la liste est légèrement en retrait sur la gauche. Ces propriétés peuvent être redéfinies en CSS avec list-style-type et margin-left.

La liste numérotée ol

Les changements seront peu nombreux par rapport à une liste ul, seul la balise générale change :

 <ol>
  <li>Germinal</li>
  <li>Du contrat social</li>
  <li>Les misérables</li>
</ol>

et affiche :

Germinal
Du contrat social
Les misérables

On rappellera au passage que l'utilisation de liste numérotée induira une interprétation particulière de la part du navigateur et des moteurs de recherches qui considéreront les premiers éléments de la liste comme plus importants.

Il est possible de changer le type de numérotation en HTML ou CSS. En HTML elle sera avec l'attribut type qui peut accepter les valeurs suivantes :

decimal : 1,2,3 ;
lower-alpha : a, b, b ;
upper-alpha : A, B, C ;
lower-roman : i, ii, iii (à la romaine) ;
upper-roman : I, II, III (à la romaine).

par exemple :

<ol type="lower-alpha">
  <li>Germinal</li>
  <li>Du contrat social</li>
  <li>Les misérables</li>
</ol>

et affiche :

Germinal
Du contrat social
Les misérables

On remarque que la valeur par défaut consiste en l'utilisation de chiffres.

Spécifier la valeur initiale de la numérotation avec start

Il est parfois nécessaire de commencer la numérotation à une valeur particulière. Dans ce cas, l'utilisation de l'attribut start s'avère bien pratique.

 <ol start="10">
  <li>Germinal</li>
  <li>Du contrat social</li>
  <li>Les misérables</li>
</ol>

et affiche :

Germinal
Du contrat social
Les misérables

L'attribut Start de ul et ol permettent par exemple d'avoir plusieurs listes continues en termes de numérotation. Il faudra cependant alors bien s'assurer de saisir les chiffres adéquats pour la poursuite de l'incrémentation.

Les listes imbriquées

Il est parfois aussi nécessaire d'imbriquer une liste dans une autre. Cette pratique moins courante pose des problèmes de lisibilité de la page et aussi du code. On préférera créer deux listes différentes hormis dans certaines situations comme par exemple les menus de navigation.

Le principe est simple : chaque nouvelle liste est incluse entièrement dans un li parent.

 <ol>
  <li>Germinal
    <ul>
      <li>Disponible en epub</li>
      <li>Disponible en PDF</li>
    </ul>
  </li>
  <li>Du contrat social</li>
  <li>Les misérables</li>
</ol>

et affiche :

Germinal
- Disponible en epub
- Disponible en PDF
Du contrat social
Les misérables

L'aspect de la liste de second niveau est alors un peu différent de la liste de premier niveau de manière à éviter toute confusion lors de la lecture.

Les listes de définition

Les listes de définition ou de glossaire sont utilisées dans le cas particulier où la liste s'effectue sur deux niveaux :

un élément principal à nommer ;
un élément secondaire qui vient le décrire.

Le cas le plus fréquent d'utilisation de ce genre de liste est représenté par les dictionnaires ou les glossaires. Mais il est utilisable dans tout contexte permettant de donner des détails à un élément listé comme une liste bibliographique ou une liste d'instruction.

En HTML, cela prendra la forme suivante :

<dl>
  <dt>Germinal</dt>
  <dd>Livre écrit par Emile Zola</dd>
  <dt>Du contrat social</dt>
  <dd>Écrit par Jean-Jacques Rousseau</dd>
  <dt>Les misérables</dt>
  <dd>Oeuvre majeure de Victor Hugo</dd>
  <dd>Certainement la plus représentative et représentée à l'étranger</dd>
</dl>

ce qui donnera dans le navigateur :

Germinal: Livre écrit par Emile Zola
Du contrat social: Écrit par Jean-Jacques Rousseau
Les misérables: Oeuvre majeure de Victor Hugo; Certainement la plus représentative et représentée à l'étranger

On notera que le code commence par l'élément dl qui encadre toute la liste et qu'une suite de dt et dd de même niveau est utilisée :

dt définit le terme qui doit être décrit
dd est la description elle-même, devant être placée juste après le dt qu'elle décrit. Elle peut être utilisée plusieurs fois pour un même dt. Les descriptions sont affichées en retrait par rapport au terme à définir.

Certaines de ces listes affichent parfois des informations principales et des informations secondaires sur la ligne dt. Il est alors possible d'utiliser l'élément dfn pour pointer spécifiquement celui qui est décrit par la suite :

<dl>
  <dt><dfn>Germinal</dfn>, 1885</dt>
  <dd>Livre écrit par Emile Zola</dd>
  <dt>Du contrat social</dt>
  <dd>Écrit par Jean-Jacques Rousseau</dd>
  <dt>Les misérables</dt>
  <dd>Oeuvre majeure de Victor Hugo</dd>
  <dd>Certainement la plus représentative et représentée à l'étranger</dd>
</dl>

ce qui sera interprété comme :

Germinal, 1885: Livre écrit par Emile Zola
Du contrat social: Écrit par Jean-Jacques Rousseau
Les misérables: Oeuvre majeure de Victor Hugo; Certainement la plus représentative et représentée à l'étranger

Indépendamment de l'aspect graphique qui peut être modifié par le CSS, l'utilisation de dfn permet de mettre en évidence l'élément principal. Si on lui ajoute un attribut id unique, on pourra alors s'y référer directement par le biais d'un lien et utiliser le système pour des glossaires, notes de bas de page ou de fin de document.

Tableaux

Les tableaux sont parmi les éléments les moins bien compris du HTML. Pris entre les personnes qui les utilisent pour structurer la mise en page de leur contenu (au lieu d'utiliser du CSS) et celles qui ne veulent pas en entendre parler, il y a évidemment un fossé.

Dans tous les cas, le code permettant de créer un tableau est le même :

<table>
</table>

Tableaux et mise en page

Cette mésentente est donc liée à l'histoire du web. Lors de l'essor des sites web à la fin des années 1990, le CSS n'était pas encore utilisé. Avec l'accroissement de la taille des sites et des informations à diffuser, la mise en page sur 3 colonnes s'est généralisée, et à cette époque, le tableau était le seul moyen d'y arriver alors même qu'il n'avait pas été prévu pour ça. Pour ceux qui ont pratiqué ces techniques, on se souviendra de la complexité tant en terme de structuration de la page, qu'en terme de quantité de code produit, pour arriver à un résultat simple, somme toute. Le CSS a donc réellement apporté sa pierre et doit maintenant être utilisé exclusivement pour la mise en page. La recommandation HTML5 mentionne : "Tables should not be used as layout aids". Les tableaux ne doivent pas être utilisés comme des moyens de mise en page, et si cela doit être le cas pour une raison ou une autre, par exemple, un site ancien qui serait trop long à refaire, l'attribut role avec la valeur presentation devra lui etre assigné (presentation est une valeur WAI-ARIA enlevant le caractère sémantique de l'interprétation).

<table role="presentation">
</table>

On remarquera aussi que la recommandation incite les navigateurs à interpréter les attributs border="0" et cellspacing="0" cellapadding="0" comme des attributs définissant des propriétés de tableaux de mise en page, la bonne pratique étant d'utiliser le CSS pour de tels effets.

À l'inverse, l'utilisation de balise permettant de sémantiser classera le tableau dans la catégorie des tableaux de données : caption, thead, headers, scope.

Quoi qu'il en soit, réservez à l'heure actuelle l'utilisation de tableaux à la réalisation de tableaux, comme vous le feriez dans un traitement de texte : en général, il s'agit de présenter des données sous forme de grille, les éléments en ligne étant quantifiés par les colonnes ou inversement. Un exemple simple et courant peut être une liste de produit contenant des colonnes quant au poids, au prix, à la couleur, à la disponibilité en stock.

Le tableau est donc une sorte d'enrichissement de liste (qui ne contient qu'une information), cet enrichissement étant provoqué par le rattachement d'informations régulières et organisées à cette liste.

Décrire un tableau

Comme on vient de le voir, il va falloir apporter un peu d'attention à la description de notre tableau. Nous proposons d'avoir recours à l'élément caption prévu explicitement pour cela. Il peut contenir différents éléments permettant de décrire le texte.

<table>
   <caption>
      <p><strong>Tab1. Liste de prix des livres</strong> Ce tableau liste l'ensemble de notre catalogue de livres et renseigne les prix 2014 hors frais de port ainsi que sa disponibilité en version numérique</p>
   </caption>
</table>

Définir les titres de colonnes

Une fois le tableau mis en place, on peut alors commencer à passer à son contenu. En général, il s'agira de faire apparaître en haut du tableau les intitulés pour chaque colonne de manière à faciliter la lecture. On utilisera alors une combinaison de 3 éléments :

thead pour encadrer la ligne informative ;
tr pour créer la ligne ;
th pour renseigner le titre de chaque colonne.

<thead>
   <tr>
      <th>Titre livre</th>
      <th>Téléchargeable</th>
      <th>Prix TTC</th>
   </tr>
</thead>

Ce qui nous donne maintenant le tableau suivant :

<table>
   <caption>
      <p><strong>Tab1. Liste de prix des livres</strong> Ce tableau liste l'ensemble de notre catalogue de livres et renseigne les prix 2014 hors frais de port  ainsi que sa disponibilité en version numérique</p>
   </caption>
   <thead>
     <tr>
       <th>Titre livre</th>
       <th>Téléchargeable</th>
       <th>Prix TTC</th>
     </tr>
   </thead>
</table>

En HTML5, il est possible d'omettre les balise de fermeture pour les thead, th et les tr

Ajouter les données au tableau

L'ajout des informations dans le tableau ne sera pas plus compliqué que l'ajout de la première ligne. Les éléments utilisés seront alors :

tbody pour encadrer l'ensemble des données ;
tr pour chaque ligne de donnée ;
td pour chaque donnée proprement dite, en général associée à une colonne définie ;
th pour le cas particulier des cellules de début de ligne à mettre en évidence.

Ainsi notre liste de livre en vente qui pourrait se présenter sous la forme :

<ul>
    <li>Germinal</li>
    <li>Du contrat social</li>
    <li>Les misérables</li>
</ul>

va maintenant devenir

<tbody>
   <tr>
      <td>Germinal</td>
      <td>epub</td>
      <td>2,5 €</td>
   </tr>
   <tr>
      <td>Du contrat social</td>
      <td>epub</td>
      <td>2,5 €</td>
   </tr>
   <tr>
      <td>Les misérables</td>
      <td></td>
      <td>9 €</td>
   </tr>
</tbody>

Ainsi construit, le navigateur saura identifier les différentes relations entre les données. Il comprendra qu'à l'horizontale les éléments sont de nature associée et qu'à la verticale, la nature est identique.

La dimension des colonnes est automatiquement ajustée à la taille du contenu le plus grand. Cela peut poser des difficultés dans le cas de colonnes dont la quantité d'information est disparate. L'utilisation de la propriété CSS width sur td impose une largeur de colonne et provoque des renvois à la ligne automatique dans les cellules, si nécessaire.

À noter que l'élément tbody peut être répété plusieurs fois pour générer des regroupements plus fort au sein du tableau et que tfoot, définissant un pied de tableau, beaucoup moins utilisé que thead mais qui en reprend souvent les informations, peut s'avérer utile dans les longs tableaux.

Fusionner des lignes ou des colonnes

Les éléments que nous avons vus jusqu'à présent permettent de réaliser des tableaux simples parfaitement réguliers dans leurs présentations. Or, il n'est pas rare de devoir regrouper certaines informations en ligne ou en colonne. Dans ce cas, l'utilisation de :

colspan pour regrouper sur la ligne ;

rowspan pour fusionner en colonne.

permettra d'améliorer la structure et la rendre plus explicite si besoin.

Colspan et rowspan prennent tous deux une valeur chiffrée entière correspondant au nombre de cellules à fusionner. Ainsi, colspan="2" fusionnera la colonne en cours avec la suivante.

Par exemple, modifions le tableau précédent en conséquence et tentons d'ajouter une première ligne d'entête qui regroupera Téléchargeable et Prix sous une colonne générale En Vente.

<table border="1">

     <thead>
     <tr>
       <th />
       <th>En vente</th>
       <th />
     </tr>
     <tr>
       <th>Titre livre</th>
       <th>Téléchargeable</th>
       <th>Prix TTC</th>
     </tr>
   </thead>
    <tbody>
   <tr>
      <td>Germinal</td>
      <td>epub</td>
      <td>2,5 €</td>
   </tr>
   <tr>
      <td>Du contrat social</td>
      <td>epub</td>
      <td>2,5 €</td>
   </tr>
   <tr>
      <td>Les misérables</td>
      <td></td>
      <td>9 €</td>
   </tr>
</tbody>
</table>

ce qui affiche :

	En vente
Titre livre	Téléchargeable	Prix TTC
Germinal	epub	2,5 €
Du contrat social	epub	2,5 €
Les misérables		9 €

Nous ajoutons ici explicitement des bordures en attributs HTML de manière à bien montrer l'action de la fusion, mais l'utilisation de CSS serait préférable.

Changeons maintenant cette base pour fusionner la ligne En Vente :

<table border="1">

     <thead>
     <tr>
       <th />
       <th colspan="2">En vente</th>
     </tr>
     <tr>
       <th>Titre livre</th>
       <th>Téléchargeable</th>
       <th>Prix TTC</th>
     </tr>
   </thead>
    <tbody>
   <tr>
      <td>Germinal</td>
      <td>epub</td>
      <td>2,5 €</td>
   </tr>
   <tr>
      <td>Du contrat social</td>
      <td>epub</td>
      <td>2,5 €</td>
   </tr>
   <tr>
      <td>Les misérables</td>
      <td></td>
      <td>9 €</td>
   </tr>
</tbody>
</table>

ce qui affiche :

	En vente
Titre livre	Téléchargeable	Prix TTC
Germinal	epub	2,5 €
Du contrat social	epub	2,5 €
Les misérables		9 €

Pour arriver à ce résultat, nous avons :

Ajouter l'attribut colspan à la première cellule à fusionner ;
Attribuer la valeur 2 à cet attribut pour indiquer le nombre de cellule à modifier ;
Supprimer le th suivant de manière à ce que le nombre de cellules soit toujours le même implicitement : la première vide, puis la seconde sur une étendue de 2 soient au total 3.

Il est important de noter que le nombre de colonnes doit rester cohérent d'une ligne à l'autre de manière à garder une bonne organisation du tableau. Il appartient à l'intégrateur de porter cette attention lors de l'utilisation des attributs rowspan et colspan. En cas d'erreur, des colonnes ou lignes peuvent être décalées, voire ajouter si le nombre total est différent d'une ligne à l'autre.

Pour améliorer le résultat et sa pertinence, il convient d'attribuer ces propriétés à la première cellule engageant la fusion.

La même opération peut être effectuée avec les lignes par exemple en fusionnant la cellule Titre livre avec sa supérieure :

<table border="1">

     <thead>
     <tr>
       <th rowspan="2">Titre livre</th>
       <th>En vente</th>
       <th />
     </tr>
     <tr>
       <th>Téléchargeable</th>
       <th>Prix TTC</th>
     </tr>
   </thead>
    <tbody>
   <tr>
      <td>Germinal</td>
      <td>epub</td>
      <td>2,5 €</td>
   </tr>
   <tr>
      <td>Du contrat social</td>
      <td>epub</td>
      <td>2,5 €</td>
   </tr>
   <tr>
      <td>Les misérables</td>
      <td></td>
      <td>9 €</td>
   </tr>
</tbody>
</table>

ce qui affiche :

Titre livre	En vente
Titre livre	Téléchargeable	Prix TTC
Germinal	epub	2,5 €
Du contrat social	epub	2,5 €
Les misérables		9 €

Ici, plusieurs actions ont aussi été effectuées :

Déplacement du texte Titre livre dans la première ligne d'entête ;
Ajout de l'attribut rowspan ;
Affectation de la valeur 2 à rowspan.

Il existe bien sûr d'autres éléments et attributs associés aux tableaux, mais ils sont bien moins fréquents et ceux-ci permettent déjà de réaliser de grandes choses.

Ajouter des images

Les images peuvent être des éléments importants du document. Une page web contenant des images est immédiatement plus attractives que vide de toute illustration.

Les formats d'images souvent utilisés

Tous les types d'images ne sont pas utilisables et leur rendu pourra varier. Donc, oubliez vos fichiers Photoshop au format PSD et exportez dans un des formats suivants :

jpeg ;
png ;
gif ;
svg.

La balise servant à placer une image est img, suivie de l'attribut src, sous la forme :

  <img src="chemin/nomImage" alt="Texte alternatif" title="Titre" />

par exemple :

<img src="#/Images/Fra_Carnevale_-_The_Ideal_City_-_Walters_37677.jpg" width="1160px" />

La balise img est particulière utilisée pour les 3 premier formats. En ce qui concerne le SVG, format spécifique au dessin vectoriel, à l'inverse des précédents, d'autres possibilités d'insertion existent conduisant parfois à des différences d'affichage ou de potentiel.

L'attribut alt est considéré comme obligatoire est doit contenir un petit descriptif du contenu de l'image. Il est aussi utilisé par certains navigateurs en place de l'image en cas d'erreur de chargement.

Ajout de légendes aux images

Il a longtemps été difficile d'associer des textes aux images. Diverses solutions ont eu cours, mais rien n'était officiel ce qui posait évidemment des problèmes de référencement, car les légendes peuvent être des sources d'informations non négligeables pour préciser le contenu d'une image qui est par nature par référençable.

Comme pour les h1 placés dans des header ou hgroup, on placera l'image dans un élément parent figure et on y rajoutera donc la balise img ainsi que figcaption qui en contiendra la légende. Cela donnera le code suivant :

<figure>
   <img src="/_templates/fm_resources/FM-header.png" alt="son descriptif" />
   <figcaption>légende : logo Fmfr</figcaption>
</figure>

ce qui donnera :

légende : logo Fmfr

Pour rappel, les noms de fichier des images et le contenu des attributs alt sont essentiels pour assurer un référencement correct.

Insertion d'images redimensionnables et zoomables

Si vos images étaient au format .ai, .eps, .cdr ou autre, oubliez-les, elles ne remplissent pas les objectifs du web :

du contenu léger pour ne pas ralentir l'affichage de la page ;
permettre l'indexation du contenu par les moteurs de recherche si celui-ci est important ;
permettre une interaction entre le contenu de la page et le contenu de l'image ;
créer des animations ou transitions éventuelles.

SVG remplit tous ces objectifs et fournit en plus d'autres avantages liés aux fontes ou à quelques autres sujets. Le logiciel le plus compétent à l'heure actuelle dans la création de fichiers SVG est Inkscape, mais Illustrator peut également enregistrer au format SVG même si les résultats sont moins concluants.

Pour plus d'informations sur Inkscape et le SVG reportez-vous aux manuels spécifiques :

manuel Inkscape : http://fr.flossmanuals.net_booki/initiation-inkscape/
manuel SVG : http://fr.flossmanuals.net_booki/SVG/

Dans quel cas utiliser des SVG ?

En impression, l'utilisation de fichiers vectoriels permet de laisser le RIP générer le bitmap à sa résolution de sortie sans perte et assure alors la qualité maximale. En édition électronique, de façon identique, le SVG permettra à l'image de s'adapter à la résolution du logiciel ou matériel de lecture. Il conviendra parfaitement pour les :

logos ;
cartes et plans ;
graphiques ;
contenus interactifs ;
contenus devant s'adapter à la page (bandes dessinées, mangas, présentations type diaporama...).

En utilisant un logiciel de création, produire des SVG est très simple. Vous pouvez aussi créer ou personnaliser directement dans le code, qui ressemble beaucoup à du code HTML. Si vous souhaitez du contenu interactif ou animé, l'étape de modification de code sera nécessaire.

Attention cependant, si vous souhaitez réaliser des documents complexes, à veiller aux points suivants :

l'intégralité des capacités offertes par le SVG n'est pas nécessairement utile pour un livre (par exemple les contenus animés). Epub définit donc un sous-ensemble utile et exclut certaines parties de la recommandation ;
il faudra faire de nombreux tests, car le rendu du fichier est entièrement assuré par le logiciel de lecture du livre et la qualité d'affichage peut varier très sensiblement.

Insérer un fichier SVG sous forme d'image liée

Le type d'insertion le plus simple est d'utiliser le fichier SVG comme une image "classique". Pour cela, il suffit d'utiliser l'élément img et de passer l'adresse et le nom du fichier SVG en valeur de l'attribut src :

  <img src="#/Images/plan_appartement.svg" alt="page 6"  />

Le rendu ne sera pas purement vectoriel, car un cache bitmap semble être réalisé sur plusieurs navigateurs. Mais cette solution est la plus universelle et simple à mettre en œuvre.

Insertion d'un fichier SVG sous forme native

L'insertion d'un fichier SVG directement dans le code de l'epub est l'autre forme pour assurer la préservation vectorielle maximale, mais elle aura l'inconvénient d'alourdir le code de la page html de l'epub et d'en complexifier sa mise à jour. Cependant elle permet d'éviter des problèmes de relation et d'insérer le code svg directement dans la page html, à l'endroit voulu, par un simple copier-coller. Dans l'exemple qui suit, vous trouverez un panneau "sens interdit" produit dans Inkscape. Il suffira d'afficher le code svg dans un éditeur de texte de la même façon qu'avec une page web, de copier la partie du code qui est entre <svg> et </svg> et de le coller dans la page.

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="67"
   height="67"
   id="svg3199"
   version="1.1">
  <g
     id="layer1"
     transform="translate(-103.57143,-255.93361)">
    <g
       transform="translate(-142.85715,-232.14286)"
       id="ico_dont">
      <path
         transform="matrix(1.46875,0,0,1.46875,40.803571,213.49128)"
         d="m
185.71429,209.80876 c 0,12.62365 -10.23349,22.85714
-22.85714,22.85714 C 150.2335,232.6659 140,222.43241 140,209.80876 c
0,-12.62365 10.2335,-22.85714 22.85715,-22.85714 12.62365,0
22.85714,10.23349 22.85714,22.85714 z"
         ry="22.857143"
         rx="22.857143"
         cy="209.80876"
         cx="162.85715"
         id="path2992"
         style="fill:#483737"
/>
      <rect
         style="fill:#ffffff;fill-opacity:1;stroke:none"
         id="btn_dont"
         width="50.357143"
         height="16.785715"
         x="254.28571"
         y="514.14789"
/>
    </g>
  </g>
</svg>

Ce code montre aussi la personnalité du SVG et la façon de le construire. Dans l'exemple ci-dessus, l'utilisation de certaines fonctions d'Inkscape a complexifié légèrement certaines portions, mais on peut voir que le SVG :

permet de créer des formes géométriques (rect) ;
permet de créer à partir de vecteur (path) ;
définit la position et la taille des éléments (x, y, width, height) ;
définit l'aspect des éléments par l'utilisation du CSS (ici écrit directement dans l'attribut style, mais qui pourrait aussi être lié à une feuille de style externe).

Dans bien des cas, quand il s'agit de dessins, plans... un fichier SVG va s'avérer bien plus léger qu'un équivalent en JPG ou PNG avec une qualité de rendu supérieur. Dans le cas du plan ci-dessous, le fichier SVG occupe 47 ko, et peut être agrandi à volonté pour laisser le lecteur analyser des détails. Pour arriver à un taux d'agrandissement à peu près équivalent sur cette page à 1200 pixels, notre image enregistrée en PNG ferait 1000 ko soit 1Mo, 20 fois plus.

Page incorporant un plan en SVG, une image en jpg

Voici le résultat obtenu en agrandissant dans Readium, une extension au navigateur Chrome.

Et le même rendu avec une image png, mais dont le poids sera 20 fois supérieur !

Vidéo en HTML5

L'insertion de vidéo est assez simple en HTML5. C'est même l'une des principales nouveautés qui libèrent de Flash et de Youtube, par rapport à XHTML. Mais tout n'est pas aussi simple qu'on souhaiterait le voir, en particulier grâce aux supports aléatoires selon les navigateurs et les spécifications de codecs, donc spécifiques à la vidéo elle-même, en général méconnus.

Pour insérer une vidéo, codez par exemple :

<video src="#/video/sintel_trailer-480p.mp4" controls width="320" height="240"/>

L'élément video crée la zone. Les attributs width et height permettent de définir une dimension d'affichage. Enfin controls permet d'afficher la barre de navigation dans la vidéo.

La vidéo utilisée ci-dessus est celle de Sintel, court-métrage réalisé avec Blender. Vous trouverez de nombreux exemples sur internet de vidéos dans différents formats dont :

Formats vidéo supportés

Malheureusement, aucun navigateur ne supporte tous les formats vidéo. Il est donc important de bien évaluer le besoin de vidéo dans un site avant de les mettre en œuvre.

Une seconde notation incluant l'élément source à la place de l'attribut src permet de définir plusieurs sources pour la même vidéo et ainsi laisser le logiciel de lecture choisir le format le plus approprié pour lui. Attention cependant, car cela alourdit évidemment d'autant les fichiers HTML, mais pas nécessairement le temps de chargement, car le navigateur fera son propre choix et ne téléchargera que la version qu'il préfère parmi les sources mentionnées. Il n'en reste pas moins que l'espace d'hébergement nécessaire est alors largement accru.

<video id="video3" controls width="320" height="240">
     <source src="video/sintel_trailer-480p.mp4" type="video/mp4"/>
     <source src="video/sintel_trailer-480p.webm" type="video/webm"/>
     <source src="video/sintel_trailer-480p.ogv" type="video/ogg"/>
</video>

Notons que width définit la largeur de la fenêtre vidéo et height sa hauteur.

Les principaux formats sont donc :

theora (ogg ou ogv): premier des formats reconnus en HTML5. Il offre une bonne compression et est souvent conseillé en remplacement du Mpeg. Depuis sa création, il est libre et gratuit. Internet Explorer et safari trainent à l'implémenter.
WebM: format développé et promu en partie par Google, il est de très bonne facture, libre et gratuit. Internet Explorer et safari trainent à l'implémenter.
H.264-MP4: Le codec H.264 du Mpeg4 est largement utilisé. Il n'en reste pas moins soumis à des brevets et sa pérennité s'avère donc compliquée dans ce contexte. Une version libre mise à disposition par Cisco peut être utilisée dans certains pays, mais cela complique éminemment la disponibilité des vidéo H.264 placée dans un site. Si ce codec est de bonne qualité, les risques sont donc inhérents à son statut juridique particulier qui a d'ailleurs conduit Firefox et Opera à ne l'implémenter que tardivement et partiellement.

Pour vérifier le support des différents formats par les navigateurs, nous vous conseillons de visiter http://caniuse.com/#search=video.

Contrôler la vidéo

Certains attributs facilitent grandement la façon dont le site et l'utilisateur peuvent interagir.

controls

Affiche les barres de navigation dans la vidéo avec entre autres une barre temporelle et un bouton lecture/pause. L'implementation des contrôles est propre à chaque navigateur. Les boutons disponibles ainsi que leur aspect peut donc différer.

autoplay

permet de lancer la video dès le chargement de la page. Cette pratique est largement utilisée dans les publicités, mais cependant moins pour le contenu. On préférera en effet en général que l'utilisateur lance lui-même la vidéo, assurance qu'il est disponible pour en profiter pleinement.

loop

permet de faire tourner en boucle la vidéo. Très utile aussi dans les cas d'une approche publicitaire, mais trop distrayant si la vidéo accompagne un article. Il faut laisser à l'utilisateur pouvoir continuer tranquillement sa lecture.

muted

assurera que la vidéo, en particulier en autoplay, sera lancée sans le son, silencieusement. Il appartiendra alors au visiteur d'activer le son s'il le désire. Il s'agit d'une pratique non intrusive et respectueuse.

Gérer l'attente de la vidéo

L'attente de la vidéo se définit par deux attributs principaux : preload et poster.

L'attribut poster de l'élément video permet de spécifier l'adresse d'une image, en général extraite du film, et qui servira d'illustration statique (en pause) en attendant le déclenchement de la lecture. Il peut ainsi être comparé à l'attribut src de la balise img.

Dans le cas, où aucun poster n'est défini ou qu'il est erroné ou introuvable, les navigateurs sont libres de gérer le remplacement. Cela peut selon les cas être un fond noir ou la première image du film en attente de lancement.

Il est implicite que le contenu du poster est un contenu représentatif de la vidéo.

L'attribut preload permettra de charger la video en arrière-plan, juste après le chargement global de l'ensemble de la page. Cet attribut n'a pas de raison d'être dans le cas d'une vidéo en autoplay. Dans les autres cas, elle permettra un gain éventuel de fluidité pour les personnes disposant d'une bande passante assez faible étant donné le temps nécessaire à chargement des fichiers vidéo en général assez lourds. Cela peut le cas échéant minimiser les saccades voire les pauses intempestives et désagréables pour l'utilisateur. En revanche, le preload chargeant le fichier vidéo occupe la bande passante et peut de fait ralentir la navigation du visiteur s'il visite plusieurs sites ou pages de votre site simultanément, voire aussi ralentir les personnes partageant la même connexion internet.

Les formulaires

Les formulaires permettent une interaction avec l'utilisateur. Ils lui permettront de saisir des données que nous pourrons ensuite traiter ou mémoriser.

Les formulaires sont constitués habituellement de plusieurs éléments :

balise form ;
balises input ;
un bouton d'envoi.

Il peut bien sûr y avoir des variantes ou d'autres éléments. Ainsi, un formulaire de base ressemblerait à ceci :

<form>
   <input type="text" />
   <input type="button" />
</form>

On remarquera que la balise form contient par habitude l'ensemble des input, même si HTML5 permet de s'affranchir de cette contrainte.

Le HTML5 révolutionne peu les balises de formulaire, en revanche il a grandement accroît le nombre de type disponible de manière à fiabiliser et faciliter les saisies.

Nouveaux types de saisies prédéfinies

Il existe donc à présent de nombreux nouveaux types qui viennent compléter les anciens types text, hidden et password, chekbox et radio. Les principaux sont :

number : pour renseigner une valeur numérique.
email : pour accueillir des adresses mails valident.
url : pour accueillir des liens hypertextes.
color : pour accueillir une couleur au format héxadécimal (exemple : #eeaaff). Certains navigateurs affichent une palette pour inviter l'internaute à sélectionner une couleur.
date : pour accueillir une date, certains navigateurs affichent un calendrier.
time : pour accueillir un horaire, certains navigateurs affichent un sélecteur.
file : pour accueillir un champ afin d'uploader un fichier.
search : pour permettre aux internautes de réaliser une recherche par mot-clé.

et bien d'autres encore...

Assistance et vérification de la saisie

La vérification des informations saisie a longtemps été un casse-tête pour les développeurs de site qui ont longtemps cherché la solution parfaite. Le W3C a donc décidé de normaliser la procédure pour assurer une plus grande fiabilité générale et éviter à chaque développeur de reperdre du temps à redévelopper une fonctionnalité aussi courante.

Placeholder

L'attribut placeholder permet de saisir une donnée d'exemple pour aider l'utilisateur à comprendre ce qu'il doit écrire. Il pourra en général automatiquement apparaître dans le champ et disparaîtra lorsque l'utilisateur cliquera dans le champ pour saisir ses propres informations.

Le placeholder ne fait pas partie du contenu du champ. Il ne remplace donc ni la valeur saisie, ni une éventuelle valeur par défait définie par l'attribut value.

<input type="text" placeholder="NOM DE FAMILLE" />

Champs obligatoires

Pour signaler les champs obligatoires, on a longtemps eu le droit aux étoiles mignonettes placées auprès du champ. Si cette méthode peut toujours être utilisée offre le défaut de reposer sur des tests personnalisés pour vérifier si le champ a été renseigné. Grâce à l'attribut required, le navigateur va tester automatiquement que le champ a été rempli avant d'envoyer le contenu du formulaire et éventuellement mettre en avant le champ si ce n'est pas le cas. Par ailleurs, l'aspect du champ requis peut être modifié en css avec la pseudo-propriété :required.

<input type="text" required />

Required est un attribut booléen aussi, s'il est omis le champ est considéré comme facultatif, c'est-à-dire n'étant pas un champ absolument nécessaire à renseigner par l'internaute.

Validation des données

La validation des contenus saisis par l'utilisateur est sans doute la plus complexe, mais aussi la plus utile. HTML intègre le moyen de valider que ce que la personne a saisi correspond à notre attente. Cela sans utiliser ni javascript, ni PHP. Cette solution est plus simple et plus rapide.

La validation des données est considérée comme activée par défaut sur une page pour les champs qui mentionnent les motifs. Pour exclure la validation, il sera possible d'utiliser l'attribut novalidate sur la balise form.

Différences en xHTML et HTML5

Il existe de nombreuses différences qui sont parfois subtiles. Certaines tiennent à :

la suppression de balises ;
la suppression d'attribut ;
la redéfinition du rôle d'un élément ;
l'apparition d'un nouvel élément ou d'un nouvel attribut ;
l'apparition de nouvelles formes syntaxiques.

Lequel choisir ?

Les 2 langages sont de la même famille et les fondamentaux restent bien sûr les mêmes, mais certains détails peuvent cependant différer. En ce qui concerne les éléments ou attributs, il faudra s'en tenir au dictionnaire correspondant au langage utilisé. En ce qui concerne la syntaxe, nous conseillons de conserver les bonnes habitudes induites par le xHTML de manière a assurer la meilleure régularité, lisibilité du code ainsi que sa complémentarité avec des parsers externes comme ceux de PHP ou python.

Globalement le code écrit à la façon xHTML est :

plus exigeant au moment de l'écriture,
plus facile à relire,
plus facile à maintenir,
compatible avec d'autres technologies telles que XSL...
et finalement, parce que plus régulier et acceptant moins d'exception, plus facile à apprendre.

Aussi, même si nous ne conseillons plus le développement de site en XHTML, il nous semble utile et profitable d'écrire un code HTML5 compatible XHTML pour les raisons mentionnées ci-dessus. Vous vous demanderez alors : pourquoi ne pas faire directement du xHTML ? parce que c'est une norme ancienne donc le vocabulaire correspond moins aux usages contemporains du web que celui du HTML5. xHTML est intéressant pour sa syntaxe. Aussi on combinant les avantages de chaque vous créerez des sites faciles à maintenir et prenant en compte les nouvelles recommandations.

Rappelons qu'il est souvent plus rapide et facile d'éviter les erreurs que de passer des dizaines de minutes à les rechercher. Rappelons enfin que le temps de débogage augmente avec l'accroissement en taille des projets.

Les principaux changements

doctype

Le doctype HTML5 est largement simplifié :

<!DOCTYPE html>

xHTML en possédait 3 mais tous de ce type bien long :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

casse

En HTML5, la casse des balises n'est plus stricte alors qu'elle l'était en xHTML. Ainsi,

<span id="ref">Mon fichier</SPAN>

<spAn id="ref">Mon fichier</spAN>

sont normalement supportés en HTML5 alors qu'il aurait fallu écrire

 <span id="ref">Mon fichier</span>

 <SPAN id="ref">Mon fichier</SPAN>

en xHTML soit exactement la même écriture en balise ouvrante et fermante.

Nous conseillons la rigueur et de tenter de conserver l'écriture stricte à la casse.

Fermeture de balises implicites

le HTML5 autorise l'omission de la balise fermante lorsqu'il n'y a pas de doutes sur sa position. Ainsi on pourra écrire :

<ul>
   <li>menu1
   <li>menu2
</ul>

là où en xHTML il aurait fallu strictement écrire :

<ul>
   <li>menu1</li>
   <li>menu2</li>
</ul>

Le développeur ou l'intégrateur web adoptant la démarche avec fermeture implicite laisse donc au navigateur le choix d'interpréter la position des fermetures de balises. Le W3C tente d'en préciser les règles mais on sait ce qu'il en est des implémentations douteuses. Nous conseillons une fois encore la préservation d'une écriture contrôlée par le développeur.

De plus, l'omission ne peut être universelle, par exemple ici :

<p>je commence un paragraphe <em>pour l'exemple mais quand l'emphase se termine-t-elle ?</p>

Il nous semble plus compliquer de se poser la question à chaque fois (dois-je fermer la balise ou pas ?) que de se forcer à systématiquement fermer, et surtout plus sûr au final.

Au niveau des attributs

En HTML5, il est permis de ne pas encadrer les attributs par des guillemets <strong>quand ceux-ci ne sont pas utiles</strong>. Une fois encore, il s'agit de laisser de la marge au navigateur. Ainsi au lieu d'écrire

 <h1 id="titre">grand titre</h1>

en xHTML, on peut écrire

 <h1 id=titre>grand titre</h1>

en HTML5. Cela posant parfois des soucis en cas de valeurs multiples par exemple :

 <p class=note footer>1. une petite note</p>

au lieu de

<p class="note footer">1. une petite note</p>

plus fiable car on est alors certain que footer ne sera pas interprété comme un attribut, les guillemets indiquant clairement son statut de valeur.

Concernant, les attributs, HTML5 apporte la possibilité d'ignorer la valeur dans le cas des attributs booléens, c'est-à-dire ceux qui n'ont que 2 valeurs possibles. Ces attributs étaient assez peu fréquent en xHTML mais plusieurs ont été ajoutés dans le HTML5 en compléments des nouvelles définitions de formulaires ainsi que des nouveaux éléments multimédias.

Ainsi, en HTML5, il est possible d'écrire

<audio src="musique.mp3" controls />

<audio src="music.mp3" controls="controls" />

Dans ce cas, l'apport de HTML5 nous semble intéressant : si l'attribut est mentionné c'est que le navigateur doit considérer sa propriété comme activée, sinon, elle doit être désactivée.

Les nouvelles balises et attributs

De tous les changements, ce sont ceux qui au début ont le plus attirer l'attention. Les nouvelles balises tentent de faciliter :

l'insertion d'éléments multimédia qui été peu utilisé au moment de la création du xHTML à cause des débits trop faible de l'époque ;
la prise en charge des nouveaux supports du web tels que téléphones ou tablettes pour faciliter l'affichage ou la saisie ;
augmenter la structuration de l'information dans la page de manière à en faciliter le référencement ou la lecture par des nouveaux outils comme les synthèses vocales.

Il y a de nombreuses nouvelles balises listées en fin d'ouvrage. Certaines sont sûr de persister (audio, vidéo, section, articles...) d'autres manquent encore d'implémentation dans les navigateurs et pourraient être abandonnées.

Voici une petite liste des principaux nouveaux éléments :

audio, video, articles, section, main, nav, header, footer, aside ...

Happy les API

Plus poussé et sortant du cadre de l'intégration pour rentrer dans le développement web, la recommandation HTML5 fait l'effort d'améliorer l'intégration des différentes technologies du web : ainsi SVG ou mathml qui dormaient dans les placards depuis 10 ans se sont soudain réveillés dans l'esprit des intégrateurs.

Mais aussi, la recommandation définit comment Ecmascript (et javascript) doit pouvoir accéder aux éléments de manière à standardiser la façon dont les navigateurs vont les gérer, facilitant a priori le travail des développeurs et la fiabilité des sites. Cela apporte au passage quelques possibilités comme :

la géolocalisation,
le stockage de données sur client,
le canvas pour le dessin dans la page...

Les évolutions entre xHTML et HTML5 sont donc assez nombreuses, même si les bases changent peu. faire un site vraiment HTML5 et en exploitant les possibilités change largement la nature du travail qui exigera maintenant un effort encore plus important de structuration de contenu et d'intégration en prenant beaucoup plus en compte les problématiques d'ergonomie et d'efficacité.

Introduction

Les auteurs

Ce qui sera et ne sera pas dans ce livre

Présentation

Prise en main

Un premier fichier HTML

Utiliser des balises

Règle d'imbrication

Balises atomiques

Utiliser des attributs

Définition et utilisation d'attributs

Utilisation des attributs

La permissivité du HTML5

Suppression des guillemets d'attributs

Omission de la valeur

Le doctype et l'élément racine

Le doctype

L'élément racine html

L'en-tête et le corps

La balise title

La balise Link

Encodage de caractère

Les autres balises <meta …>

Les balises meta http-equiv

Les balises meta name

Balise meta http-equiv ou balise meta name ?

Autres balises meta possible

Le statut particulier de la balise meta keyword

Référencement et SEO

Structure de l'information

header

Nous rencontrer

S'inscrire

nav

Nous rencontrer

S'inscrire

Nous rencontrer

S'inscrire

main

Nous rencontrer

S'inscrire

section

Nous rencontrer

S'inscrire

article

Rencontrer des martiens

Nous rencontrer sur le web

Nous rencontrer en chair

S'inscrire

aside

Rencontrer des martiens

Nous rencontrer sur le web

Nous rencontrer en chair

S'inscrire

footer

Rencontrer des martiens

Nous rencontrer sur le web

Nous rencontrer en chair

S'inscrire

Structure du texte

Balises sémantiques de structuration

Balises pour mettre en forme le texte structuré

Les titres à la nouvelle sauce

gras (b) et italique (i) sont bannis et span

Citation et balises spécifiques

Mettre en évidence des contenus spécifiques avec time ou data

Dates avec time

Affichage de code informatique samp, code, kbd ou var

Mise en avant de données personnalisées avec l'élément data

Listes

Liste à puce et liste numérotée

La liste à puce ul

La liste numérotée ol

Spécifier la valeur initiale de la numérotation avec start

Les listes imbriquées

Les listes de définition

Tableaux

Tableaux et mise en page

Décrire un tableau

Définir les titres de colonnes