IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Initiation à HTML5

Le HTML est le langage bien célèbre du web. Il est la base constitutive de toutes les pages web qui existent. C'est un peu grâce à lui que le réseau des réseaux s'est développé publiquement. Car le HTML est un langage très simple qui permet à chacun, moyennant quelques petites heures d'apprentissage, de diffuser des documents au monde entier. On n'a en fait pas encore trouvé plus simple, et les langages ressemblant à HTML se sont multipliés comme la peste, mais pour le bonheur de nombreuses personnes.

Commentez Donner une note à l´article (5)

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Le HTML est le langage bien célèbre du web. Il est la base constitutive de toutes les pages web qui existent. C'est un peu grâce à lui que le réseau des réseaux s'est développé publiquement. Car le HTML est un langage très simple qui permet à chacun, moyennant quelques petites heures d'apprentissage, de diffuser des documents au monde entier. On n'a en fait pas encore trouvé plus simple, et les langages ressemblant à HTML se sont multipliés comme la peste, mais pour le bonheur de nombreuses personnes.

Si HTML a pu sembler abscons à certains, il a montré de réelles capacités au fil du temps. Il a évolué jusqu'à aboutir à la version 5 qui fait beaucoup parler d'elle. HTML a été complété par d'autres technologies comme CSS, qui permet de gérer l'aspect graphique de la page, ou encore SVG pour les images vectorielles. HTML et CSS sont sans conteste les plus utilisées par toutes les personnes qui font de l'édition électronique, quelle qu'en soit la forme.

I-A. Les auteurs

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.

I-B. Ce qui sera et ne sera pas dans ce livre

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.

II. Présentation

HTML est une abréviation de Hypertext Markup Language. Peu de choses à dire sur le mot « langage », si ce n'est que cela ne doit pas vous effrayer, car à part deux ou trois règles grammaticales, le reste du HTML consiste en un petit vocabulaire. Il vous suffira donc de comprendre son fonctionnement et de conserver sous les yeux le dictionnaire HTML, et le tour est joué (vous pouvez trouver la référence du langage HTML sur le site du W3C). Lorsque vous aurez assimilé la notion de balise « Markup » et ce que cela implique, vous saurez en fait quasiment tout. Il ne vous restera plus qu'à comprendre pourquoi l'hypertexte est si important, et pourquoi sa place et son rôle inspirent de nombreuses autres technologies. Alors, vous serez incollables.

HTML est basé sur une technologie nommée XML (extensible markup language) qui a défini les impératifs syntaxiques. Sur cette base, le HTML rajoute quelques termes qui permettent de structurer le texte pour les titres, les paragraphes, les listes…

Le HTML a évolué au fil du temps, mais les deux versions encore à l'utilisation sont :

  • le XHTML, paru en 1999 ;
  • le HTML5 qui se développe depuis 2010, même si certaines parties de la recommandation sont encore en phase de discussion à ce jour.

Le HTML dont nous parlerons ici est le HTML5. Nous adopterons ainsi les nouvelles balises sémantiques qui y sont intégrées comme nav, header, main, footer, article, section… Mais nous utiliserons la syntaxe stricte du xHRML pour en augmenter la compatibilité et gagner en rigueur, en particulier pour réexploiter éventuellement notre code HTML en association avec du PHP ou du JavaScript.

III. Prise en main

Ce chapitre et les deux suivants ont pour but de nous donner les bases théoriques qui seront implicitement exploitées dans les chapitres d'après de l'ouvrage. Il va poser quelques notions essentielles et permettre l'acquisition :

  • de la grammaire HTML ;
  • de la terminologie HTML ;
  • des éléments de syntaxes utilisés ;
  • la création de fichiers HTML à l'aide d'un éditeur simple.

IV. Un premier fichier HTML

Pour comprendre la logique, voyons le fonctionnement du HTML en propre.

  1. Lancer l'éditeur de texte de votre choix. Selon votre système d'exploitation Sublime Text, Smultron, TextWrangler, Notepad++ ou Gedit, Kate feront l'affaire ;
  2. Lancer le navigateur de votre choix, à ce niveau, le choix importe peu ;
  3. Organiser votre espace de travail à ce que le navigateur et l'éditeur soient tous deux facilement accessibles ;
  4. Dans votre éditeur, tapez le texte suivant : « Mon premier fichier HTML » ou tout autre texte que vous souhaitez inscrire ;
  5. Dans le menu Fichier, allez chercher Enregistrer sous …
  6. Donnez le nom que vous souhaitez à votre fichier, mais rajoutez à la fin .html (par exemple « essai.html » ou « index.html ») ;
  7. Utilisez le menu Ouvrir de votre navigateur pour afficher votre page HTML : votre contenu apparaît simplement sans autre fioriture…

