A l’origine il y avait <center>. et d’autres balises de mise en forme comme <font>. Puis les CSS sont arrivées, en version 1 en 1996, avec des directives de mise en forme comme text-align:center. Petit à petit, à travers les versions d’HTML 3.2 puis 4 et maintenant 5, une séparation des rôles s’est dessinée :

1. HTML essentiellement (jamais totalement) pour la structure du document et le sens des zones et des éléments qui le composent
2. CSS pour l’habillage graphique qui comprend les effets visuels (polices de caractère, couleurs, bordures) mais aussi la disposition des zones d’informations, que l’on peut appeler pagination

Cette tendance est confirmée avec HTML 5, la dernière version, qui introduit des nouvelles balises de structure et met au rencard les vieilles balises de mise en forme comme <center> et <font> à ne plus utiliser.

Nous allons voir comment analyser une page et en déduire une structure HTML sous la forme d’un gabarit.

Analyse de page (« zoning »)

Plutôt que de démarrer directement en HTML, il est conseiller d’analyser visuellement la page que l’on veut réaliser, en repérant grossièrement les blocs d’informations ou zones. Ce dessin est construit soit à partir d’une page à reproduire, soit à partir des besoins exprimés par les utilisateurs, en imaginant comment présenter l’information et permettre la navigation. Ce travail sort du cadre de ce cours, nous allons simplement voir à quoi ressemble un zoning et surtout comment l’utiliser.

En voici un exemple :

Les grands blocs d’information sont dessinés en détaillant le contenu de chaque bloc par niveaux successifs. Nous nous arrêtons avant de montrer les éléments HTML comme un paragraphe ou une image, car pour l’instant, dans cette leçon, seule la structure générale nous intéresse. Nous verrons par la suite que le zoning se fait souvent à partir de la « maquette fil-de-fer » comme présentée en introduction de ce cours.

Donc retenez bien que nous procédons à un découpage visuel sous la forme de blocs rectangulaires pour lesquels on désigne une fonction, soit par des termes génériques comme « entête », « carrousel (slider) », « pied de page », soit par des termes propres au domaine, comme « liste des événements », « réservations » par exemple pour un site de concerts.

Structuration

A partir du zoning, nous allons pouvoir définir la structure générale de la page en HTML à l’aide de balises spéciales. On parle souvent de gabarit. car cette structure définit le squelette d’une ou de plusieurs pages ayant la même forme.

Éléments de structuration

Les nouvelles balises d’HTML 5 permettent de définir la structure d’un document. Ces balises renseignent sur le rôle de chaque zone d’information, pour les développeurs mais aussi pour les moteurs de recherche et tout programme d’analyse de document, qui vont pouvoir mieux exploiter et mettre en valeur l’information contenue dans une page. Voici ces balises résumées.

Pour bien gérer la distinction article/section, disons que l’article pourrait être repris tel que dans un autre site car il forme un élément d’information pertinent dans d’autres contextes. Il peut être très simple avec un titre, une image, un texte ou long avec plusieurs parties représentées par des sections. A l’inverse la section n’a aucune pertinence à être « exportée » ailleurs. C’est un découpage qui a du sens dans notre site. Il faut imaginer, même si ça n’est pas le cas, que le découpage en section pourrait faire l’objet d’une table des matières, car il s’agit bien d’une structure qui a du sens dans ce contexte mais par forcément ailleurs, à la différence de l’article.

Du zoning au gabarit

A chaque zone identifiée par le zoning, nous associons une balise de structure HTML parmi celles vues ci-dessus. Si vous avez touché un peu au HTML dans ces versions antérieurs, vous connaissez sans doute l’incontournable balise div. Elle permet de définir un bloc auquel on associe des styles en CSS mais elle ne donne aucune information sur la fonction du bloc. A éviter absolument à ce stade où les balises de structure sémantiques sont parfaites : header, footer, nav, etc.

L’exemple précédent de zoning donne ce gabarit HTML, où la structure est représentée visuellement, puis sous forme d’arborescence (au milieu) et enfin sous forme de code HTML :

