Initiation à HTML5

Ce document a été initié par Cédric Gémy sur la base d'un document premièrement réalisé en 2001 dans le cadre d'un enseignement dispensé à l'Université de Rennes 2 et de formations professionnelles en entreprise. Cependant, de nombreuses modifications ont été apportées de manière à ce qu'il soit cohérent par rapport aux évolutions du langage.

L'objectif de ce livre sera donc de fournir les bases de compréhension et d'utilisation du langage HTML, particulièrement sa version 5, de manière à permettre une intégration web cohérente, de qualité, correspondant au maximum aux recommandations techniques. Nous nous concentrerons ici sur le côté communicationnel et le contenu. Nous verrons les bases du langage, la structuration des pages, aurons une approche sémantique et verrons la majorité des balises courantes qui permettent d'organiser correctement la page.

Nous ne traiterons pas des problématiques spécifiques liées à l'interactivité. Ainsi les possibilités de glisser-déposer, de gestion de base de données, de géolocalisation ou dessin grâce à la balise Canvas ne seront pas montrées ici, car elles nécessitent des connaissances particulières en JavaScript plus ou moins importantes selon les cas. Elles reposent donc sur des compétences qui ne sont pas celles de l'auteur de contenu ou même de l'intégrateur. Un autre ouvrage s'occupera de ce sujet et nous vous invitons à continuer votre lecture si cela vous attire ou vous est nécessaire.

Comme des paragraphes seront inclus dans des articles et des articles dans des sections, etc., il sera important de respecter cette hiérarchie dans le code. Ainsi, toute balise ouverte après une autre et devant y être incluse doit absolument être fermée avant, de manière à éviter les erreurs de compréhension.

<element1><element2> contenu </element2></element1>

À l'inverse, certains éléments de la page n'ont pas d'étendue à définir. C'est le cas des retours à la ligne ou encore des images qui ont leur dimension en propre. Dans ce cas, il est possible d'utiliser une notation particulière :

<element />

Dans les cas qui nous intéressent, nous aurons donc :

• <br /> pour un retour à la ligne ;
• <img /> pour une image.

Si vous essayez ce dernier cas sur votre page HTML, vous verrez qu'aucune image ne s'affiche dans 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.

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étails, 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 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…

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

VI-C-1. Suppression des guillemets d'attributs▲

VI-C-2. Omission de la valeur▲

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

Il est essentiel que chaque page HTML soit renseignée par un doctype. Tout fichier HTML commence par une déclaration du doctype. Il a pour rôle d'indiquer au navigateur de quel type de HTML le fichier est déclaré. Concernant le HTML5, le doctype à déclarer est :

<!doctype html>

Ce doctype doit être inséré en début de chaque page HTML du site, et doit se trouver sur la première ligne du fichier.

Pour rappel, le doctype XHTML est le suivant :

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

Concernant la page HTML, tout contenu et toute balise doivent être intégrés dans une balise principale. La règle d'imbrication fera le reste.

L'élément HTML devra donc apparaître juste après le doctype et sera fermé en toute fin de fichier, après l'ensemble du contenu.

<!doctype html> 
<html>
... tout le contenu ici ...
</html>

Ensuite, renseignez la langue de la page. Cette information est utile aussi bien pour le navigateur que pour les moteurs de recherche, sans oublier la bonne pratique de l'accessibilité du web aux handicaps. En effet, les navigateurs vocaux se basent sur cette information pour lire avec le bon accent et le bon langage la page. Avez-vous déjà écouté un site français avec un lecteur vocal configuré en anglais ? Affreux !

<!doctype html> 
<html lang='fr'>... tout le contenu ici ...
</html>

Vous êtes maintenant prêt pour intégrer le head de votre page Internet.

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 pages 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 sert à relier le HTML à sa feuille de style CSS ou à d'autres documents externes qui seront utilisés 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.

<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ères utilisé sur ce site Internet parmi des centaines existant ? Aidez-le en l'informant.

Les balises meta 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.

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

Les balises 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ées pour des cas précis :

• generator <meta name=''generator'' content=''Nom de l'outil - version'' />, elle renseigne sur l'outil qui a aidé à réaliser 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 certain de son actualisation.

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.

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ésentes 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ésents 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 à 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 happer 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ésentes sur votre page peuvent être affichées 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/).

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.

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-le donc ;
• 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 mots-clés pertinents adaptés à la page HTML. Plus il y a de mots-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ée 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 !

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 :

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 depuis une sorte de table des matières placée en début d'article ;
• 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 :

Et avec un peu de mise en forme CSS :

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 :