Voilà une bonne base, mais nous sommes loin du compte. Il va falloir structurer le texte, modifier son aspect, positionner des images… Bref, travailler la mise en forme. Dans ce cas, comment faire ?

Note : utiliser le nom index.html pour le premier fichier d'un site ou d'un dossier web est une bonne pratique, car c'est le fichier ouvert par défaut par le navigateur. Ainsi, lorsque vous écrivez l'adresse http://fr.flossmanuals.net, ce que le couple navigateur-serveur va en fait afficher est http://fr.flossmanuals.net/index.html (ou php si le site est programmé en ce langage).

V. Utiliser des balises

Le terme balise définit un des concepts de base du HTML. La balise, c'est la structure même du langage. Heureusement, dans ce langage que nous étudions, cette structure est simple et c'est bien sûr cela qui a fait son succès. Voyons cela :

  • retournez dans votre éditeur pour continuer à travailler sur « essai.html » ;
  • ajoutez <b> après « Mon premier » et </b> après « HTML ». Nous devons donc obtenir quelque chose qui ressemble à cela :

     
    Sélectionnez
    Mon premier <b>fichier HTML</b>
  • enregistrez votre fichier et affichez-le dans votre navigateur en cliquant simplement sur le bouton Recharger ou Actualiser.

Après cette petite modification, votre texte s'affiche toujours, mais il apparaît maintenant en gras. Comment cela se passe ? Dans un premier temps, le navigateur récupère votre page. Il va alors à l'intérieur du fichier pour voir ce qu'il contient. Il le lit de haut en bas, et l'affiche. Mais parfois, il rencontre le caractère < : à ce moment il sait que quelque chose de nouveau se passe et que dans ce qui suit-il ne va pas tout afficher. Il récupère alors ce qui est écrit entre < et > et comprend que cela va lui servir de base pour modifier l'apparence de ce qu'il doit afficher. Les chevrons < et > servent donc à délimiter un ensemble de signification lié à la présentation des données. Passer ce premier cap, il affiche le texte. Avançant, le navigateur rencontre ensuite </b>, et comprend alors que le graissage se termine ici.

Note : la balise b affiche le texte en gras, mais il ne faudrait dans le principe pas associer cette balise à cet aspect, car celui-ci peut être facilement complètement modifié grâce au CSS.

Comme une grande partie des mises en forme ont un début et une fin (ce que l'on fait dans un logiciel avec une sélection), nous représentons cela en HTML avec une balise double.

 
Sélectionnez
<element> contenu </element>

Les deux balises s'écrivent de la même façon, la seconde commence juste par un / placé immédiatement après le chevron d'ouverture. Cela fonctionne pour la grande majorité des balises disponibles. Ainsi, comme <b>Texte</b> mettra en gras, <i>Texte</i> mettra en italique ou <h1>Texte</h1> définira un grand titre. On voit bien que le principe est le même, il s'agit seulement d'avoir en tête les quelques balises utiles. On peut avoir la liste complète sur la liste du W3C http://dev.w3.org/html5/spec/single-page.html#elements-1, mais voici les principales :

  • du h1 au h6 : les niveaux de titre du plus grand au plus petit ;
  • p : paragraphe ;
  • span : début d'une mise en forme locale ;
  • header : définit un en-tête ;
  • article : encadre un article.

Une modification apportée par le HTML5 autorise l'utilisation de balise ouvrante seule lorsque le contexte exclut toute confusion. Cette pratique peut cependant poser problème avec les parseurs PHP ou DOM. Nous conseillons donc d'avoir recours, pour l'heure, à la règle stricte qui consiste à fermer toute balise ouverte.

V-A. Règle d'imbrication

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.

 
Sélectionnez
<element1><element2> contenu </element2></element1>

V-B. Balises atomiques

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

 
Sélectionnez
<element />

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

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

VI. Utiliser des attributs

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

VI-A. Définition et utilisation d'attributs

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.

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

 
Sélectionnez
<element attribut1="valeur"> contenu </element>

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

 
Sélectionnez
<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 :

 
Sélectionnez
<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 :

 
Sélectionnez
<element attribut1="valeur" attribut2="valeur"> contenu </element>

Comme dans :

 
Sélectionnez
<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

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

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

VI-C-2. 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 deux valeurs possibles. C'est le cas par exemple de l'attribut autoplay de l'élément vidéo 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.

 
Sélectionnez
<vidéo 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.

VII. Le doctype et l'élément racine

Dans le HTML comme dans tout langage, certains éléments sont plus fondamentaux que d'autres. Ici, considérons le doctype et l'élément racine comme tels, même s'ils n'ont pas d'impact direct sur ce que verra le visiteur du site.

VII-A. Le doctype

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 :

 
Sélectionnez
<!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 :

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

VII-B. L'élément racine HTML

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.

 
Sélectionnez
<!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 !

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

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

VIII. L'en-tête et le corps

La page HTML se répartit 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, tels que Google. Il est donc important de bien le rédiger.

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

 
Sélectionnez
<head></head>

Le body (corps) se place entre les balises :

 
Sélectionnez
<body></body>

Le fichier obtenu est donc a minima :

 
Sélectionnez
<!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 long 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.

VIII-A. 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 pages peut donc entraîner une difficulté pour le visiteur et les moteurs de recherche prennent aussi en compte cette spécificité.

 
Sélectionnez
<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 :

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

VIII-B. La balise Link

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.

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

Lier une favicon :

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

Lier un flux RSS:

 
Sélectionnez
<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.

VIII-C. Encodage de caractères

 
Sélectionnez
<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.

VIII-D. Les autres balises <meta …>

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.

VIII-E. Les balises meta http-equiv

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

VIII-F. Les balises meta name

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.

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

VIII-H. 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 :

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 :

 
Sélectionnez
<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

 
Sélectionnez
<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.

 
Sélectionnez
<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.

 
Sélectionnez
<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/).

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

