HTML modulaire

Spécifications pour une page HTML structuré

Sommaire

Les éléments

Définition d'une structure de page

Le HTML ne fournissait jusqu'à présent que de l'information d'affichage et non de structure. Grâce à la modification graphique, l'oeil humain est capable de repérer la structure de l'information, sans pour autant qu'elle ne transparaisse dans le code. Ces dernières années, l'évolution du HTML s'est orientée vers la structuration de l'information.

Cependant, le HTML 5 introduit plus que jamais la spécialisation de l'information afin de lui donner une signification plus large, non seulement en terme de donnée, mais aussi en terme de structure. Ces nouveautés permettent de réaliser un code à la fois plus propre et plus compact, tout en ayant une plus grande précision dans les relations entre les éléments.

Nous avons survolé les principes du HTML modulaire. Voyons de plus près comme réaliser une page HTML structuré générique, c'est-à-dire capable à la fois de fournir des informations sur la structure (afin de générer d'autres formats, par exemple) et de s'adapter à une grande variété d'usages avec un minimum de modifications.

Une page web sert généralement à définir :

  • un article

  • un blog

  • une application

Il convient donc de réaliser la structure d'une page générique capable de s'adapter rapidement à ces catégories.

La déclaration de document

Le document sera déclaré de la façon suivante :

<?xml version="1.0" encoding="utf-8"?>
<html xml:lang="fr" role="document" xmlns="http://www.w3.org/1999/xhtml" xmlns:xml="http://www.w3.org/XML/1998/namespace">

Le rôle