1. Main devrait être unique dans une page web ;
2. Main devrait être unique à une page web ;
3. 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 :

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.

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 sectionsque nécessaire dans la page et elles peuvent être réparties 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 :

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.

L'élément article est un autre élément de groupage de contenu, au même titre que main ou section. En principe, là où 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 sections, 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 remplacé une section par un article qui regroupe à présent deux 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.

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 forme 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 partie 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érence au même contenu et sont donc placés en conséquence dans le flux de contenu.

Enfin, footer est le dernier élément sémantique introduit dans HTML5. Il est équivalent au header, mais sera en général placé en fin de section parente même si rien ne 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 partie du cercle des saturniens sur <a href="#">Saturn Ring</a>.</p>
  </aside>
  <footer>Mentions légales - contact@mars.mrs  - 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 un pied de page contenant les informations générales sur le site.

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

• header : permet 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 ces 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 voit ici une donnée fondamentale du HTML5 par rapport aux 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.

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 :

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 va pas 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.

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 la mise en évidence de texte dans le texte comme il pourrait être fait avec strong ou em.

Attention cependant à la confusion venant 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. Celui-ci est sans mise en forme, ce qui implique qu'il sera utilisé pour placer un attribut spécifique ou associer une classe CSS.

À 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 » :

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

X-E-1. Dates avec time▲

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

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

X-E-2. 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 été placés dans le code alors qu'ils sont normalement non interprétés en HTML.

 

Sélectionnez

<pre>

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



Avec un vide i   c   i.
</pre>

Ce qui rend :

Alors qu'avec p, cela donnerait :

ou avec samp:

Ou encore code :

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

X-E-3. Mise en avant de données personnalisées avec l'élément data▲

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

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.

XI-A-1. La liste à puce ul▲

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

XI-A-2. La liste numérotée ol▲

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

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

XI-A-3. Spécifier la valeur initiale de la numérotation avec start▲

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

XI-A-4. Les listes imbriquées▲

<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>

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>Œuvre 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

Œuvre 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>Œuvre 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

Œuvre 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.

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 trois 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 termes de structuration de la page, qu'en termes 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 être 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 balises 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 produits 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.

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>

Une fois le tableau mis en place, on peut alors 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 à en 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 balises de fermeture pour les thead, th et les tr.

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 livres 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 forts 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.

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'en-tê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 :

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 :

Pour arriver à ce résultat, nous avons :

1. Ajouté l'attribut colspan à la première cellule à fusionner ;
2. Attribué la valeur 2 à cet attribut pour indiquer le nombre de cellules à modifier ;
3. Supprimé 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, soit 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 ajoutées 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 :

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

1. Déplacement du texte Titre livre dans la première ligne d'en-tête ;
2. Ajout de l'attribut rowspan ;
3. 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.

Les liens reposent sur l'utilisation de l'élément à combiner à l'attribut href qui détermine la cible du lien, c'est-à-dire la page vers laquelle on souhaite faire aller le visiteur. Cela prend la forme suivante :

<a href="/initiation-html5/nom_de_page_ou_site">Texte du lien</a>

« Texte du lien » est le texte qui s'affiche par défaut en bleu et souligné sur lequel la personne pourra cliquer. Il est habituel de changer la couleur des liens grâce au CSS.

Il est aussi possible de faire des liens sur des images de la même façon. Dans ce cas, la balise d'image sera juste insérée en tant que contenu de la balise a :

<a href="/initiation-html5/nom_de_page_ou_site"><img src="mon_image.jpeg" alt="Vers mon site" /></a>

En HTML5, l'attribut name de l'élément a est déclaré obsolète. L'attribut id prend maintenant sa place pour servir de référence à l'élément à rejoindre. Pour référencer cet élément comme destination du lien, il faudra le noter en valeur de l'attribut href précédé d'un #. Par exemple, pour un élément :

<p id="note1">Ceci est une note importante</p>

on pourra y accéder par le lien :

<a href="#note1">Voir note</a>

Si l'emplacement à rejoindre est dans une autre page HTML, il suffira de l'ajouter de la même façon à la suite de l'URL :

<a href="annexes.html#note1">Voir note</a>

Le lien étant un élément très important d'une page web, il nous semble important de soigner son contenu. Pour cela, le contenu de l'attribut href par le biais d'une URL bien choisie et d'un texte de lien partant de la même racine peut être secondé par d'autres attributs renseignant sur le rôle du lien et la façon dont il doit être traité.

hreflang : renseigne sur la langue de la page de destination. Cela peut être important dans le cas d'un site multilingue et éventuellement pour un traitement en feuille de style. Ils prennent la forme langue-pays comme dans fr-FR (français de France), fr-BE (français belge), en-GB (anglais de Grande-Bretagne).