VIII-J. 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-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 !

IX. 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 n'est pas toujours la plus facile. 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.

IX-A. 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 :

 
Sélectionnez
<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"></a> illico. Et devenez nos amis.</p>
</body>

Ce qui affichera le résultat :

Image non disponible

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

 
Sélectionnez
<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"></a> illico. Et devenez nos amis.</p>
</body>

Cela permettra d'arriver au résultat :

Image non disponible

Et avec un peu de mise en forme CSS :

Image non disponible

IX-C. 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 :

  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 :

 
Sélectionnez
<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"></a> illico. Et devenez nos amis.</p>
   </main>
</body>

Cela permettra d'arriver au résultat :

Image non disponible

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.

IX-D. 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 sectionsque nécessaire dans la page et elles peuvent être réparties dans divers emplacements et divers éléments parents.

 
Sélectionnez
<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"></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 :

Image non disponible

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.

IX-E. 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à 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.

 
Sélectionnez
<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"></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.

Image non disponible

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

 
Sélectionnez
<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"></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.

Image non disponible

IX-G. footer

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.

 
Sélectionnez
<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"></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.

Image non disponible

X. Structure du texte

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

X-A. Balises sémantiques de structuration

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

 
Sélectionnez
<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.

X-B. 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 :

 
Sélectionnez
<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 :

Image non disponible

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.

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

X-D. Citation et balises spécifiques

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

 
Sélectionnez
<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 » :

Image non disponible

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

X-E-1. 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 :

 
Sélectionnez
<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 :

 
Sélectionnez
<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 :

Image non disponible

Alors qu'avec p, cela donnerait :

Image non disponible

ou avec samp:

Image non disponible

Ou encore code :

Image non disponible

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

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 :

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

XI. Listes

Les listes, si elles sont peu fréquentes 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 ;
  • celui qui définit chaque objet énuméré.

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

XI-A-1. 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'a pas d'importance particulière.

 
Sélectionnez
<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.

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

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

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

Et affiche :

  1. Germinal
  2. Du contrat social
  3. 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 :

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

Et affiche :

  1. Germinal
  2. Du contrat social
  3. Les misérables

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

XI-A-3. 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.

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

Et affiche :

  1. Germinal
  2. Du contrat social
  3. Les misérables

L'attribut Start de ul et ol permet 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.

XI-A-4. 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 les menus de navigation.

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

 
Sélectionnez
<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 :

  1. Germinal
  2. Du contrat social
  3. 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.

XI-B. 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 :

 
Sélectionnez
<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 :

 
Sélectionnez
<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.

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

 
Sélectionnez
<table>
</table>

XII-A. 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 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).

 
Sélectionnez
<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.

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

 
Sélectionnez
<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>

XII-C. Définir les titres de colonnes

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.
 
Sélectionnez
<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 :

 
Sélectionnez
<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.

XII-D. 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 livres en vente qui pourrait se présenter sous la forme :

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

va maintenant devenir :

 
Sélectionnez
<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.

XII-E. 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'en-tête qui regroupera Téléchargeable et Prix sous une colonne générale En Vente.

 
Sélectionnez
<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 :

Image non disponible

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 :

 
Sélectionnez
<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 :

Image non disponible

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 :

 
Sélectionnez
<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 :

Image non disponible

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.

XIII. Naviguer grâce aux liens