Nous utiliserons role="document" dans le cas d'un document (page web, blog, article, etc.) ou bien role="application" dans le cas d'une application web (i.e une interface en interaction avec l'utilisateur).

Le type MIME

Comme nous avons choisi le XHTML comme format standard, le W3C recommande d'utiliser le type MIME application/xhtml+xml.

<meta http-equiv="content-type" content="application/xhtml+xml;charset=utf-8"/>

La langue

Pour connaître la langue du contenu, il est nécessaire de la définir dans la page à chaque fois que c'est nécessaire, au niveau le plus élevé.

Si la page ne contient qu'une seule langue, elle doit être définie de la façon suivante :

Lorsque la page est décrite en XHTML et que le type MIME de la page est application/xhtml+xml ou application/xml:

<html xml:lang="fr" ...>

Dans tous les cas, la balise meta content-language contiendra la liste des langues rencontrées dans la page, chaque valeur étant séparée par une virgule :

<meta name="content-language" content="fr"/>

Si plusieurs langues sont utilisées dans le document, l'attribut xml:lang sera utilisé à chaque fois que nécessaire, pour définir la langue de l'élément en question.

Par exemple:

<p xml:lang="fr">en français</p>
<p xml:lang="en">in English</p>

Et alors, il faudra définir aussi:

<meta name="content-language" content="fr,en"/>

Remarque

Même si le W3C n'oblige pas à employer la balise meta content-language, nous l'utiliserons afin de centraliser l'information sur les langues rencontrées dans le document, ce qui évitera de le parcourir entièrement systématiquement pour lister les langues.

Les éléments

Remarque

En matière de documentation et de structure de l'information, docbook est un des formats les plus aboutis. C'est pourquoi nous conserverons un parallèle entre le HTML structuré et le format docbook.

hgroup

hgroup permet de regrouper plusieurs éléments formalisant un titre, comme par exemple un titre et son sous-titre.

Le titre sera donc de niveau n (par exemple h1) et le sous-titre pourrait être n+1 (h2) ou un élément plus neutre (comme p). Pour éviter de se retrouver avec un titre de niveau n+1 à la fois dans un sous-titre et dans le titre de la partie suivante (ce qui pourrait limiter la visibilité du code et provoquer des effets de bord dans le CSS), nous choisirons, par convention, de toujours utiliser l'élément p en sous-titre, de la façon suivante :

<hgroup>
<hx>Titre<hx>
<p>sous-titre</p>
</hgroup>

Avec un sous-titre toujours de même style (quel que soit le niveau de titre).

Un titre sans sous-titre ne sera pas intégré dans un hgroup, pour alléger le code de la page.

section

La section permet de définir des ensembles cohérents de données, à la différence de div qui permet de définir un ensemble cohérent de données ou de structure.

Nous définirons donc une section pour définir un ensemble cohérent de données (comme c'est le cas par exemple avec chapter en docbook, qui contient un chapitre entier). div restera pour tout ce qui concerne la définition structurelle de la page (positionnement, etc.)

Une section peut contenir d'autres sections.

Afin de permettre la création de sommaire - et autres références hypertextes -, chaque section sera identifiée :

<section role="section" id="section_x">
...
</section>

Et, si la section a un titre :

<section role="section" id="section_x">
<hn role="sectionhead">blabla</hn>
...
</section>

A la différence de div qui sera réservé pour la présentation de la page (affichage sur plusieurs colonnes) ou la structure d'objets logiques mais sans lien entre eux (bloc de connexion à une zone sécurisée), section sera réservé à un usage de structure logique de l'information. Il est susceptible de posséder un titre. Par exemple : un chapitre, une remarque, etc.

La section se retrouve aussi dans la notation docbook. En nous inspirant de la notation docbook, nous définirons aussi des sections spécifiques : caution, important, warning, note, tip et remark.

  • Une note est une information destinée à tous les lecteurs.

  • Un élément important est une variante de la note mais avec une priorité plus importante.

  • Une caution est une information relative à la perte de données ou dégats logiciels éventuels.

  • Un warning est une information relative aux dégats matériels ou risques corporels.

  • Un élément remark est un commentaire.

  • Un élément tip est une astuce.

Comme il peut être utile d'avoir d'insérer des notes de bas de page (ou de bas d'article), nous créerons une section speciale :

<section class="footnotes">
...
</section>

Cette section pourra être positionnée dans footer ou aside.

Dans le cas d'une application il pourra être utile de disposer de zones d'affichage pour une information :

  • success

  • failure

  • warning

  • information

article

Un article est un ensemble complet d'informations relatives à un sujet. Cela peut être un article de blog, un article (au sens général, comme cette page web), un commentaire, etc.

Un article peut contenir d'autres articles (par exemple un billet de blog peut contenir des commentaires).

article est le pendant de entry dans la notation atom.

article est le pendant de article dans la notation docbook.

A l'image d'une page web, un article est composé de la même façon, c'est-à-dire qu'il peut contenir une tête (header), un corps et un pied (footer).

Nous voulons une information structurée. En s'inspirant de la notation docbook, nous définirons, par convention, des sections comme étant le niveau fils direct d'un article (à l'exception du bloc de titre). Ainsi, un article sera obligatoirement composé de sections, ce qui permettra une gestion simplifiée des traitements automatisés et une structure élémentaire simple.

Ainsi, nous aurons :

<article role="article" id="id_article">
<section role="section">
[contenu de la première section]
</section>
<section role="section">
[contenu de la seconde section]
</section>
...
</article>

Le première section sera obligatoirement une section d'introduction si elle ne possède pas de titre. Ce qui signifie autrement : tout ce qui se situe avant le premier titre est obligatoirement une introduction (et aisément identifiable en xpath avec position()=1 ou en CSS avec la pseudo-classe first-child).

aside

Définit les informations en lien indirect (lien externes, etc.) avec l'élément le plus proche, c'est-à-dire soit la page web - s'il est inclus dans la page -, soit l'article - s'il est inclus dans l'article.

aside est structuré de la même façon que article, c'est-à-dire avec header, un corps divisé en sections, footer.

Si aside est à l'extérieur de l'article, il sera contenu dans un div qui pourra être positionné à droite (par convention).

Par exemple, un aside pourra contenir un glossaire :

<aside>
<h1>Glossaire</h1>
<dl>
<dt><dfn>mot-clef 1</dfn></dt>
<dd>définition</dd>
<dt><dfn>mot-clef 2</dfn></dt>
<dd>définition</dd>
</dl>
</aside>

figure

Elément spécifique de description d'object graphique (image, vidéo,...).

figure permet de délimiter une information graphique, en y ajoutant un texte descriptif (figcaption). Il sera systématiquement employé pour encapsuler une image (img, object) ou une vidéo (video).

Nous profiterons de la structure figure pour y insérer des informations sémantiques concernant les droits de l'élément (licence, auteur, etc.)

<figure about="http://lien/vers/mon/image" rel="foaf:img">
[image ou vidéo]
<figcaption>
[descriptif]
<span property="dc:creator">moi</span>
<span property="dc:subject">Le sujet de la figure</span>
[mes autres propriétés sémantiques] </figcaption>
</figure>

Ou bien :

<figure>
<figcaption>
[descriptif]
</figcaption>
[image ou vidéo]
</figure>

img

En plus des informations habituelles, il est conseillé de relier l'image à sa licence avec RDFa, a minima.

<img src="photo1.jpg" rel="license" resource="http://creativecommons.org/licenses/by/3.0/deed.fr"/>

ou encore :

<img src="photo1.jpg"
rel="license" resource="http://creativecommons.org/licenses/by/3.0/deed.fr"
property="dc:creator" content="moi"
/>

cite

La balise cite ne représente pas une citation, mais le titre d'une oeuvre dans le flot d'un paragraphe.

Par exemple :

<p>Mon film préféré est <cite>Le titre du film</cite>.</p>

Comme tout titre, il est bien entendu recommandé (voire requis) d'y ajouter de la sémantique pour qualifier le titre :

<p>Mon film préféré est <cite property="dc:title" about="http://lien/vers/le_film">Le titre du film</cite>.</p>
<p>Mon livre préféré est <cite property="dc:title" about="urn:isbn:0596000588">Le titre du livre</cite>.</p>

Ces citations d'oeuvres pourront être reprises dans la propriété du fichier RDF/Dublin Core externe :

<dcx:references rdf:resource="http://media.example.com/references"/>

Une extraction XSLT pourra simplifier et automatiser ce travail...

La balise cite peut aussi être insérée dans une bloc blockquote (bloc de citation) afin d'indiquer la titre de la source citée.

blockquote

La balise blockquote représente un bloc de citation, c'est-à-dire un ou plusieurs paragraphes de citation.

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque facilisis tellus sed metus iaculis vel imperdiet nunc malesuada. Suspendisse sit amet augue elementum tellus dictum porta eu non massa. Donec a dolor vehicula eros vestibulum vulputate. Quisque luctus euismod urna sit amet posuere.</p>
<p>Quisque eu lorem ligula, ac mollis elit. Mauris est urna, pretium sed scelerisque eget, aliquam id nisl. Donec non sem quam.</p>
</blockquote>

Bien entendu, ce bloc de citation peut contenir sa source dans une balise cite.

<blockquote>
[bloc de citation]
<p>Source :<cite property="dc:title" about="urn:isbn:1-234-56789-0">mon titre de source</cite></p>
</blockquote>

Ou, encore :

<blockquote about="urn:isbn:1-234-56789-0">
[bloc de citation]
<p>Source :<cite property="dc:title">mon titre de source</cite>, <span property="dc:creator">auteur</span>, <time property="dct:issued">2010</time></p>
</blockquote>

span

A l'image de la balise div pour les blocs, la balise span permet d'introduire des précisions dans la structure et dans le contenu. Par exemple :

  • <span class="ma_classe">du texte</span>

    Pour définir une portion de texte soumis à une mise en évidence particulière.

    Il convient pour chaque classe de définir le traitement de transformation à effectuer, au cas par cas.

  • <span rel="dbp:capital" resource="http://dbpedia.org/resource/Berlin"/>

    en RDFa, ou :

    <span rdf:type="dbp:capital" rdf:resource="http://dbpedia.org/resource/Berlin"/>

    en RDF/XML pur, pour définir une sémantique sur un texte visible ou invisible.

abbr

abbr permet de décrire une abbréviation. Il sera systématiquement utilisé avec de la sémantique lorsque le terme sera disponible sur la toile, comme c'est le cas pour XML, XHTML, RDF, etc.

<abbr title="Hypertext Markup Language" ctag:means="http://dbpedia.org/resource/HTML">HTML</abbr>

équivalent de :

<abbr title="Hypertext Markup Language" rdf:type="ctag:Tag" rdf:resource="http://dbpedia.org/resource/HTML">HTML</abbr>

ou encore (en RDFa):

<abbr title="Hypertext Markup Language" rel="ctag:Tag" resource="http://dbpedia.org/resource/HTML">HTML</abbr>

Définition d'une structure de page

Les types de contenu

Dans la majorité des cas, une page web est un article, une série d'articles (blog) ou une application.

Dans le cas d'un article ou d'une série d'articles, la seule différence réside dans le nombre d'articles contenus dans la page. Afin de faire un code simple, nous considérerons que les deux premiers types n'en font qu'un seul. Un article unique sera noté de la même façon qu'une série d'articles. La structure de page servira donc soit pour un article seul, soit pour une série.

Structure de l'enveloppe de page : niveau body

La structure de l'enveloppe correspond à la structure de premier niveau dans body.

De façon assez simple, il a été conçu de cette façon :

Votre navigateur ne prend pas en charge l'affichage des images SVG
Une page web de base

La partie div class="content" est le contenu habituel de la page web, soit un (ou plusieurs) article(s) ou une application.

Votre navigateur ne prend pas en charge l'affichage des images SVG
Une page web de base pour les articles

Structure de l'enveloppe de l'article : niveau article

Un article lui-même ayant pour structure :

Votre navigateur ne prend pas en charge l'affichage des images SVG
Structure d'un article

Afin d'identifier et de suivre les transformations d'un article, celui-ci sera identifié article id="article_xxx".

haut