A partir d’une maquette fil-de-fer, vous pouvez dessiner le gabarit comme ci-dessous (ici avec Balsamiq) ou directement produire la structure HTML dans un fichier.

Il reste bien sûr ensuite à compléter le document HTML avec le contenu, texte, image, vidéo, boutons, etc.

Balises sémantiques

Répétons-le, désormais la philosophie de combinaison entre HTML 5 et CSS (les feuilles de style) est :

1. les balises HTML donnent en priorité la structure et le rôle des zones d’information
2. les styles permettent la mise en forme et la mise en page

Nous verrons toutefois que les deux sont liés car il faut souvent un conteneur, un élément parent, pour disposer les enfants selon l’aspect désiré. L’usage était d’utiliser une balise spéciale <div> qui n’a aucun effet visuel mais permet de lui associer des styles (nous verrons cela en détail au chapitre suivant). Nous pouvons maintenant nous appuyer sur les balises de structure vues plus haut, qui servent de conteneur, <div> étant réservé aux petits blocs d’information qui doivent avoir une disposition particulière.

Partout où cela est possible, il faut aussi utiliser les balises sémantiques, qui s’attachent plus à dire à quoi sert l’élément plutôt qu’à son aspect. En voici un résumé, en deux tableaux, le premier montrant les balises essentielles à connaître.

Nous avons pour l’instant distingué les balises de « paragraphe » (p, h*) et les balises de « caractères » (b, i par exemple). Gardons cette idée jusqu’à la mise en page (chapitre V) où nous verrons les notions précises de « bloc » et « en ligne ». Le principe est simple, les premières balises occupe visuellement toute la largeur alors que les deuxième n’interrompe pas le flux du texte, de droite à gauche et de haut en bas.

Balises sémantiques de paragraphe

Voici ces balises que nous avons pour partie déjà vues. Dans le premier tableau figurent les éléments HTML d’usage courant, à connaître impérativement.

<figure>
   <img src="/img/koala.png" alt="koala en captivité"/>
   <figcaption><em>Koala</em> en captivité</figcaption>
</figure>

<blockquote cite="https://twitter.com/realDonaldTrump/status/827885966509604865">
   MAKE AMERICA GREAT AGAIN!
</blockquote>

Titres et hiérarchies

Un petit point important sur les titres. Normalement, mais ceci fait l’objet de nombreux débats, il n’y a qu’une balise h1 dans un document, très important pour le référencement. Sauf à utiliser des articles qui ont logiquement à l’intérieur un h1 pour leur titre propre, car l’article est un contenu autonome utilisable ailleurs.

Ensuite, on descend dans la hiérarchie pour des sous-titres, en respectant l’ordre sans trou h2, puis h3 s’il y a des sous-sous-partie, etc.

Pour les sous-titres, la recommandation du W3C est de ne pas utiliser les balises h* mais soit p, soit br et span (vu plus tard).

<header>
  <h1>HTML 5.1 Nightly</h1>
  <p>A vocabulary and associated APIs for HTML and XHTML</p>
  <p>Editor’s Draft 9 May 2013</p>
</header>

<h1>Ramones <br>
<span>Hey! Ho! Let’s Go</span>
</h1>

Beau

<header>
  <h1>HTML 5.1 Nightly</h1>
  <p>A vocabulary and associated APIs for HTML and XHTML</p>
  <p>Editor’s Draft 9 May 2013</p>
</header>

<h1>Ramones <br>
<span>Hey! Ho! Let’s Go</span>
</h1>

Balises sémantiques de caractère

Au niveau des caractères, donc sans retour à la ligne, les deux balises essentielles que nous avons déjà vues sont :

Beaucoup moins courantes, mais dont l’existence ne doit pas être ignorée, voici d’autres éléments sémantiques de caractère :

L'<abbr title="Organisation des Nations unies">ONU</abbr> a été fondée en 1945 après la Seconde Guerre mondiale.

Ce n’est pas le propos dans ce chapitre, toutefois sachez bien que ces balises ont un sens avant tout mais aussi une mise en forme par défaut. L’élément figure par exemple affiche un cadre discret autour de l’image. Comme nous le verrons très bientôt, toutes ses mises en forme pourront être modifiée ou supprimée par les CSS.