Les liens sont des éléments essentiels de la page web. Ils permettent de passer d'une page à l'autre ou d'aller à un endroit de la même ou d'une autre page, voire de rediriger vers un site externe ou un fichier à télécharger. Sans lien, pas de web.

XIII-A. Liens entre pages

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 :

 
Sélectionnez
<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 :

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

XIII-B. Lien vers des ancres nommées

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 :

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

on pourra y accéder par le lien :

 
Sélectionnez
<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 :

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

XIII-C. Autres attributs intéressants

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.

XIV. Ajouter des images

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

XIV-A. 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 :

 
Sélectionnez
<img src=« chemin/nomImage » alt=« Texte alternatif » title=« Titre » />

Par exemple :

 
Sélectionnez
<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.

XIV-B. 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 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 :

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

Ce qui donnera :

Image non disponible

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

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

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.

Image non disponible

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

Image non disponible

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

Image non disponible

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

 
Sélectionnez
<vidéo src="#/video/sintel_trailer-480p.mp4" controls width="320" height="240"/>

L'élément vidéo 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 :

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

 
Sélectionnez
<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.

XV-B. 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'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.

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

XVI. Audio et HTML5

L'ajout de son dans les pages web n'est pas nouveau. Il n'y a cependant jusqu'ici pas de solution officielle. La plupart des anciennes pratiques reposaient sur des codes JavaScript ou des programmes Flash qui n'étaient pas universels. HTML5 apporte alors le support natif par le navigateur à l'aide de la compréhension d'un élément et de quelques attributs simples.

XVI-A. Ajouter de l'audio en codant

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

Codez par exemple :

 
Sélectionnez
<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 :

 
Sélectionnez
<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.

Image non disponible sur safari

Image non disponible 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.

 
Sélectionnez
<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.

XVI-B. Contrôler le son en HTML5

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.

XVII. Fallbacks

XVII-A. Fallbacks et messages

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.

 
Sélectionnez
<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>

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

 
Sélectionnez
<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 accru le nombre de types disponibles de manière à fiabiliser et faciliter les saisies.

XVIII-A. 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 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…

XVIII-B. Assistance et vérification de la saisie

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

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éfaut définie par l'attribut value.

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

XVIII-B-2. Champs obligatoires

Pour signaler les champs obligatoires, on a longtemps eu le droit aux étoiles mignonnettes placées auprès du champ. Si cette méthode peut toujours être utilisée, elle 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.

 
Sélectionnez
<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.

XVIII-B-3. 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.

XIX. 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'attributs ;
  • 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.

XIX-A. Lequel choisir ?

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. Les principaux changements

XIX-B-1. doctype

Le doctype HTML5 est largement simplifié :

 
Sélectionnez
<!DOCTYPE html>

XHTML en possédait trois mais tous de ce type bien long :

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

XIX-B-2. casse

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

 
Sélectionnez
<span id="ref">Mon fichier</SPAN>

ou

 
Sélectionnez
<spAn id="ref">Mon fichier</spAN>

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

 
Sélectionnez
<span id="ref">Mon fichier</span>

ou

 
Sélectionnez
<SPAN id="ref">Mon fichier</SPAN>

En XHTML, soit exactement la même écriture en balises ouvrante et fermante.

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

XIX-B-3. 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 :

 
Sélectionnez
<ul>
   <li>menu1
   <li>menu2
</ul>

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

 
Sélectionnez
<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 :

 
Sélectionnez
<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 finalement.

XIX-B-4. 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

 
Sélectionnez
<h1 id="titre">grand titre</h1>

en XHTML, on peut écrire

 
Sélectionnez
<h1 id=titre>grand titre</h1>

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

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

au lieu de

 
Sélectionnez
<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 deux valeurs possibles. Ces attributs étaient assez peu fréquents en XHTML, mais plusieurs ont été ajoutés dans le HTML5 en complément des nouvelles définitions de formulaires ainsi que des nouveaux éléments multimédias.

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

 
Sélectionnez
<audio src="musique.mp3" controls />

ou

 
Sélectionnez
<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.

XIX-B-5. Les nouvelles balises et attributs

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

  • l'insertion d'éléments multimédia qui a été peu utilisée au moment de la création du XHTML à cause des débits trop faibles 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ûres 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 …

XIX-B-6. Happy les API

Plus poussée 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 canevas 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é.

XX. Remerciements

Ce manuel vous est offert par Floss Manuals.

Je remercie également ced pour sa relecture attentive et assidue.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Licence Creative Commons
Le contenu de cet article est rédigé par flossmanuals et est mis à disposition selon les termes de la Licence Creative Commons Attribution 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2013 Developpez.com.