media : plus difficile que la précédente, permet de définir pour quel type de media la page liée est conçue, tel que défini dans la section media Queries.

download : si cet attribut est présent, alors la destination du lien est considérée comme étant un élément à télécharger.

rel : De ce côté, l'attribut rel permet de définir quel est le rôle du fichier lié par rapport au fichier actuel. Il peut posséder une valeur textuelle, mais quelques valeurs par défaut sont proposées pour normaliser les référents : alternate, author, bookmark, help, icon, license, next, prev, nofollow, noreferrer, prefetch, stylesheet, tag, search.

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èrement utilisée pour les trois premiers 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 et 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.

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 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 :

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

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/ecrire/initiation-inkscape/
• manuel SVG : http://fr.flossmanuals.net/ecrire/SVG/

XIV-C-1. 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.

XIV-C-1-a. 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 :

 

Sélectionnez

<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.

XIV-C-1-a-i. 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 la 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.

 

Sélectionnez

<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érieure. 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.

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 !

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 traînent à 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 traînent à 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éos H.264 placées 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=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'implémentation des contrôles est propre à chaque navigateur. Les boutons disponibles ainsi que leur aspect peuvent donc différer.

Autoplay : permet de lancer la vidéo dès le chargement de la page. Cette pratique est largement utilisée dans les publicités, mais moins pour le contenu. En effet, on préférera 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.

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 vidéo 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 au chargement des fichiers vidéo en général assez lourd. 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 ralentir les personnes partageant la même connexion Internet.

Vous voilà dans votre fragment HTML. Placez-vous à l'endroit où vous désirez que le morceau audio apparaisse.

Codez par exemple :

<audio src="audio/Suite_Espanola_Op_47_Leyenda.mp3" width="100" />

Que se passe-t-il ici ? Rien de très particulier. L'élément audio permet d'ajouter le son et l'attribut src de spécifier le fichier à jouer. Ce fichier audio doit ici être placé dans un sous-dossier audio du fichier courant. Il est possible de passer des adresses URL complètes si les serveurs acceptent la diffusion des sons.

Notons que width définit la largeur de la fenêtre audio qui sera présente et que controls permet l'affichage des boutons de lancement et d'arrêt de la lecture de son. Voici un petit exemple :

<audio id="audio1" src="http://freedownloads.last.fm/download/466248492/Aperture.mp3"  width="200px" controls ></audio>

Ce qui donne ici le résultat suivant :

Il est important d'avoir à l'esprit que l'aspect des boutons de contrôle est propre à chaque navigateur.

sur safari

sur chrome

Comme pour le fichier vidéo, il est possible d'utiliser le sous-élément source pour fournir au navigateur plusieurs formats au choix.

<audio id="audio1" >
    <source src="http://freedownloads.last.fm/download/466248492/Aperture.mp3"  width="200px" controls />
</audio>

Le résultat sera identique dans les deux cas, sauf que le navigateur utilisera la source qu'il préfère s'il y en a plusieurs.

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

controls : affiche les barres de navigation dans le son avec entre autres une barre temporelle et un bouton lecture/pause. L'implémentation des contrôles est propre à chaque navigateur. Les boutons disponibles ainsi que leur aspect peuvent donc différer.

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

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

Fournir un contenu ou message de remplacement pour le cas où votre élément multimédia ne serait pas chargé peut s'avérer important afin de montrer à l'internaute qu'il n'a pas accès à une partie de l'information.

Le principe est d'ouvrir la balise audio ou vidéo et d'y insérer des balises contenant textes ou images qui s'afficheront en cas de problème.

<video id="video3" controls="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"/>
     <div class="errmsg">
                        <p>Une vidéo ne peut être affichée</p>
     </div>
</vidéo>

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 valides ;
• url : pour accueillir des liens hypertextes ;
• color : pour accueillir une couleur au format hexadé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…

La vérification des informations saisies 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.

XVIII-B-1. Placeholder▲

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

XVIII-B-2. Champs obligatoires▲

<input type="text" required />

XVIII-B-3. Validation des données▲

Les deux 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 à assurer la meilleure régularité, la 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 En combinant les avantages de chacun, 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.

XIX-B-1. doctype▲

<!DOCTYPE html>

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

XIX-B-2. casse▲

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

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

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

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

XIX-B-3. Fermeture de balises implicites▲

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

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

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

XIX-B-4. Au niveau des attributs▲

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

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

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

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

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

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

XIX-B-5. Les nouvelles balises et attributs▲

XIX-B-6. Happy les API▲