HTML 5 et CSS 3

Balise vidéo, polices personnalisées, animations, ombrage, bordures, etc. toutes ces fonctionnalités arrivent enfin avec l'HTML 5 et CSS 3. Tout cela pour faire des sites plus légers à charger et moins gourmands pour notre ordinateur. Il s'agit de deux nouvelles normes que nous allons abordées. Lors de cette étude, nous allons manipuler deux langages. Nous pourrions nous étonner d'être obligé de travailler avec deux langages différents pour structurer une page web. En réalité, cela permet de faciliter grandement le travail de conception.

Ce principe de séparation entre la forme (CSS) et le contenu (HTML) permet une plus grande souplesse dans la maintenance des styles globaux pour un site, de partir sur de bonnes bases pour l'accessibilité numérique des pages web et de concevoir le document en prêtant attention à la sémantique des éléments.
Sommaire de l'étude

Ossature d'un document HTML5 - Sémantique

Bien souvent, les pages web sont constituées d'un en-tête et d'un pied de page, d'un menu, d'une zone réservée au contenu articles, images, vidéos, etc. et, éventuellement, d'une zone annexe, n'ayant aucun rapport direct avec le contenu de la page. Dans beaucoup de pages web encore actuelles, la plupart des éléments principaux sont contenus dans des balises universelles de type <div> ou <span>. Votre navigateur ne sait pas faire de différence entre un élément du menu de navigation et le titre de votre article. Ceci peut paraître inutile, mais bien indiquer les différents éléments permettra aux navigateurs d'implémenter de futures fonctionnalités comme une navigation simplifiée quelque soit le site web, accès facilité pour les non-voyants, etc..

Rubriques

Une nouvelle grammaire

HTML5 se démarque radicalement des éditions précédentes de par sa grammaire et sa syntaxe, étudiées pour faciliter l'apprentissage et la compréhension par les concepteurs web. Dans ce chapitre, vous allez découvrir comment HTML5 allège considérablement le code et le rend plus lisible, ajoute des fonctionnalités d'accessibilité, recycle certaines balises, crée des plans de page et ajoute une bonne dose de sémantique à votre code.

Un Doctype simplifié

Le DOCTYPE est une ligne de déclaration qui concerne le document. Ce n'est pas une balise. D'ailleurs, il n'est pas contenu par les balises <html></html>. Il permet d'indiquer au navigateur quelle version d'html est utilisée dans le document qu'il affiche. C'est donc la première chose que vous devez indiquer dans votre code.

Elle est fidèle depuis que vos document web sont conformes au W3C. Toujours en tête de vos pages, la déclaration de type de document DTD, appelée par le Doctype, annonce fièrement au navigateur quel est le langage et la grammaire que vous lui faites lire.
Doctype HTML 4.01 strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Doctype XHTML 1.0 transitionnel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

A l'ère naissante de HTML 5, la syntaxe du Doctype a été remanié de façon tellement optimisée qu'elle en devient largement plus facile à retenir. Jugez par vous-même ! Avouez que la différence est flagrante, n'est-ce pas ?

Doctype HTML 5
<!DOCTYPE html>

Encodage

Chaque fichier est encodé avec un certain set de caractères. Dans notre cas nous utilisons l'UTF-8. Afin que le navigateur sache avec quel set nous avons écrit notre page, il est nécessaire de lui indiquer à l'aide d'une balise <meta>.

Une bonne nouvelle ne venant jamais seule, d'autres parties de la charpente HTML se trouvent allégées dans la version 5 du langage, à commencer par l'élément charset de la balise <meta> définissant l'encodage de caractères du document.
Meta charset HTML 4 et XHTML
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Meta charset HTML 5
<meta charset="UTF-8">

Le codage des caractères est présent depuis le début de l'informatique. Il définit la manière de stocker en binaire - le seul langage compris par le processeur - les caractères typographiques humains.

ASCII
Au début du règne des puces, chaque caractère était stocké sur 7 bits grâce au code ASCII, ce qui permettait, avec une économie de stockage, jusqu'à 127 possibilités pour numéroté les caractères (lettres de l'alaphabet en minuscules, majuscules, chiffres, signes de ponctuation, signes mathématiques). Cela convenait parfaitement à un usage limité aux Etats-Unis.
ISO-8859-1 et ISO-8859-15
Il a fallu ensuite étendre l'ASCII sur 8 bits et créer de nouvelles pages de caractères, comprenant notamment les caractères accentués internationaux. En Europe occidentale, cette norme fut labellisée ISO-8859-1 aussi connue sous le nom Latin-1. L'ISO-8859-15 (Latin-9) est une mise à jour apportant quelques nouveaux caractères, dont notamment le caractère de l'euro €.
D'autres jeux de caractères
Les asiatiques ont introduit leurs propres jeux de caractères, et ainsi de suite, avec pour conséquence des documents illisibles à l'international selon le code utilisé pour interpréter les caractères et l'exactitude de la correspondance.
UTF-8
l'UTF-8 permet de résoudre en partie les difficultés rencontrées, avec un codage exploitant entre 1 et 4 octets par caractères pour étendre le nombre de combinaisons possibles. Il fait partie des normes définies par le consortium Unicode et présente l'avantage d'être relativement compatible avec les logiciels encore prévus pour traiter les caractères sur un octet unique. L'unicode a pour objectif de définir un identifiant unique pour les caractères de tous les systèmes d'écriture, compréhensible quelle que soit la plate-forme informatique ou le logiciel. Désormais W3C approuvent le choix de l' UTF-8 et prescrit son usage pour tout protocole échangeant du texte sur Internet, dont évidemment HTML et HTTP.
Chaque maillon (système de fichiers, serveur, base de données, langage interprété) se doit de savoir dans quel format sont stockées (ou reçues) les données, puis dans quel format celles-ci sont envoyées au maillon suivant, jusqu'à interprétation finale par le navigateur.

Description des différentes balises - une syntaxe permissive

HTML 5, en tant que digne successeur de HTML 4.01, conserve par défaut la permissivité syntaxique de son prédécesseur : majuscules autorisées pour les noms d'éléments et d'attributs, apostrophes simples ou doubles non obligatoires pour signaler les valeurs. En outre, HTML 5 poursuit les libertés de son ancètre. Ainsi, les éléments <p>, <dd>, <dt>, <li>, <optgroup>, <option>, <td>, <th>, <tr>, <thead> et <tfoot> ne nécessite pas de balise fermante pour être valides. Seule la version XHTML 5 oblige à fermer ces éléments.

Plus fort encore, certains éléments ne nécessitent ni balise fermant ni balise ouvrante. C'est le cas de <html>, <head>, <body>, <thead>, <tfoot> et <tbody>. Cela signifierait que la présence même de ces éléments devient implicite. Pour finir, notons que l'attribut type rencontré principalement au sein des balises <script> et <style> devient superflu.
Le code suivant, parfaitement valide et suffisant, résume à lui seul la concision autorisée en HTML 5 :

index.html 
<!DOCTYPE html>
<meta charset=UTF-8>
<title>Titre de la page</title>
<p>Bienvenue ...
Cependant, je vous invite à la plus grande des précautions quant au maniement de cette syntaxe très démunie. A moins de maîtriser parfaitement les arcanes du langage HTML 5 au point de ne plus commettre d'erreur ou d'oubli, pensez à conserver autant que possible la rigueur de XHTML au sein de vos document.

Eléments racines et meta-informations

<html>
L'élément <html> constitue la racine de tout document HTML. Il suit en général le doctype et clôt l'ensemble en fin de page par une balise fermante </html>. Il ne peut contenir qu'un seul élément <head> suivi immédiatement par un <body>.
Globalité d'un document HTML

Parmi les attributs globaux qui sont applicables à l'ensemble des éléments HTML, il faut noter que lang est très fortement recommandé pour l'élément racine <html>. Un attribut lang vide correspond à un usage inconnu.

Structure minimale d'un document HTML 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- L'en-tête du document -->
  </head>

  <body>
    <!-- Le corps du document -->
  </body>
</html>
<head>
L'en-tête d'un document exerce un rôle crucial, car il fournit de multiples renseignements sur le document lui-même, que le contenu n'indique pas. Dans cette optique, il recueille plusieurs autres balises aux rôles précis. Parmi celles-ci, seule <title> est obligatoire.
Structure d'un en-tête
  • <title> : Titre du document.
  • <meta> : Méta-informations.
  • <link> : Relation vers des ressources externes feuilles de styles CSS.
  • <style> : Styles CSS embarqués dans le document.
  • <script> : Scripts embarqués dans le document.
  • <base> : Base d'adresses par défaut et de cible pour tous les liens du document.
En-têtes d'un document HTML 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- Encodage des caractères -->
    <meta charset="UTF-8">

    <!-- Base générale des liens -->
    <base href="http://manu.kegtux.org">

    <!-- Titre du document -->
    <title>Titre de la page</title>

    <!-- Une feuille de style -->
    <link rel="stylesheet" href="css/ecran.css" media="screen">

    <!-- Des styles complémentaires  -->
    <style>
      body {background-color: yellowgreen; }
    </style>

    <!-- Un fichier JavaScript externe  -->
    <script src="js/global.js"></script>
  </head>

  <body>
    <p>Bienvenue ...</p>
  </body>
</html>
<title>
Le Titre du document est affiché par le navigateur dans le titre la fenêtre et/ou dans l'onglet actif. Il est aussi choisi à juste titre, comme intitulé du lien dans les résultats des moteurs de recherche.

<meta>
Méta-informations, en complément du titre, comblent le besoin de véhiculer plus d'informations supplémentaires au sujet du document. Il s'agit là aussi de renseignements qui ne sont pas affichés dans le corps de la page, mais qui sont importants pour son interprétation ou son référencement par les moteurs de recherche. Nous distinguons plusieurs applications.
Attributs disponibles pour créer un certain nombre de méta-informations
Attribut Valeurs Rôle
name application-name
author
description
generator
keywords		 Méta-informations relatives à la page : nom de l'application web, auteur, description du contenu, programme de conception utilisée, mots-clés relatifs au contenu.
http-equiv refresh
default-style
content-type		 Rafraîchissement de la page.
Feuille de style préférée
Déclaration de la page de code et du type MIME.
content Texte En combinaison avec name et http-equiv, confère sa valeur à la balise.
charset Encodage des caractères Déclaration de la page de code qui doit être utilisée pour l'interprétation, si celle-ci est différente de l'ASCII.
<meta name>
L'attribut name lui-même possède un ensemble de valeurs autorisées dont la liste vous est proposée dans le tableau ci-dessous. L'adjonction d'un autre attribut content est obligatoire, c'est lui qui recueille la valeur que nous souhaitons associer à chacune des propriétés figurant dans name.
Liste des valeurs possibles pour les attributs name et content
name content Rôle
application-name texte Chaîne de texte courte donnant un nom à l'application web que la page représente, si tel est le cas. Sinon, ne doit pas être utilisé. Un tel nom est susceptible d'être affiché par le navigateur dans sa barre de titre en lieu et place du titre du document qui peut varier d'une page à l'autre.
author texte Auteur du document.
description texte Description de longueur raisonnable du contenu, appropriée pour l'indexation dans les moteurs de recherche.
keyword texte Liste de mots-clés séparés par des virgules, pertinent pour le contenu de la page, susceptible d'être utilisés par les moteurs de recherche.
generator texte Programme ou système ayant généré le contenu. Ne doit pas être utilisé si le document est conçu à la main.
Quelques exemples 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta name="author" content="Emmanuel REMY">
    <meta name="description" content="Tout connaître sur le développement informatique">
    <meta name="keywords" content="Java, C++, HTML, CSS, Développement">
  </head>
</html>
<meta charset>
L'attribut charset spécifie l'encodage des caractères utilisé. Cette déclaration doit être unique pour l'ensemble d'un document. Si le contenu de la page ne doit pas être que de l'ASCII, alors l'encodage doit être spécifié par cet élément <meta> équipé de l'attribut charset.
Attention au placement de cet attribut

Idéalement, il faut placer cette déclaration avant les autres balises de la section <head>car, si elles existent, elles sont susceptibles de comporter des chaînes de texte concernées par le choix de l'encodage. Les valeurs les plus communes sont UTF-8, ISO-8859-1 Latin 1 et ISO-8859-15 Latin 9.

Exemple à suivre avec le code précédent 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="author" content="Emmanuel REMY">
    <meta name="description" content="Tout connaître sur le développement informatique">
    <meta name="keywords" content="Java, C++, HTML, CSS, Développement">
  </head>
</html>
<meta http-equiv>
Depuis HTML 5, l'attribut http-equiv ne peut plus comporter de valeur libre, mais uniquement une valeur choisie parmi les suivantes : content-type, default-style, refresh. La valeur content-language est désormais obsolète, et doit être remplacée par l'usage de l'attribut lang sur l'élément racine <html>.
Liste des valeurs possibles pour l'attribut http-equiv
http-equiv content Rôle
refresh entier positif Rafraîchissement de la page à intervalles réguliers exprimés en secondes.
refresh entier positif;url=URL Redirection vers l'adresse URL, après un délai exprimé en secondes.
default-style valeur de l'attribut title d'un élément <style> ou <link rel="stylesheet"> Définit quel ensemble de style doit être appliqué par défaut, si celui-ci est nommé.
content-type text/html;charset=UTF-8 Déclaration du type MIME et de l'encodage des caractères du document.
Quelques exemples intéressants 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- Encodage des caractères -->
    <meta charset="UTF-8">

    <!-- Rafraîchissement de la page toute les minutes -->
    <meta http-equiv="refresh" content="60">

    <!-- Redirection vers une autre URL au bout de 7 secondes  -->
    <meta http-equiv="refresh" content="7;url=http://manu.kegtux.org">

    <!-- Déclaration de l'ensemble de style préféré -->
    <style title="monstyle"><!-- CSS  --></style> 
    <meta http-equiv="default-style" content="monstyle">

    <!-- Une autre façon de déclarer l'encodage des caractères -->
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  </head>
</html>
<link>
L'élément <link> représente une méta-information qui exprime des relations inter-documents. Son rôle est exprimé grâce à la valeur de l'attribut rel.
Différents types de liaisons
Attribut Valeurs Rôle
href URL Adresse de la cible.
hreflang code langue Langue de base du document cible.
rel alternate, archives, author, first, help, icon, index, last, licence, next, pingback, prefetch, prev, search, sidebar, stylesheet, tag, up Indique la relation entre le document courant et celui de la cible valable uniquement si l'attribut href est précisé. Pour une description précise des rôles joués par chacune des valeurs possibles de l'attribut rel, reportez-vous à l'avant-dernière section de ce chapitre Relation des liens.
media screen print Spécifie une requête de média pour laquelle la cible est optimisée.
type type MIME Spécifie le type MIME de la cible, typiquement : text/javascript pour le code JavaScript et text/css pour une feuille de style CSS.
size any ou hauteur x largeur Dans le cas d'une relation icône rel=icon, indique les dimensions de l'image en pixels. Plusieurs valeurs peuvent être indiquées, séparées par des espaces. Le terme any indique que l'image convient à plusieurs résolutions, par exemple lorsqu'elle est au format vectoriel SVG.

Les applications de <link> sont ainsi multiples. Elles peuvent avoir une conséquence tant sur la présentation du document (stylesheet) que sur les ressources qui lui sont attachées (icon) et sur le comportement du navigateur vis-à-vis du réseau (prefetch).

Exemples de liens 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- Encodage des caractères -->
    <meta charset="UTF-8">

    <!-- Icône associée au document -->
    <link rel="icon" href="icone.gif" type="image/gif" sizes="32x32">

    <!-- Autre icône associée au document -->
    <link rel="icon" href="icone.svg" type="image/svg+xml" sizes="any">

    <!-- Feuille de style pour l'affichage -->
    <link rel="stylesheet" type="text/css" href="css/styles.css" media="screen">

    <!-- Feuille de style pour l'impression -->
    <link rel="stylesheet" type="text/css" href="css/print.css" media="print"><

    <!-- Flux de syndication -->
    <link rel="alternate" href="flux.rss" type="application/rss+xml" title="Actualités">
  </head>
</html>
<style>
Un complément d'une feuille de style externe - qui reste la solution la plus performante et la plus modulaire pour un site classique - l'élément <style> permet d'introduire des propriétés spécifiques au document courant. Son contenu doit exclusivement relever de la syntaxe des feuilles de style. Les propriétés seront appliquées au corps de la page et à ses descendants si ceux-ci satisfont aux sélecteurs CSS indiqués.
Attributs spécifiques aux styles internes à la page
Attribut Valeurs Rôle
type type MIME Type MIME d'un langage de style. Dans l'extrême majorité des cas, il s'agira de text/css. Du coup, cet attribut n'est pas obligatoire.
media screen print Spécifie une ou plusieurs requête(s) de média à laquelle l'instruction de style sera appliquée.
scoped scoped Indique que les instructions de style s'appliquent uniquement à l'élément parent qui contient la balise <style> ainsi qu'à ses descendants. Si cet attribut est absent, les propriétés CSS s'appliqueront à l'ensemble du document.

Redéfinition de la balise p pour cette page 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Style sur un paragraphe</title>>
    <style media="screen">
      body { background: #EFECCA; }
      p {
        color: #78A419; 
        font-size: 2em;
        text-align: center;
        border: 3px solid #B5E655;
        border-radius: 15px;
        background: white;
        padding: 1em;
        width: 60%;
        margin: 1em auto;
      }
    </style>
  </head>

  <body>
    <p>Ce paragraphe a du style !</p>
  </body>
</html>

L'attribut media spécifie une ou plusieurs requête(s) de média pour laquelle l'instruction de style sera appliquée.

Exemple 
<!-- Styles pour l'affichage -->
<style media="screen">
   /* ... instructions CSS ... */
</style>

<!-- Styles pour l'impression -->
<style media="print">
   /* ... instructions CSS ... */
</style>

<!-- Styles pour l'affichage sur l'écran de largeur inférieur à 640px -->
<style media="screen and (max-width:640px)"
   /* ... instructions CSS ... */
</style>
<base>
L'unique élément <base> situé dans la section <head> représente une base commune pour tous les éléments du document. Il est bien entendu facultatif. Nous précisons soit l'un ou l'autre de ses deux attributs, soit les deux en même temps. Afin de le rendre actif pour toutes les ressources, il est conseillé de le placer en tant que tout premier élément dans <head>, car les suivants utiliseront son information.
Attribut Valeurs Rôle
href URL Indique l'adresse à utiliser comme base de référence (préfixe) pour tous les hyperliens du document.
target _blank _parent _self _top Cible par défaut pour l'ouverture de tous liens de la page. Cette indication générale peut être contournée individuellement en utilisant un attribut target dans tout lien.
<body>
Après tous les éléments susceptibles d'être contenus dans l'en-tête du document, ce dernier prend fin avec une balise fermante </head>, et nous passons ensuite au corps proprement dit de la page HTML.

Ce corps est intégralement contenu entre <body> et </body>. Nous y retrouvons toutes les autres balises décrites dans la suite de cette étude. La seule balise susceptible de figurer après cet élément est </html> pour clore totalement le document.

Corps de la page 
<!DOCTYPE html>
<html lang="fr">
  <head>
     <!-- L'en-tête du document -->
  </head>

  <body>
     <!-- Le corps du document -->
  </body>
</html>

Groupement

Les balises de groupement sont avant tout destinées à en grouper d'autres. Au fil des chapitres, nous verrons comment regrouper des éléments sur une liste, des paragraphes, des images et des légendes ou encore des éléments textuels dans les citations. Dans ce chapitre, nous nous intéressons uniquement aux balises universelles que sont <div> et <span> sachant qu'elles n'ont aucunes significations particulières

<div>
Conteneur générique par excellence, <div> représente une division de document. D'un point de vue sémantique, il n'a aucune valeur et n'est voué qu'à regrouper des éléments ayant des propriétés communes.
Regroupement d'éléments différents 
<div>
  <p>Un paragraphe</p>
  <img src="image.jpg" alt="texte alternatif">
  <p>Un autre paragraphe</p>
</div>

Ces propriétés peuvent être de nature graphique (un rassemblement d'éléments dans un conteneur possédant un attribut class spécifique, pour positionner l'ensemble grâce aux feuilles de style et leur affecter des propriétés CSS individuellement), ou factoriser des attributs communs tels que lang ainsi appliqué à <div> et tous ses enfants.

Utilisation graphique 
<div lang="fr" class="introduction">
  <p>Un paragraphe d'introduction</p>
</div>

<div class="suite">
  <p>Un autre paragraphe</p>
</div>

Neutre en termes d'apparence par défaut hormis son affichage en bloc, l'élément <div> est ainsi très couramment employé pour en regrouper d'autres. Néanmoins, il faut éviter la divite, syndrome d'un usage excessif d'éléments <div> même lorsque ce n'est pas nécessaire ou que d'autres éléments sont plus appropriés (<p>, <article>, <header>, <footer>... ). C'est pourquoi <div> doit être considéré dans l'absolu comme un élément de dernier recours.

Il ne faut pas non plus le voir comme interchangeable avec <p>, selon que nous désirons appliquer des marges - conférées par le style par défaut appliqué par le navigateur - entre blocs successifs ou non. Une division peut grouper quasiment tous les types d'éléments aisni que d'autres <div>, tandis qu'un paragraphe est uniquement destiné à abriter du texte et des éléments de phrasé, mais pas d'autres paragraphes.
<span>
A la différence de <div>, un conteneur <span> est spécifiquement dédié au contenu phrasé. En revanche, tout comme lui, il ne possède pas de sens particulier d'un point de vue sémantique.

Il peut être utilisé également pour grouper des éléments ou une portion de texte à des fins d'affectation de styles (par exemple en utilisant les attributs id ou class) ou de partage d'attributs.

Exemple <p>HTML signifie <span lang="en">Hypertext Markup Language</span> en anglais.</p>
Tout comme <div>, <span> doit être en théorie n'être utilisé qu'en dernier recours lorsqu'il n'existe aucun autre élément plus approprié. Il ne possède pas de style par défaut, et reste lui-même un élément de type en ligne. Nous ne pouvons donc pas y placer des éléments de type bloc.

Lien

Comme vous le savez, un site web est composé de plusieurs pages. Comment faire pour aller d'une page à une autre ? À l'aide de liens bien entendu ! Nous pouvons faire un lien d'une page vers une autre, mais nous pouvons aussi faire un lien vers un autre site. En plaçant des ancres le long du document, il est également possible de naviguer au sein d'une même page afin que le visiteur puisse sauter directement à la partie qui l'intéresse. Il est facile de reconnaître les liens sur une page : ils sont écrits d'une façon différente par défaut en bleu et soulignés et un curseur en forme de main apparaît lorsque nous pointons dessus.

<a>
Pour réaliser un lien, la balise que nous utilisons est très simple, il s'agit de l'élément <a>. Très souvent, dans la majorité des cas, nous devons lui ajouter l'attribut href afin d'indiquer vers quelle page le lien doit conduire. Cet élément correspond aux lettres HT de HTML. C'est la clé de voute de la dimension hypertexte. L'élément <a> anchor en anglais ou ancre est un hyperlien.
Navigation entre les pages

L'activer - cliquer dessus dans la plupart des cas - signifie au navigateur que nous souhaitons changer d'adresse de navigation et consulter une autre ressource. Ce fondement même des principes du Web n'est pas très complexe à mettre en oeuvre. Il convient en général de savoir écrire l'adresse de destination dans l'attribut href, éventuellement complété par des renseignements précisés dans les autres attributs.

Exemple de navigation 

<!DOCTYPE html>
  <html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Hyperlien</title>
  </head>

  <body>
    <p>Pour connaître quelques aspects de la programmation, consulter
      <a href="http://manu.kegtux.org">
        Informatique répartie - développement d'applications
      </a>
      et choisissez votre langage.
    </p>
  </body>
</html>
Attributs disponibles
Attribut Valeurs Rôle
href URL Cible du lien.
hreflang code langue Langue de base de la cible du lien.
media screen print Spécifie une requête de média pour laquelle la cible est optimisée.
rel alternate, archives, author, first, help, icon, index, last, licence, next, pingback, prefetch, prev, search, sidebar, styleshette, tag, up Spécifie la relation établie par le lien, entre le document courant et la cible. Plusieurs valeurs peuvent être combinées, séparées par des espaces.
target _blank _parent _self _top Attribue un contexte de navigation dans lequel suivre le lien.
type type MIME Le type MIME de la destination du lien.
download nom du fichier après téléchargement ou (vide) Indique que la ressource liée est prévue pour être téléchargée. Si une valeur est donnée à l'attribut, elle représente le nom du fichier après téléchargement.
href et hreflang
L'attribut href est bien sûr le plus important puisque c'est lui qui détermine la cible du lien, c'est-à-dire l'adresse du document que le navigateur chargera et interprétera.

Il peut s'agir d'un lien classique vers une autre page HTML, vers un fichier média que le navigateur peut interpréter nativement ou à l'aide d'une extension par exemple une image, un document PDF, ou encore vers un fichier que le navigateur proposera de télécharger.

Consulations de différents documents 
<!-- Lien vers une autre page HTML -->
<a href="contact.html">Contactez-nous</a>

<!-- Lien vers une image -->
<a href="maphoto.jpg">Admirez ma photo</a>

Le lien peut être absolu, c'est-à-dire formuler une adresse complète, notamment dans le cas d'un lien menant vers un autre site hébergé sur un autre nom de domaine. Il peut être aussi relatif, si nous souhaitons se baser sur l'adresse courante - affichée dans la barre d'adresses - et faire référence à un document stocké au même niveau, ou dans un niveau différent sous-répertoire, répertoire parent, répertoire racine.

Naviguer dans les différentes pages de son site 
<!-- Lien relatif vers une page de contact, hébergée dans le même niveau d'arborescence -->
<a href="contact.html">Contactez-nous</a>

<!-- Lien relatif vers un fichier dans le sous-répertoire images (par rapport au document courant) -->
<a href="images/schema.png">Voir illustration</a>

<!-- Lien relatif vers une page située dans le répertoire parent (un niveau au dessus du document courant) -->
<a href="../categorie.html">Revenir à la catégorie</a>

<!-- Lien absolue vers une page située à la racine du site -->
<a href="/mentions.html">Mentions légales</a>

<!-- Lien absolue vers la racine du site -->
<a href="/">Accueil du site</a>

Dans tous les cas, s'il ne s'agit pas d'un lien relatif au site, nous devons préciser le protocole (http://, ftp://, etc.).

Consulter un autre site 
<!-- Lien externe ou absolu -->
<a href=<"http://manu.kegtux.org">Un certain site</a>>

... ou bien mailto: pour une adresse e-mail. Il incombera au navigateur et au système d'exploitation de lancer l'application de messagerie installée pour prendre en charge ce lien et proposer une fenêtre de rédaction.

Rédiger un courrier 
<!-- Lien vers une adresse e-mail -->
<a href="mailto:manu.remy@gmail.com">Me contacter</a>

L'attribut hreflang précise la langue de destination et peut permettre à l'utilisateur de savoir par avance s'il pourra comprendre l'idiome utilisé.

Lien vers des sites anglais 
<!-- Lien vers la version de Wikipédia en langue anglaise -->
<a href="http://en.wikipedia.org" hreflang="en" >Wikipedia</a>

Par défaut, il n'est pas signalé visuellement, mais une petite astuce en CSS permet d'afficher sa valeur entre parenthèses à la suite du lien, grâce à la pseudo-classe :after.

Afficher automatiquement l'adresse du lien 
a[hreflang]:after { content: " (" attr(hreflang) ") " }
rel
Spécifie la relation établie par le lien, entre le document courant et la cible. Plusieurs valeurs peuvent être combinées, séparées par des espaces. Les relations des liens vers les autres ressources sont exprimées par l'attribut rel.
Exemple de navigation sous forme de fil d'Ariane avec relations 
<nav>
  <p>
    <a href="/" rel="index up up">Accueil</a> >
    <a href="/categorie" rel="up">Niveau supérieur</a> >
      Page courante
  </p>
</nav>
id et ancres
l'attribut name est désormais obsolète avec HTML 5 et doit être remplacé par id pour nommer l'ancre, comme pour tous les autres éléments. Une ancre, aussi nommée hash en anglais, permet d'affiner l'écriture d'un lien pour cibler directement une portion de document par exemple <div>, <section> désignée par son identifiant unique id. Elle figure dans l'URL à la fin de l'adresse du document, concaténée à celui-ci par un signe diède #.

L'agent utilisateur sera chargé d'accéder directement à l'élément désigné par cet id, ce qui se traduit par un défilement automatique vers la portion concernée dans les navigateurs graphiques si le document est assez long pour engendrer un défilement vertical ou horizontal dans la zone d'affichage.

Différentes situations 
<!-- la cible peut se situer sur le document courant -->
<a href="#contact">Accéder directement au formulaire de contact</a>

<!-- ou bien à une autre adresse -->
<a href="mentions.html#contact">Accéder directement au formulaire de contact</a>

<!-- une ancre sans nom désigne le haut de la page-->
<a href="#">Haut de page</a>

<!-- Création de l'ancre et accès au formulaire de contact -->
<section id="contact">
  ...
</section>
target
L'attribut target quant à lui, était déprécié dans la précédente version de HTML, mais fait un retour en force, car particulièrement utile pour l'élément <iframe>. Il peut prendre les valeurs suivantes :
Les différentes cibles
  • _blanc : initialise un nouveau contexte de navigation dans la plupart des cas, l'agent utilisateur ouvre une nouvelle fenêtre ou un nouvel onglet.
  • _parent : le lien est suivi dans le contexte parent de l'élément <iframe> qui contient le lien, ou dans le contexte courant s'il n'est pas contenu dans un document imbriqué.
  • _self : le lien est suivi dans le contexte courant par exemple l' <iframe> ce qui correspond au comportement par défaut et ne nécessite normalement d'être précisé.
  • _top : le lien est suivi dans le contexte de plus haut niveau remplaçant tout éventuel contexte parent.
  • Ou bien le nom valeur de l'attribut name d'un élément <iframe> présent dans la page.
Dans les précédentes versions de HTML, nous limitions le contenu autorisé d'un lien à du texte, des images et divers types de balises en ligne. Il n'était pas toléré de placer un bloc <h1> ou un paragraphe <p>.
download
Ce nouvel attribut est pévu pour les nombreux liens menant vers des fichiers à télécharger.

Il effectue donc la distinction entre une ressource disponible pour la navigation une autre page HTML et une ressource destinée à être téléchargée pour un usage ultérieur un programme, un document dans un format binaire, etc..

<a href="/telecharger.php" download="Intallation.exe">Télécharger la version d'installation</a>
Sa valeur peut contenir une suggestion sur le nom du fichier à sauvegarder, qui peut être différente de celui stocké sur le serveur. Cette fonction est particulièrement utile lorsqu'un script génère le fichier dynamiquement et que le navigateur ne parvient pas à en déterminer la bonne extension. Toutefois, cette valeur peut être redéfinie par l'en-tête HTTP Content-Disposition et son paramètre filename.
Liens et blocs
A partir de HTML 5, un lien peut contenir des balises de niveau bloc, cela s'avère utile lorsqu'une portion de document est constitué d'éléments variés par exemple un titre, une illustration, un court extrait de texte devant tous mener à la même ressource. Auparavant, un lien ne pouvait englober de tels éléments, car étant lui-même de type en ligne.
Bloc de liens

Cela permet d'accroître la surface cliquable, et d'éviter la duplication inutile de liens menant vers une même adresse, soit une bonne pratique de plus pour l'accessibilité.

Télécharger une image 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Les liens</title>
  </head>

  <body>
    <a href="ciel.jpg" download="">
      <h3>Le ciel étoilé</h3>
      <img src="ciel.jpg" width="200">
      <p>A téléchager</p> 
     </a> 
   </body> 
 </html>

Sections et titres - de nouveaux éléments sémantiques

Les sections délimitent les zones du document possédant une valeur sémantique particulière. Contrairement à <div> et <span> qui n'ont aucun rôle particulier, hormis celui de regrouper des éléments, chaque section possède un rôle précis, et peut être utilisée une ou plusieurs fois dans le document. A l'exception de <address> qui est présenté ultérieurement, il s'agit de nouveautés HTML 5.

Les différentes sections d'un document HTML
Nom Détail
section Section générique regroupant une même thématique de contenu, de préférence avec un en-tête.
article Section de contenu dans un document ou une application web, dont la composition peut être indépendante du reste de la page et extraite individuellement.
nav Section abritant des liens de navigation majeurs, permettant de naviguer au sein du document ou vers d'autres pages.
aside Section dont le contenu est tangentiellement lié à ce qui l'entoure, et qui peut être considérée comme séparé de ce contenu.
header Section d'introduction (d'un document, d'une autre section, d'un article) pouvant contenir - selon le contexte - titres, navigation, formulaire de recherche, table des matières, logo, etc.
footer Pied de page, de section ou d'article - selon son plus proche ancêtre - pouvant contenir des informations connexes et une navigation annexe.

Ces balises répondent a des besoins précis de structuration du document. Jusqu'à HTML 5, l'élément <div> est le bloc le plus générique qui soit, et surexploité pour découper les différentes zones d'une page web. On lui adjoint des attributs id ou class avec des noms plus ou moins évocateurs pour distinguer celui qui contient la navigation de celui qui contient le pied de page ou de celui qui contient les informations contextuelles, et ainsi de suite pour chacun des groupes d'éléments.

La popularité de <div> provient de sa neutralité sémantique à l'échelle du document, et par l'absence de style par défaut. C'est un élément de structure à tout faire. Cependant, cette neutralité est aussi un inconvénient majeur d'un point de vue sémantique : il n'est pas possible pour un agent utilisateur de distinguer les usages qui sont fait de cette découpe, car il n'existe aucune convention de nommage des attributs, ni aucune recommandation pour l'appliquer. Un robot pourra difficilement distinguer un élément <div> contenant lesprincipaux liens de navigation du site, d'une liste de ressources externes, etc.
Meilleure organisation sémantique

HTML 5 introduit en quelque sorte les div spécialisés, possédant chacun une vocation propre et un sens. Par chance - ou clairvoyance - leur nom est suffisamment explicite pour se les approprier rapidement. Les avantages sont édidents : le code source est plus clair, les différentes parties composant un document sont clairement identifiées. En accroissant la valeur sémantique, nous augmentons aussi les possibilités d'analyse du contenu et de référencement.

Exemple de structuration sémantique 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Composition sémantique</title>
    <style>
      *:not(html):not(body) { padding: 5px; margin: 5px; border: 1px solid black; border-radius: 5px; }
      body {color: maroon; font-weight: bold;  }
      header {background-color: aquamarine; }
      nav { background-color: orange; }
      aside { background-color: burlywood; width: 23%; float: right; height: 250px; }
      section { background-color: antiquewhite;  width: 70%; }
      article { background-color: lightcyan; }
      footer { background-color: gold; }
    </style>
  </head>

  <body>
    <header>&lt;header&gt;</header>

    <aside>
      aside 
      <header>&lt;header&gt;</header>
      <nav>&lt;nav&gt;</nav>
    </aside>

    <section>
      &lt;section&gt;
      <header>&lt;header&gt;</header>
      <article>&lt;article&gt;</article>
      <footer>&lt;footer&gt;</footer>
    </section>

    <section>
      &lt;section&gt;
      <header>&lt;header&gt;</header>
      <article>&lt;article&gt;</article>
      <article>&lt;article&gt;</article>
    </section>

    <footer>&lt;footer&gt;</footer>
  </body>      
</html>
Plusieurs possibilités d'architecture de la page web

Les avantages sont évidents : le code source est très clair, les différentes parties composant un document sont clairement identifiées. En accroissant la valeur sémantique, nous augmentons aussi les possibilités d'analyse du contenu et de référencement.

Autre exemple de structuration sémantique 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Composition sémantique</title>
    <style>
      *:not(html):not(body) { padding: 5px; margin: 5px; border: 1px solid black; border-radius: 5px; }
      body {color: maroon; font-weight: bold;  }
      header {background-color: aquamarine; }
      nav { background-color: orange; }
      aside { background-color: burlywood; width: 23%; height: 240px; display: compact; }
      section { background-color: antiquewhite;  width: 70%; float: right; }
      article { background-color: lightcyan; width: 65%; }
      section aside { height: auto; float: right; height: 80px; }
      footer { background-color: gold; clear: right; }
    </style>
  </head>

  <body>
    <header>&lt;header&gt;</header>
    <nav>&lt;nav&gt;</nav>

    <section>
      &lt;section&gt;
      <aside>&lt;aside&gt;</aside>
      <article>&lt;article&gt;</article>
      <article>&lt;article&gt;</article>
    </section>

    <section>
      &lt;section&gt;
      <aside>&lt;aside&gt;</aside>
      <article>&lt;article&gt;</article>
      <article>&lt;article&gt;</article>
    </section>

    <aside>
      &lt;aside&gt;
      <header>&lt;header&gt;</header>
    </aside>

    <footer>&lt;footer&gt;</footer>
  </body>
</html>
La balise <header>
La plupart des sites web possèdent en général un en-tête, appelé header en anglais. Nous y trouvons le plus souvent un logo, une bannière, le slogan de votre site, etc. Cette balise représente le bloc d'en-tête (introduction) d'une section. Cela peut-être l'en-tête de votre page entière ou bien celle d'une section à l'intérieur même de votre page. Il remplace avantageusement son homologue classique <div id="header">, mais ne doit pas forcément être considéré comme un élément unique dans le document. Comme nous venons de le décrire, toute section estsusceptible de disposer de son propre <header>. >Attention de ne pas confondre la balise <head> qui est l'en-tête du fichier HTML et <header> qui est l'en-tête de notre page web. Ainsi, comme son nom le suggère, <header> correspond à un en-tête de section. Il peut s'agir de l'en-tête général du document <body>, s'il est placé de telle sorte dans la hiérarchie qu'il ne dispose pas d'ancêtre de section. Il peut alternativement être utilisé en début de <section> ou <article> le cas échéant, et donc contenir :
  • des informations d'introduction (titres <h1> à <h6>, paragraphes, méta-informations, etc.) ;
  • une navigation (<nav>, <form>, <a>, etc.) pour cette sous-partie de document ;
  • une table des matière pour l'ancêtre <section> ou <article> qui le contient.
Plusieurs cas d'utilisation

Son usage n'est donc pas limité à une seule occurence par page. Vous pouvez avoir plusieurs balises <header> dans votre page sauf à l'intérieur d'une autre balise <header>, dans les balises <footer> et <address>.

Usage commun de <header> 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>La balise d'en-tête</title>
    <style>
      body {background: yellowgreen; font-weight: bold; }
      header {background-color: black; color: yellowgreen; border-radius: 10px; padding: 7px; }
      h1 { display: inline; font: bold italic 4em sans-serif; }
      nav { background-color: yellowgreen; border-radius: 5px; }
      nav a { padding-left: 50px; }
    </style>
  </head>

  <body>
    <header>
      <img src="ciel.jpg" alt="" height="100" />
      <h1>Le ciel étoilé</h1>
      <nav>
        <a href="/">Accueil</a>
        <a href="/contact">Contact</a>
        <a href="/a-propos">A propos</a> 
      </nav> 
    </header> 
 
    <!-- Contenu du document -->
  </body>
</html>
En-tête d'un article

Dans l'exemple qui suit, <header> regroupe les éléments pouvant être considérés comme éléments d'en-tête pour la section <article>, à savoir un titre et les métas informations relatives, telles que la date ou l'auteur.

Usage de <header> dans <article> 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>La balise d'en-tête</title>
    <style>
      body {background: yellowgreen; font-family: Arial; }
      article {background-color: black; color: yellowgreen; border-radius: 10px; padding: 5px; font-weight: bold; }
      header, footer { background-color: yellowgreen; color: black; border-radius: 5px; padding-left: 5px; }
      header { margin-top:  -15px; }
    </style>
  </head> 
 
  <body>
    <article>
      <header>
        <h1>En savoir plus sur le ciel étoilé</h1>
        <p>Publication le <time datetime="2012-10-04" pubdate />Jeudi 4 octobre 2012 par Emmanuel REMY</p>
      </header>

      <p>Contenu de l'article</p>
    
      <footer>Pied de l'article</footer>
    </article>
  </body>
</html>
La balise <footer>
L'élément <footer> regroupe les contenus du pied d'une section ou d'un document (pied de page) et est destiné à recueillir les informations concernant l'auteur, les mentions légales, etc. Tel <header>, l'élément <footer> peut apparaître à divers endroits du document.
Fin de section

Le pendant de <header> pour le pied de page est <footer>. Il s'agit également d'un élément spécialisé possédant une valeur sémantique, visant à contenir les informations que nous pouvons éventuellement placer en fin de section, telles que des mentions légales, des informations de contact ou les sources d'actualité, et éventuellement une navigation. Ce contenu se rapporte au plus proche ancêtre de section, c'est-à-dire le document dans son ensemble s'il n'en possède pas, ou bien son parent de type <article> ou <section>.

Usage commun de <footer> 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Le pied de page</title>
    <style>
      body {background: yellowgreen; font-weight: bold;  }
      footer {background-color: black; color: yellowgreen; border-radius: 10px; padding: 7px; }
      nav { background-color: yellowgreen; border-radius: 5px; } 
      nav a { padding-left: 50px; } 
    </style>
  </head>

  <body>
    <!-- Contenu du document -->
    <p>Contenu</p>
    <p>De notre page Web</p>

    <!-- pied de page -->
    <footer>
      <p>Tout droit réservé</p>
      <nav>
        <a href="/">Retour à l'accueil</a>
        <a href="/contact">Contact</a>
        <a href="/plan">Plan du site</a>
      </nav>
    </footer>
  </body>
</html>
De par sa nature, un élément <footer> ne peut être contenu dans <header>, <address> ou <footer> lui-même. Son usage n'implique pas obligatoirement la présence d'un élément <header>.
La balise <nav>
<nav> a pour fonction de regrouper les liens de navigation considérés comme majeurs ou jugés suffisamment pertinents. Ceux-ci peuvent être internes ou externes à la page. Les niveaux de navigation peuvent être multiples sur un site web ou une application. Il peut s'agir de liens portant sur l'intégralité du site, sur une sous-partie de l'arborescence en particulier, vers des pages communes et transversalles, ou bien encore vers des sections du même document. L'élément <nav> est un choix de prédilection pour la navigation principale souvent dans <header> et éventuellement pour des navigations annexes de moindre valeur souvent dans <footer>.

Il peut également aider les robots d'indexation à dresser une carte de l'épine dorsale de l'arborescence, mais il n'est pas nécessaire de l'utiliser pour toutes listes de liens.

Exemple d'usage de l'élément <nav> 
<nav>
  <ul>
    <li><a href="/accueil">Accueil</a></li>
    <li><a href="/articles">Articles</a></li>
    <li><a href="/archives">Archives</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul><
</nav>
La balise <aside>
La balise <aside> à côté en anglais permet de regrouper tous les éléments qui ne sont pas directements en rapport avec le contenu de votre page. Le plus souvent, il s'agit des éléments présentes dans une barre latérale, comme un menu, de la publicité, une liste de liens, etc. L'élément <aside> peut représenter également une portion de contenu contextuelle, directement ou indirectement liée aux éléments qui l'entourent, tel un bloc d'archives relatives au contenu précédent. Une page web est bien souvent dotée d'un contenu principal et d'informations connexes qui ne sont pas essentielles à sa compréhension. On parle alors de contenu tangentiel, et l'élément <aside> est destiné à l'abriter. Il ne s'agit pas simplement de le considérer comme une section vouée à être rendue graphiquement à gauche ou à droite du contenu principal, mais bien d'un point de vue sémantique comme une section possédant une substance périphérique ou ampliative.

Nous pouvons considérer comme répondant à ces critères : une définition d'un des termes utilisés dans le contenu, une bibliographie, un glossaire, une chronologie apportant un fond historique, voire d'autres éclaircissements, astuces et notes qui n'ont de limite que l'imagination.

Usage commun de <aside> 
<body>
  <!-- Contenu du document -->

  <aside>
    <h2>Gestion</h2>
    <ul>
      <li><a href="/panier">Panier</a></li>
      <li><a href="/commandes">Commandes</a></li>
      <li><a href="/suivi">Suivi</a></li>
    </ul>

    <h2>Glossaire</h2>
    <dl>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets</dd>
      <dt>HTML</dt>
      <dd>HyperText Markup Language</dd>
    </dl>
  </aside>
</body>
Dans un <article>, <aside> joue le même rôle, mais avec une influence locale, c'est-à-dire tangentielle au contenu de l'article. Au regard de la valeur sémantique, son contenu possède une influence moins forte que celui de l'article parent. Il peut s'agir d'une citation du contenu qui doit être mise en valeur d'une manière particulière, une remarque qui doit être lue entre parenthèses, ou d'un texte qui sort tout simplement du flot narratif principal.
La balise <section>
La balise <section> définit comme son nom l'indique une section dans un document. Cette balise permet de rassembler des éléments similaires ensemble. Ainsi vous construisez une structure logique, les torchons ne sont pas simplement à côté d'autres torchons eux-mêmes à côté des serviettes, ils sont regroupés dans des sacs séparés.

Une <section> représente un bloc générique de contenu ayant la même thématique. Cela concerne les chapitres, les en-têtes et pieds de page, ou tout autre partie dans un document. L'élément <section> peut contenir des éléments de titre <h1> à <h6> pour une meilleure définition de la structure du document.

Elément fondamental de la nouvelle approche de découpe sémantique des documents, <section> regroupe un contenu relatif à une même thématique. Il peut être introduit par des éléments de titraille (<header>, <hgroup>, <h1> à <h6>, etc.). Il faut l'éviter si l'objectif est uniquement de l'utiliser pour affecter un style ou une appliquer un script ; si d'autres éléments sont plus appropriés (particulièrement <article>, <aside>, <nav>, <header>, <footer> et <div> en dernier recours).
Plusieurs cas d'utilisation

Ses cas d'utilisation sont multiples, cependant il ne faut pas le surexploiter : ce n'est pas un remplaçant de <div> en HTML 5, mais bien un élément spécialisé. Nous pouvons l'envisager pour scinder un document en plusieurs chapitres, pour découper un contenu présenté dans différents onglets ou différentes vues, voire pour délimiter les thématiques d'un élément <article>.

Exemple d'usage de <section> englobant des articles 
<section>
  <h1>Articles</h1>

  <article>
    <h2>Titre de l'article</h2>
    <p>Contenu de l'article</p>
  </article>

  <article>
    <h2>Titre de l'article</h2>
    <p>Contenu de l'article</p>
  </article>

  <article>
    <h2>Titre de l'article</h2>
    <p>Contenu de l'article</p>
  </article>
</section>

Rien ne vous oblige à utiliser des sections, l'erreur à ne pas commettre est de les utiliser pour tout. De manière générale, il faut vous demander si les contenus sont assez différents pour être indépendants. Dans la plupart des cas, si vous pouvez donner un titre simple à un groupe de contenu, alors il est indépendant.

Exemple d'usage de <section> dans un article 
<article>
   <h1>Les couleurs</h1>
   <p>Ce sont des perceptions visuelles subjectives dépendant de la fréquence des ondes lumineuses</p>

   <section>
     <h2>Le rouge</h2>
     <p>Couleur primaire, le rougeexcite le plus l'oeil humain après le jaune.</p>
   </section>

   <section>
     <h2>Le vert</h2>
     <p>Menthe à l'eau ou grenouille, le vert est souvent associé à la nature.</p>
   </section>
</article>

Dans ce dernier exemple, l'élément <section> joue le rôle de division thématique dans un même article.

Il est important de noter que quel que soit son usage, <section> est un bloc de contenu appartenant à une même thématique, tandis que <div> est uniquement un bloc de contenu sans relation particulière. Arbitrer en faveur de l'un ou de l'autre n'est pas très compliqué, il suffit de déterminer si une certaine cohérence répondant à une logique sémantique est respectée - par exemple si nous pouvons les réunir sous le même titre - ou bien si leur regroupement est un hasard dans la succession des éléments, dans la mise en page. En revanche, si le contenu peut être dissocié du document, voire lu de manière indépendante dans un agrégateur de flux (RSS, Atom), l'élément <article> est tout indiqué.
La balise <article>
La balise <article> permet de représenter un contenu qui se suffit à lui-même. En d'autres termes, elle représente un élément qui pourrait être extrait de votre site sans perdre de sens. Cela pourrait être un article de blog, une discution sur un forum, etc. Tout ce qui fait le contenu brut d'un site et qui n'a pas besoin d'autre chose pour avoir un sens. l'élément <article> est une spécialisation de <section>. Il possède une plus forte valeur sémantique, et pour cela il faut le considérer comme une portion de document qui se suffit à lui-même, par exemple une entrée distincte parmi d'autres. Nous pouvons extraire son contenu, éventuellement le syndiquer, sans que celui-ci perde son sens.
Cas d'utilisation

Bien sûr, il ne faut pas s'arrêter simplement au terme article, bien que cette désignation puisse représenter la plupart des cas d'utilisation sur un réseau véhiculant en majorité des articles de presse, des articles de blogs, de sites d'actualités ou d'outils variés de publication en ligne.

Exemple d'usage de <article> 
<article>
  <h1>Titre de l'article</h1>
  <p>Contenu de l'article...</p>
</article>

Etant donné le caractère souhaité autonome de cet élément vis-àvis de ce qui l'entoure, il est tout à fait possible d'utiliser une balise <header> pour l'introduire et <footer> pour lui affecter un pied d'article, voire de le découper en plusieurs parties via <section>.

Exemple d'usage de <article> avancé 
<article>
  <header>
    <h1>En savoir plus sur le ciel étoilé</h1>
    <p>Publication le <time datetime="2012-10-04" pubdate /> Jeudi 4 octobre 2012 par Emmanuel REMY</p>
  </header>
  <p>Contenu de l'article</p>
  <footer>Pied de l'article</footer>
</article>

Le contenu que nous plaçons dans une balise <article> sera souvent lié à une date ou à un horaire : un billet de blog ou un post de forum doit être daté pour que le lecteur sache si l'information qu'il lit est toujours d'actualité. La balise <time> est la compagne idéale de la balise <article>.

Dans cet exemple, l'élément <time> est muni de l'attribut pubdate, qui revêt une importance particulière spécifiquement dans le cadre d'un conteneur tel que <article>: sa signification correspond alors à la date de publication de l'ensemble de l'article si votre balise <time> comprend l'attribut pubdate, alors cette date sera rattachée à la balise <article> parente. Cette particularité n'est pas valable pour <section>, ce qui caractérise bien la différence sémantique existant entre ces deux éléments cousins.
Cas d'utilisation de la balise <time>

Bien entendu, la balise <time> ne se limite pas aux articles et permet de normaliser les dates de n'importe quel élément de votre site. Si vous trouvez que la balise <time> est trop contraignante pour les avantages qu'elle apporte pour le moment, laissez-moi vous donner quelques exemples d'utilisation concrète qui pourront apparaître :

  • Le navigateur vous propose d'ajouter un événement à votre agenda au survol d'une date.
  • Sur un fait d'actualité, les moteurs de recherche pourraient faire remonter les articles publiés récemment.
  • Les navigateurs pourraient proposer une conversion pour les personnes vivant dans un pays utilisant un autre calendrier ou étant sur un fuseau horaire différent.
La balise <address>
La balise <address> permet d'indiquer des contacts en rapport avec le contenu. Si elle se trouve dans la balise d'un <article>, nous y placerons les liens vers la page du ou des auteurs. Dans une page en général, nous y placerons les liens vers la ou les personnes qui s'occupent de ce site. Un bloc contenant des informations de contact peut être réalisé grâce à l'élément <address>. Celui-ci s'applique à son plus proche ancêtre de type <body> ou <article>. Si l'élément <address> est unique pour le document dans <body>, alors il contient les informations de contact pour cet ensemble. Si nous en retrouvons plusieurs au sein d'éléments de type <article>, alors ils contiennent les informations de contact relatives à l'auteur de l'article uniquement.
Cas d'utilisation

Les informations peuvent correspondre aux noms des personnes à l'origine du document, à leurs adresses e-mail, de messagerie instantanée ou web, éventuellement leurs coordonnées téléphoniques ou postales. Mais cet élément n'est pas prévu pour englober une simple adresse postale qui ne représenterait pas une information de contact vis-à-vis du contenu du document HTML.

Exemple d'usage de <address> 
<body>

  <header>...</header>

  <article>
    <header>
      <address>
        <a href="http://sitedemichel.org">Michel</a>
      </address>
    </header>

  </article>


  <footer>
    <address>
      <a href="http://manu.kegtux.org">Mon site</a>
      <a href="mailto:remy.manu@gmail.com">Contact</a>
    </address>
  </footer>
</body>
Les balises <h1> à <h6>
Les éléments de type <hX> où X représente un chiffre entre 1 et 6 correspondent à des titres heading en anglais de niveaux différents. <h1> est un titre de premier niveau, <h2> un titre de deuxième niveau, et ainsi de suite jusqu'au petit dernier <h6>.
Ensemble des titres

Ils possèdent une forte valeur sémantique et doivent être utilisés là ou un titre de document ou de section est nécessaire, car il ne suffit pas d'affecter des propriétés de style telles qu'une police énorme à un paragraphe <p> pour lui conférer la vocation d'un titre.

Exemple de hiérarchie de titres 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Les titres</title>
  </head>

  <body>
    <h1>Titre de niveau 1</h1>
    <h2>Titre de niveau 2</h2>
    <h3>Titre de niveau 3</h3>
    <h4>Titre de niveau 4</h4>
    <h5>Titre de niveau 5</h5>
    <h6>Titre de niveau 6</h6>
  </body>
</html>

Bien qu'il ne soit pas invalide de sauter des niveaux par exemple de passer de <h2> à <h5>, cette pratique est fortement déconseillée par la spécification HTML, car la conversion vers d'autres types de contenu ou la constitution d'une liste cohérente de la hiérarchie du document peuvent devenir problématiques.

Styles proposés par défaut 
h1 {
  display: block;
  font-size: 2em;
  margin: .67em 0 .67em 0;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin: .83em 0 .83em 0;
  font-weight: bold;
}

h3 {
  display: block;
  font-size: 1.17em;
  margin: 1em 0 1em 0;
  font-weight: bold;
}

h4 {
  display: block;
  margin: 1.33em 0 1.33em 0;
  font-weight: bold;
}

h5 {
  display: block;
  font-size: .83em;
  margin: 1.67em 0 1.67em 0;
  font-weight: bold;
}

h6 {
  display: block;
  font-size: .67em;
  margin: 2.33em 0 2.33em 0;
  font-weight: bold;
}
hiérarchie des éléments de sections et outline

Plusieurs éléments <hX> de même niveau peuvent se côtoyer. Contrairement à l'élément <title>, il peut exister plusieurs titres de premier niveau <h1> dans une page, par exemple dans plusieurs sections. Ils correspondent alors aux niveaux d'en-têtes de leur sections respectives. C'est à partir de ce moment que l'apprivoisement se corse.

Avec HTML 5 et l'introduction des éléments délimitant des sections de document (section, aside, nav, article), il n'est pas strictement nécessaire de suivre une hiérarchie de titres aussi simpliste et linéaire que dans l'exemple précédent. Une telle organisation peut tout à fait être transposée de document global à une section en particulier, et de ce fait <h1> pourra représenter le titre principal d'un <article>, aux côté d'autres confrères articles du même acabit.

Cela signifie qu'une page web peut être amenée à comporter différentes sections ou articles, chacun doté de sa propre hiérarchie de titres, débutant par <h1>. Il s'agit alors d'un découpage explicite.

Si nous devions dresser une table des matières du document HTML, il faudrait se baser sur les titres structurant le document. Cet algorithme spécifique est nommé outline dans la spécification. Il faut principalement le voir comme une liste numérotée et indentée des titres, telle que nous pouvons le rencontrer pour le sommaire d'un livre.

Avec HTML 5, les sections <section>, <aside>, <nav> et <article> définissent les grands ensembles thématiques du document, d'après leur ordre et leur imbrication. Ils possèdent des en-têtes et titres respectifs qui doivent être pris en compte par l'outline, parmi lesquels <hgroup> et <h1> à <h6>. Dès lors, l'algorithme est défini par plusieurs grands principes :

  • Il faut considérer le premier en-tête de chaque section comme titre de cette même section.
  • Tous les éventuels autres titres - hormis ceux placés de concert dans le premier <hgroup> s'il existe - créent des sections implicites. Sont concernés à cet effet tous les titres <h1> à <h6> non contenus dans <hgroup>, et chaque <hgroup>.
  • L'élément <header> n'est pas concerné par cet algorithme, et n'affecte ni l'outline, ni la création implicite de sections ou de titres.
  • Le découpage explicite des portions par les éléments de section précités y participe bien évidemment aussi.
Hiérarchie des titres dans la structure du document 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Les titres</title>
  </head>

  <body>
    <header>
      <h1>Titre principal</h1>
      <nav>
        <ul>
          <li><a href="/accueil">Accueil</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <section>
      <h1>Section1</h1>
      <p>...</p>
      <section>
        <h1>Section 1.1</h1>
        <p>...</p>
      </section>
    </section>

    <section>
      <hgroup>
        <h1>Section 2</h1>
        <h2>Sous-titre</h2>
      </hgroup>
      <p>...</p>
      <section>
        <h1>Section 2.1</h1>
        <p>...</p>
      </section>
      <section>
        <h1>Section 2.2</h1>
        <p>...</p>
      </section>
    </section>

    <aside>
      <h1>Titre d'une zone latérale</h1>
      <h2>Sous-titre d'une zone latérale</h2>
    </aside>
  </body>
</html>

Les sections explicites autorisent le saut de niveaux de titre - par exemple, il est possible de débuter un <article> par <h1>. Le choix du niveau initial est relativement libre, pour autant qu'il reste logique et harmanieux tout au long du document. Il est envisageable d'utiliser tout niveau de titre, par exemple basé sur l'attachement aux styles CSS, sans se préoccuper de sauter un ou plusieurs niveaux.

Les exceptions peuvent être écrites en tenant compte des titres contenus dans <hgroup> pour les sous-titres, ou avec des classes spécifiques lorsque c'est nécessaire. Toutefois, il faut toujours veiller à ne pas sauter de niveaux pour l'enchaînement global. C'est une nouvelle façon de penser qui a - entre autre - motivé la création de l'élément <hgroup>. Il permet de ne prendre en compte pour l'outline que le premier titre de plus haut niveau parmi ceux qu'il contient et d'ignorer les autres sous-titres lors dudéroulement de l'algorithme, car ceux-ci ne sont pas destinés à créer des sections.
La balise <hgroup>
L'élément <hgroup> regroupe un ou plusieurs titres <h1> à <h6>. Idéalement, il n'a de vocation à être utilisé qu'à partir de deux titres, car il représente l'en-tête d'une section, lorsque celle-ci dispose de plusieurs titres, sous-titres, ou titres alternatifs.
Exemple d'usage de <hgroup> 
<article>
   <hgroup>
     <h1>Titre principal</h1>
     <h2>Sous-titre</h2>
   </hgroup>
   <p>Contenu de l'article</p>
</article>

Dans cet exemple, <hgroup> représente une spécialisation de <header>. A la différence de ce dernier qui peut contenir tout élément servant d'introduction à une section, <hgroup> doit être exclusivement composés d'éléments <h1> à <h6>. De son côté, <header> peut contenir un titre <h1> à <h6>, ou <hgroup> en complément d'autres éléments.

Autre exemple d'usage de <hgroup> 
<article>
  <header>
    <hgroup>
      <h1>Titre principal</h1>
      <h2>Sous-titre</h2>
    </hgroup>
    <p>Publication le <time datetime="2012-10-04" pubdate />Jeudi 4 octobre 2012 par Emmanuel REMY</p>
  </header>
  <p>Contenu de l'article</p>
</article>

Dans cet autre exemple, l'objet de <hgroup> est de masquer les sous-titres à l'algorithme pouvant dresser la table des matières du document (l'outline), et donc de ne conserver que le titre principal de l'article à savoir <h1>.

Listes

Les listes HTML sont prévues pour dresser des énumérations possédant une valeur sémantique.

  1. Les structures disponibles pour une liste ordonnée (liste numérotée) et non ordonnée (liste à puces) sont constituées par les éléments <ol> et <ul> au sein desquels chaque élément individuel est un <li>. Elles sont couramment employées pour la conception de menus de navigation, qui ne sont en réalité que des énumérations de liens.
  2. Lorsqu'il s'agit de rédiger une liste de définitions, l'élément <dl> peut être utilisé en conjonction avec <dt> et <dd>.
La balise <ol>
Une liste ordonnée (ordered list en anglais) est équipée de puces numérotées automatiquement par le navigateur. Le conteneur <ol> est toujours parent de zéro ou plusieurs éléments de liste <li>.

Exemple de liste ordonnée <ol> 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Les listes</title>
  </head>

  <body>
    <p>Sommaire :</p>
    <ol>
      <li>Les étoiles de la galaxie</li>
      <li>Les planètes du système solaire</li>
      <li>Les nébuleuses et les amas globulaires</li>
    </ol>
  </body>
</html>
Attributs possibles pour </ol>
Attribut Valeurs Rôle
start nombre entier Valeur de départ pour la numérotation. Peut être négatif.
reversed reversed ou ou sans valeur Indique que la numérotation est descendante.
type 1 ou a ou A ou i ou I. Type de numérotation (numérique classique, lettrée, chiffres romains).
Exemple de liste ordonnée en proposant des attributs 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Les listes</title>
  </head>


  <body>
    <p>Sommaire :</p>
    <ol start="2" type="A">
      <li>Les étoiles de la galaxie</li>
      <li>Les planètes du système solaire</li>
      <li>Les nébuleuses et les amas globulaires</li>
    </ol>
  </body>
</html> 
La balise <ul>
Une liste non ordonnée (unordered list en anglais) <ul> partage le podium avec <ol> bien qu'elle soit plus fréquemment utilisée. Comme son nom l'indique, son contenu n'est pas spécialement trié et son ordre peut être changé sans altérer significativement son sens. Elle est également toujours parent de zéro ou plusieurs éléments de liste <li>.
Les listes non ordonnées

Elle ne dispose pas d'attribut spécifique contrairement à <ol>, mais l'apparence par défaut de ces deux types de listes peut être modifiée grâce à la propriété CSS liste-style-type qui adopte entre autres les valeurs disc défaut, square, circle pour les puces ; et armenian, decimal, decimal-leading-zero, geogian, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman pour la numérotation.

Exemple de liste non ordonnée <ol> 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Les listes</title>
  </head>

  <body>
    <p>Sommaire :</p>
    <ul>
      <li>Les étoiles de la galaxie</li><
      <li>Les planètes du système solaire</li>
      <li>Les nébuleuses et les amas globulaires</li>
    </ul>
  </body>
</html>
La balise <li>
D'après ce que nous venons de découvrir, nous savons déjà que <li> est un élément de liste list item en anglais de liste ordonnée <ol> ou non ordonnée <ul>. Il remplit cette même fonction pour l'élément <menu> voir du côté des éléments interactifs.
Attribut spécifique à <li>
Attribut Valeurs Rôle
value nombre entier Valeur ordinale de l'élément de liste.
Attribut facultatif value

Il comprend un attribut facultatif nommé value, qui fut déclaré obsolète dans les précédentes versions de HTML 5, mais réintroduit pour des raisons pratiques en HTML 5. Cet attribut n'est autorisé que dans le cadre d'une liste ordonnée <ol> puisqu'il correspond à la numérotation de cette liste pour contrecarrer les effets de l'incrémentation automatique.

Exemple d'utilisation de <li> 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Les listes</title>
  </head>

  <body>
    <p>Sommaire :</p>
    <ol>
      <li>Les étoiles de la galaxie</li>
      <li value="3">Les planètes du système solaire</li>
      <li>Les nébuleuses et les amas globulaires</li>
    </ol>
  </body>
</html>
La balise <dl>
La liste de définitions <dl> description list en anglais répond au besoin de lister des paires de termes et de descriptions qui leur sont associés.
Ensemble de définitions

Nous pouvons la comparer à un dictionnaire associant la définition <dd> au mot <dt>. Aucun tri alphabétique n'est cependant à l'oeuvre, il appartient à l'auteur de la liste de l'ordonner dans le code source.

Exemple de liste de définitions 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Les listes</title>
    <style>
      body { background: bisque; }
      h4 { color: brown; margin-bottom: -7px; border-bottom: solid thin; }
      dt { color: darkgreen; font-weight: bold; }
    </style>
  </head>

  <body>
    <h4>Mots clés pour <span lang="en">media queries :</span></h4>
    <dl>
      <dt>screen</dt>
      <dd>Ecrans</dd>
      <dt>handheld</dt>
      <dd>Périphériques mobiles ou de petite taille</dd>
      <dt>print</dt>
      <dd>Impression</dd>
      <dt>tv</dt>
      <dd>Téléviseur</dd>
      <dt>all</dt>
      <dd>Tous les précédents</dd>
    </dl>
  </body>
</html>
La balise <dt>
Terme de liste de définition, l'élément <dt> ne peut contenir que des éléments de phrasé. A chaque terme <dt> correspond une définition <dd>.
La balise <dd>
Elément de description de liste de définition, l'élément <dd> peut contenir des éléments de flux ou de phrasé. Il correspond à l'élément <dt> le précédant.

Texte

La plus grosse partie d'un document HTML contient du texte. Il est possible en HTML, comme pour un traitement de texte, d'organiser les différents sujets sous forme de paragraphes. Nous pouvons également mettre en exergue certains passages, alors que d'autres seront au contraire d'une information toute relative. Il est possible de surligner certains mots importants, d'utiliser des indices, des exposants, etc. Ce chapitre nous fera découvrir un certain nombre d'éléments relativement conséquents qui vont nous permettre de structurer nos informations de façon intuitive.

La balise <p>
Certainement une des balises les plus rencontrées en HTML, <p> marque le début d'un nouveau paragraphe qui se voit fermé par un </p>. Son contenu est de type phrasé, c'est-à-dire qu'il contient effectivement du texte, potentiellement des sauts de ligne <br>, mais aussi d'autres éléments de phrasé pouvant contribuer à la sémantique de ce texte, par exemple <em>, <strong>, <abbr>, <ins>, <del>, <q>, etc.
Bloc de texte

C'est un élément de type bloc qui offre une information sémantique au texte qu'il contient. Un autre paragraphe le suivant pourra correspondre à une nouvelle idée. Un paragraphe ne peut contenir un autre paragraphe. Le style par défaut des navigateurs introduit un espace avant et après chacun des paragraphes.

Exemple d'usage de <p> 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Paragraphes</title>
  </head>

  <body>
    <p>Premier paragraphe.</p>
    <p>Deuxième paragraphe.</p>
  </body>
</html>
La balise <blockquote>
Un bloc de citation <blockquote> block quotation en anglais représente une section du document qui est extraite d'une autre source. Il peut contenir des éléments de flux, c'est-à-dire principalement un ou plusieurs paragraphes, mais aussi des titres et des images.
Exemple de citation avec <blockquote> 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Citation</title>
    <style>
      body { background: bisque; }
      blockquote { color: darkgreen; font-weight: bold; }
    </style>
  </head>

  <body>
    <p>Un vieux sage disait : </p>
    <blockquote>
      <p>Un homme averti en vaut deux.</p>
    </blockquote>
  </body>
</html>
Attribut spécifique à <blockquote>
Attribut Valeurs Rôle
cite URL Adresse de référence pour la source de la citation.
Attribut cite

L'attribut cite fait référence à l'adresse de cette source. Il n'est pas rendu visuellement dans les navigateurs traditionnels, mais peut être exploité par des extensions ou des robots d'indexation.

Exemple de citation avec <blockquote> 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Citation</title>
    <style>
        body { background: bisque; }
        blockquote { color: darkgreen; font-weight: bold; }
    </style>
  </head>

  <body>
    <p>Un vieux sage disait : </p>
    <blockquote cite="http://fr.wiktionary.org/">
      <p>Un homme averti en vaut deux.</p>
    </blockquote>
  </body>
</html>

Un bénéfice peut être tiré du nouvel élément <footer> en HTML 5 pour afficher la source en clair, en tant qu'information séparée du contenu principal.

Exemple de citation avec <blockquote> et <footer> 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Citation</title>
    <style>
      body { background: bisque; }
      blockquote { background-color: antiquewhite; border-radius: 5px; padding: 5px; border: solid thin; }
      footer { background-color: burlywood; border-radius: 5px; padding: 3px; }
    </style>
  </head>

  <body>
    <p>Un vieux sage disait : </p>
    <blockquote cite="http://fr.wiktionary.org/">
      <p>Un homme averti en vaut deux.</p>
      <footer>
        <a href="http://fr.wiktionary.org/w/index.php?title=Catégorie>
           Voir le site de wiktionary !
        </a>
      </footer>
    </blockquote>
  </body>
</html>
l'élément <blockquote> est réservé aux citations d'une taille respectable qui doivent être affichées en bloc, pour les courtes citations, comme c'est le cas dans notre exemple, préférez l'élément <q>.
La balise <q>
Petit frère de <blockquote>, l'élément <q> est réservé aux citations courtes. Il est encadré automatiquement par des guillemets dans tous les navigateurs.
Exemple d'usage de <q> 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Citation</title>
    <style>
       body { background: bisque; }
       q { color: darkgreen; font-weight: bold; }
    </style>
  </head>

  <body>
    <p>Un vieux sage disait : <q>Un homme averti en vaut deux.</q></p>
  </body>
</html>
Attribut spécifique à <q>
Attribut Valeurs Rôle
cite URL Adresse de référence pour la source de la citation.
Comme pour <blockquote>, l'attribut cite fait référence à l'adresse de cette source. Il n'est pas rendu visuellement dans les navigateurs traditionnels, mais peut être exploité par des extensions ou des robots d'indexation.
La balise <cite>
L'élément <cite> représente le titre d'une oeuvre, citée ou juste mentionnée dans le document. Cette catégorie englobe le titre d'un ouvrage, d'une chanson, d'une pièce de théatre, d'un opéra, d'un film, d'une émission de télévision, d'un jeu, d'une oeuvre d'art peinture, sculpture, d'une exposition, ou plus couramment d'une autre page web, etc.
Citation de texte

Il ne représente pas une citation de texte, et ne doit pas être confondu pour cela avec les éléments <q> et <blockquote> qui sont plus appropriés, ni avec leur attribut cite. Il n'est pas voué non plus à baliser le nom d'une personne ou d'un auteur. Tous les navigateurs disposent d'un bon support de <cite> avec un style par défaut en italique.

Exemple d'usage de <cite> 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Citation</title>
    <style>
      body { background: bisque; }
      cite { color: red; }
    </style>
  </head>

  <body>
    <p>
      Franc Herbert a écrit le cycle de <cite>Dune</cite> avec maestria. Si nous devions
      en faire un film, John Williams serait un bon prétendant pour composer la bande
      originale après ses prouesses pour <cite>L'empire contre-attaque</cite> et
      <cite>Jurassic Park</cite>.
    </p>
  </body>
</html>
La balise <strong>
L'élément <strong> confère au texte une forte importance. Visuellement, il est représenté par un corps de police plus gras, mais contrairement à <b>, il possède une réelle valeur sémantique. Du contenu placé entre balises <strong> doubles aura deux fois plus d'importance.
Exemple d'usage de <strong> 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Important</title>
    <style>
      body { background: bisque; }
    </style>
  </head>

  <body>
    <p>
      Il est très important que <strong>que vous connaissiez</strong> 
      les langages de programmation.
    </p>
  </body>
</html>
La balise <em>
Une emphase peut être appliquée à une portion de texte avec <em>. Il s'agit d'un procédé linguistique qui donne de l'importance ou une affectation pompeuse au discours. Il ne doit pas être confondu avec <i>, même si son apparence par défaut est un style de texte en italique.
Exemple d'usage de <em> 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Emphase</title>
    <style>
      body { background: bisque; }
      em { color: brown; }
    </style>
  </head>

  <body>
    <p>
      J'<em>adore</em> l'informatique, et je suis sûr que <em>tu</em> es comme moi.
    </p>
  </body>
</html>
La balise <b>
Balise historique, <b> a vu son sens évoluer. Elle représente désormais une mise en valeur via un style différent, sans lui conférer d'importance particulière dans son contexte. Il peut s'agir de mots-clés dans un document, de noms de produits dans un article.
Synthèse vocale ou introduction d'un article

Il s'agissait initialement d'une balise de mise en gras bold en anglais pour le texte. C'est pourquoi elle conserve la convention typographique de texte avec graisse accentuée. Puisqu'il s'agit à la base d'un caractère visuel, cet élément a gagné du sens avec HTML 5. afin que sa définition ne repose pas uniquement sur son apparence graphique. Cela n'avait de sens qu'avec un média visuel, écran ou imprimé ; tandis que cette nouvelle façon de l'aborder reste pertinente pour les agents utilisateurs tels que des synthèses vocales.

Exemple d'usage de <b> 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Balise historique</title>
    <style>
       body { background: bisque; }
    </style>
  </head>

  <body>
    <p>
      Le <b>patator</b> (aussi appelé <b>lance-patate</b>) est une arme artisanale, projetant
      à moyenne distance un projectile, le plus souvent une patate.
    </p>
  </body>
</html>

La spécification précise aussi que nous pouvons marquer grâce à cette balise <b> l'introduction d'un article. Toutefois, l'élément <strong> est plus indiqué lorsque nous voulons conférer une importance au contenu.

Exemple d'usage de <b> 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Balise historique</title>
    <style>
      body { background: bisque; }
      article { background-color: antiquewhite; border-radius: 5px; padding: 5px; border: solid thin; }
      article h1 { background-color: burlywood; border-radius: 5px; padding: 3px; }
    </style>
  </head>

  <body>
    <article>
      <h1>Géolocalisation en HTML 5</h1>
      <p>
        <b>La géolocalisation fait partie des <abbr title="Application Programming Interface">API</abbr> 
        gravitant autour de HTML 5</b> (<a href="http://dev.w3.org/geo/api/spec-source.html" 
        hreflang="en">Geolocation API Specification</a>) et les nouvelles fonctionnalités introduites par 
        la mobilité. Ses usages sont nombreux et souvent corrélés avec des bases de données de 
        renseignements géographiques.
      </p>
    </article>
  </body>
</html>
La balise <i>
Aux côtés de <b>, la balise <i> tient une bonne place sur le podium des balises historiques, pour le rôle de la mise en forme en italique. Avec le souci de la séparation de la présentation et du contenu pour ne conserver que la valeur sémantique du document, cet élément visuel n'en menait pas large. Mais sa grande popularité l'a sauvé.
Portion de texte subsidiaire

Son rôle a été redéfini pour une portion de texte qui doit être décalée du contenu environnant, mais sans convoyer d'importance ou d'emphase. La convention typographique adoptée est le texte en italique et cela tombe bien!.

Exemple d'usage de <i> 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset=UTF-8>
    <title>Balise historique</title>
    <style>
      body { background: bisque; font-weight: bold; }
    </style>
  </head>

  <body>
    <p>La lettre <i>A</i>  est la première lettre de l'alphabet.</p>
    <p>Chewbacca est le copilote du <i>Faucon Millenium</i>.</p>
  </body>
</html>
La balise <small>
Iitialement voué à diminuer la taille du texte dans les précédentes versions de HTML, <small> a été redéfini astucieusement en small print, ce que nous pourrions traduire par petit caractères d'imprimerie figurant au bas des contrats dont l'auteur souhaite que l'on ne le lise pas".
Note de contenu

Plus prosaïquement, il peut s'agir de mentions spécifiques légales, d'avertissement discrets, ou de précision d'une licence d'utilisation. Nous pouvons également le considérer comme note de contenu équivalente à un élément <aside> en ligne.

Exemple d'usage de <small> 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset=UTF-8>
      <title>Small print</title>
      <style>
         body { background: bisque; font-weight: bold; }
      </style>
   </head>

   <body>       
      <p>Votre texte normal</p>
      <ul>
         <li><small>Reportez-vous aux <a href="cgv.html">conditions générales de vente</a></small></li>
         <li><small>Les éléments de cette page sont sous licence <a href="licences.html">Licence Bidouille Software</a></small></li>
      </ul>
   </body>
</html>
La balise <dfn>
L'élément <dfn> defining instance en anglais représente un terme défini dans le document et plus particulièrement dans un bloc de texte. Il doit figurer à l'endroit où l'explication d'un mot, d'un concept ou d'une association d'idées est évoquée.
Baliser une nouvelle définition

Mais attention, ce n'est pas lui qui contient la définition, il s'agit juste de baliser le terme explicité. Il n'y a pas de règle de style par défaut, mais la plupart des névigateurs ajoutent un style italique sur cet élément.

Exemple de citation avec <dfn>> 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset=UTF-8>
      <title>Annexe</title>
      <style>
         body { background: bisque; font-weight: bold; }
         dfn { color: brown; }
      </style>
   </head>

   <body>       
      <p>
         La <dfn>rétrocompatibilité</dfn> consiste à développer une solution technique en tenant compte
         de son passé, afin d'assurer une continuité de fonctionnement avec les précédentes versions.
      </p>
   </body>
</html>
La balise <abbr>
Les abréviations sont de plus en plus courantes. On parle aussi de sigle et d'acronyme, pour lequel un élément <acronym> avait été prévu dans les versions précédentes de HTML, mais a été abandonné puisque peu de rédacteurs web faisaient réellement la différence entre ces trois catégories, qui dépendent des unes des autres :
Différents types d'abbréviation
  • Une abréviation est un simple raccourcissement de texte ex : labo pour laboratoire, N.-D. de P. pour Notre-Dame de Paris.
  • Un sigle est l'abréviation d'une locution dont nous ne conservons que les initiales que nous séparons en théorie d'un point ex : T.V.A. ou J.O. pour Jeux olympiques.
  • Un acronyme est un sigle dont l'ensemble des lettres se lit ou se prononce comme un mot ex : ONU, Ovni> ou Radar.
Définition des expressions

L'élément <abbr>> est là pour nous aider à définir ces expressions, sans devoir les préciser à la suite du texte, d'une façon génante pour la lecture.

Exemple d'utilisation de <abbr> 

<!DOCTYPE html>
<html lang="fr">
  <head>
      <meta charset=UTF-8>
      <title>Abréviation</title>
      <style>
         body { background: bisque; }
         abbr { color: brown; font-weight: bold; }
      </style>
   </head>

   <body>       
      <p>
         Le <abbr title="World Wide Web Consortium">W3C</abbr> est l'organisme chargé de promouvoir les standards
         et la compatibilité des technologies du Web.
      </p>
   </body>
</html>

Son attribut title n'est pas spécifique - car c'est un attribut global applicable à tous les autres éléments -, mais c'est lui qui contient la version texte étendue de l'abréviation ou de l'acronyme. Il est notamment utilisé pour afficher une infobulle au survol, si le lecteur désire connaître l'explication de l'abréviation.

La balise <code>
Un fragment de code informatique - quel que soit le langage - peut être contenu dans un élément <code>>. En général, une police à pas fixe lui est appliqué, ce qui le distingue d'un texte conventionnel et évoque bien un morceau d'instruction qui pourrait être lue dans un éditeur de texte.
Exemple d'usage de <code> 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset=UTF-8>
      <title>Abréviation</title>
      <style>
         body { background: bisque; font-weight: bold; }
         code { color: brown; }
      </style>
   </head>

   <body>       
      <p>
         Dans un document HTML, vous pouvez rencontrer la fonction <code>document.getElementById()</code>,
         la balise <code>&lt;script&gt;</code>, sans oublier la propriété CSS <code>display</code>.
      </p>
   </body>
</html>
La balise <var>
L'élément <var> représente au choix :
  • Une variable dans une expression mathématique ou informatique.
  • Un espace réservé à un texte que le lecteur du document peut mentalement remplacer par une autre valeur.
Exemple d'usage de <var> 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset=UTF-8>
      <title>Abréviation</title>
      <style>
         body { background: bisque; font-weight: bold; }
         var { color: brown; }
      </style>
   </head>

   <body>       
      <p>
         Le produit de la multiplication de <var>x</var> par <var>y</var> est 42.
      </p>
   </body>
</html>
La balise <kbd>
L'élément <kbd> représente une entrée au clavier bold en anglais, voire au moyen d'autres périphériques d'entrée. Lorsqu'il est contenu dans un élément <samp>, il représente une entrée telle qu'elle a été retournée par le système. A l'inverse, lorsqu'il contient un élément <samp>, il représente une entrée basée sur une sortie du système, par exemple pour invoquer un élément de menu. Lorsqu'il est contenu dans un autre élément <kbd>, il représente une touche ou un autre moyen d'entrée.
Exemple d'usage de <kbd> 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset=UTF-8>
      <title>Abréviation</title>
      <style>
         body { background: bisque; font-weight: bold; }
         kbd { color: brown; }
         kbd kbd {
            background: #F4F0D3;
            border: 1px solid #DFCB41;
            box-shadow: 2px 2px 1px #CCC;
            padding: 2px 5px;
         }
      </style>
   </head>

   <body>       
      <p> Entrez l'adresse <kbd>manu.kegtux.org</kbd>.</p>
      <p> Confirmez en cliquant sur <samp><kbd>Oui</kbd></samp>.</p>
      <p>Appuyer sur la touche <kbd><kbd>F1</kbd></kbd></p>
   </body>
</html>
La balise <samp>
La balise <samp> délimite un exemple ou un échantillon sample en anglais de sortie produite par un programme ou un système. Lorsqu'il est contenu dans un élément <samp>, il représente une entrée telle qu'elle a été retournée par le système. A l'inverse, lorsqu'il contient un élément <samp>, il représente une entrée basée sur une sortie du système, par exemple pour invoquer un élément de menu. Lorsqu'il est contenu dans un autre élément <kbd>, il représente une touche ou un autre moyen d'entrée.
Exemple d'usage de <samp> 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset=UTF-8>
      <title>Abréviation</title>
      <style>
         body { background: bisque; font-weight: bold; }
         samp { color: brown; }
      </style>
   </head>

   <body>       
      <p> Si vous obtenez le message <samp>(Syntax error)</samp>, ne paniquez pas !</p>
   </body>
</html>
Les balises <sub> et <sup>
Un fragment de texte peut être placé en indice avec l'élément <sub> subscript en anglais. L'intérêt est mathématique et chimique. L'opposé de <sub> pour placer cette fois-ci le texte en exposant est <sup> superscript en anglais. L'intérêt est aussi mathématique et chimique, mais permet aussi de placer des références pour des notes en bas de page.
Exemple d'usage de <sub> et de <sup> 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset=UTF-8>
      <title>Abréviation</title>
      <style>
         body { background: bisque; }
         strong { color: brown; }
      </style>
   </head>

   <body>       
      <p>Le symbole chimique de l'eau est : <strong>H<sub>2</sub>O</strong>.</p>
      <p>L'équation est la suivante :
         <strong>(a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup></strong>.
      </p>
   </body>
</html>
La balise <time>
Un nouveau venu avec HTML5 est l'élément <time>. Dans un web sémantique, cet apport vient combler un manque cruel de balisage des heures et des dates - hors microformats - du calendrier grégorien. Le calendrier grégorien fut instauré par le pape Grégoire XIII. C'est à l'origine pour corriger la dérive du calendrier julien par rapport à la durée effective de la révolution de la Terre autour du Soleil, qu'il a été introduit un subtil décalage supplémentaire concernant les années bissextiles. Les années séculaires (1800, 1900, 2000...) ne sont bissextiles que si elles peuvent être divisées par 400. Ce calendrier est désormais utilisé dans la majeure partie du monde, et par la totalité des systèmes informatiques.
Agenda personnel

L'élément <time> représente un avantage non seulement pour la sémantique, mais aussi pour l'indexation automatisée par les moteurs de recherche, ou encore pour l'importation de données dans un agenda personnel. Son but est de lever toute ambiguïté sur la syntaxe à utiliser pour baliser une date ou une heure.

Exemple d'usage de <time> 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset=UTF-8>
      <title>Abréviation</title>
      <style>
         body { background: bisque; }
         time { color: brown; font-weight: bold; }
      </style>
   </head>

   <body>       
      <p>Le cours d'informatique se déroulera à <time>13:30</time> h.</p>
   </body>
</html>
Formatage des dates

Au sujet du format de date autorisé, nous adaptons la notation suivant les besoins. Dans les exemples que nous traitons, Y représente un chiffre codant pour les années (year), M pour les mois (month), D pour les jours (day), H pour les heures (hour), M - après H - pour les minutes (minute), S pour les secondes (second). Soit YYYY une année sur 4 chiffres, et HH une heure sur deux chiffres entre 00 et 24. Nous obtenons alors :

  • Une date YYYY-MM-DD, par exemple 2001-04-01 pour le 1er avril 2001.
  • Une heure HH:MM, par exemple 13:37 pour 13 h 37.
  • Une date et une heure : YYYY-MM-DDTHH:MMZ, pour une date UTC ou YYYY-MM-DDTHH:MM+HH:MM pour la précision d'un décalage de fuseau horaire.

L'heure universelle n'est pas la même en tout point du globe en tout moment, il est d'usage de définir des fuseaux horaires lorsque nous voulons rédiger des dates qui doivent être comprises à l'international.

Le temps universel coordonné UTC sert de référence. Il succède à l'ancienne appelation GMT. Par exemple, en Europe, le Royaume-Uni appartient au fuseau UTC+0 (avec l'Islande, l'Irlande, le Portugal). Suivent ensuite la majorité des pays d'Europe Centrale qui sont en avance d'une heure à UTC+1 (France, Espagne, Allemagne, Belgique, Suisse, Norvège, Suède, Italie, Pays-Bas, Autriche, Hongrie, Pologne, Tchéquie, Slovaquie, etc.) puis avec UTC+2 les pays d'Europe de l'Est (Finlande, Estonie, Roumanie, Bulgarie, Grèce), et ainsi de suite. La notation terminée par un Z est équivalente à un temps UTC+0 pour lequel nous ne précisons pas de décalage, et donc à +00:00. La notation terminée par +HH:MM présice un décalage en heures et minutes. De ce fait, +02:00 est équivalent à UTC+2.
Attribut spécifique à <time>
Attribut Valeurs Rôle
datetime date ou heure ou date et heure Permet d'associer une date et/ou une heure à l'élément, dans un format standardisé.
pubdate pubdate ou "" ou (vide) Indique que la date donnée est celle de la publication du plus proche ancêtre <article> s'il est présent, ou sinon du document dans sa globalité.
L'attribut datetime
Si l'attribut datetime n'est pas spécifié, alors le contenu texte de l'élément doit se conformer au format de date, comme dans l'exemple précédent. En revanche, s'il est présent, le contenu de l'élément est totalement libre entre les balises de début et de fin.
Exemple d'usage de <time> 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset=UTF-8>
      <title>heure et date</title>
      <style>
         body { background: bisque; }
         time { color: brown; font-weight: bold; }
      </style>
   </head>

   <body>       
      <p>
         Le cours d'informatique se déroulera le <time datetime="2012-10-05">5 octobre</time> ou bien
         le <time datetime="2012-10-06T14:00+01:00">lendemain à 14h</time>.
      </p>
   </body>
</html>

Les heures peuvent être complétées par des secondes, nous écrivons alors simplement HH:MM:SS au lieu de HH:MM. Pour atteindre une plus grande précision, il est possible de suffixer l'heure d'un point . et d'une valeur numérique (d'un ou plusieurs chiffres) qui représentera la valeur décimale de la seconde, par exemple .001 pour une milliseconde supplémentaire.

<p>Le serveur est en ligne depuis le <time datetime="2012-10-06T14:12:05.1270Z">6 octobre 2012 à 14h12mn05s</time>.</p>
L'attribut pubdate
Si l'attribut pubdate est présent, il confère un rôle sémantique particulier à l'élément qui devient de facto un repère de temps pour l'élément <article> qui le contient, ou à défaut le document entier s'il n'est pas enfant d'un article.
Intervalles de temps

Pour exprimer un intervalle de temps, il suffit d'utiliser plusieurs éléments <time>. En revanche, un tel élément équipé de l'attribut pubdate, doit être unique dans son contexte un article ne peut pas posséder plusieurs dates de publication.

Exemple d'usage de <time> avec l'attribut pubdate> 
<article>       
      <p>Cet article a été mis en ligne le <time pubdate>2012-10-06</time>.</p>
</article>
<article>       
      <p>Cet autre article a été mis en ligne le <time pubdate>2012-10-07</time>.</p>
</article>
La balise <hr>
L'élément <hr> horizontal rule en anglais consiste en une séparation horizontale qui marque un changement dans le contenu.
Séparation de paragraphes

Bien que les précédentes spécifications de HTML le définnissent uniquement du point de vue de la présentation, il représente désormais une séparation thématique de paragraphes, de sections de texte, de scènes à l'intérieur d'un récit.

Exemple d'usage de <hr> 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Trait horizontal</title>
      <style>
         body { background: bisque; font-weight: bold; color: maroon; }
      </style>
   </head>

   <body>       
      <p>Premier paragraphe</p>
      <hr>
      <p>Deuxième paragraphe</p>
   </body>
</html>
Il s'agit d'un élément vide constitué d'une balise ouvrante, mais jamais d'une balide fermante. En syntaxe XHTML, nous notons plutôt de cette manière <hr />. Le style par défaut de la séparation n'est pas très engageant, mais il est très facile de le modifier avec d'autres instruction CSS, notamment en agissant sur la propriété border.
La balise <br>
A l'intérieur d'un bloc de texte, un élément <br> line break en anglais correspond à un saut de ligne.
Attention !

Il est déconseillé d'utiliser <br> pour introduire des espacements verticaux entre d'autres types d'éléments, car il n'est pas conçu pour cet usage. Ses dimensions peuvent varier en fonction de la taille moyenne du texte affiché dans le navigateur, modifiable par l'utilisateur.

Exemple de saut de ligne 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Saut de ligne</title>
      <style>
         body { background: bisque; font-weight: bold; color: maroon; }
      </style>
   </head>

   <body>       
      <p>Ceci est la première ligne<br>et ceci la seconde</p>
   </body>
</html>
Il s'agit d'un élément vide constitué d'une balise ouvrante, mais jamais d'une balise fermante. En syntaxe XHTML, nous notons plutôt de cette manière <br />.
La balise <wbr>
Représente une opportunité de coupure de ligne word break en anglais, à l'intérieur d'un mot ou d'une phrase. Il s'agit d'une aide au moteur de rendu texte lui suggérant qu'il serait plus approprié d'effectuer un retour à la ligne à l'endroit où cet élément est placé, si la longueur du texte excède l'espace réservé par son conteneur.
Attention !

Particulièrement indiqué pour les mots longs, il faut savoir que <wbr> ne crée aucunement une césure ou trait d'union lorsque survient la coupure de ligne. Il faudra pour cela exploiter l'entité &shy;.

Exemple d'usage de <wbr> 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Césures</title>
      <style>
         body { background: bisque; font-weight: bold; color: maroon;   text-align: justify; }
      </style>
   </head>

   <body>       
      <p>Le mot le plus long de la langue française est anti<wbr>constitution<wbr>nellement</p>
   </body>
</html>
Césure avec &shy;

Nous pouvons trouver un intérêt pour l'écriture de liens, souvents longs avec lesquels il est possible de se méprendre sur le dernier caractère affiché en fin de ligne, lorsqu'il s'agit d'un signe de ponctuation par exemple.

Utilisation &shy; à la place de <wbr> 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Césures</title>
      <style>
         body { background: bisque; font-weight: bold; color: maroon;   text-align: justify; }
      </style>
   </head>

   <body>       
      <p>Le mot le plus long de la langue française est anti&shy;constitution&shy;nellement</p>
   </body>
</html>

<wbr> est un élément vide qui ne comprend bien entendu aucune propriété de style.

La balise <ins>
L'élément <ins> indique qu'un contenu de texte ayant été inséré ou ajouté dans le document après sa publication.
Mise à jour du texte

Par exemple, il s'agit d'une technique de choix pour mettre à jour le texte d'un <article>> lorsque celui-ci doit être maintenu à jour au fil du temps et que les lecteurs doivent pouvoir être informés des changements apportés sur le document. Visuellement, il est représenté par un texte souligné.

Insertion datée d'un jour 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Insertion après publication</title>
      <style>
         body { background: bisque; font-weight: bold; color: maroon;   text-align: justify; }
         ins { color: black; }
      </style>
   </head>

   <body>       
      <p>Ce sportif a remporté une médaille d'or 
         <ins datetime="2010-06-20" cite="nouvelle-victoire.html">
            et deux médailles d'argents
         </ins>
      </p>
   </body>
</html>
Attributs spécifiques à <ins>
Attribut Valeurs Rôle
datetime date ou date et heure Date (ou date et heure) à laquelle le texte a été ajouté.
cite URL Indique que la date donnée est celle de la publication du plus proche ancêtre <article> s'il est présent, ou sinon du document dans sa globalité.
La balise <del>
L'élément <del> indique qu'un contenu de texte ayant été supprimé du document.
Suppression en attente

Il serait possible de le retirer purement et simplement du code, mais <del> permet dans un soucis de transparence de conserver en ligne ce contenu et de noter sa date de suppression avec l'attribut datetime, ou la raison de ce retrait à l'aide de l'attribut cite faisant référence à un autre document. Visuellement, il est représenté par un texte barré.

Suppression datée d'un jour 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Suppression</title>
      <style>
         body { background: bisque; font-weight: bold; color: maroon;   text-align: justify; }
         del { color: red; }
      </style>
   </head>

   <body>       
      <p>HTML<del datetime="2011-01-19" cite="http://blog.whatwg.org/html-is-the-new-html5">5</del> 
         est un langage de balisage pour le web
      </p>
   </body>
</html>
Attributs spécifiques à <del>
Attribut Valeurs Rôle
datetime date ou date et heure Date (ou date et heure) à laquelle le texte a été supprimé.
cite URL Adresse d'un document externe expliquant la raison de la suppression.
La balise <s>
La différence entre <del> et <s> est subtile. Tandis que <del> concerne un morceau de texte ayant été supprimé, car il est incorrect, <s> est voué aux informations qui ne sont plus exactes ou pertinentes. Elles ont par conséquent été éliminées, frappées strike en anglais par la foudre, boutées hors du document. Visuellement, il est aussi représenté par un texte barré, mais ses propriétés par défaut peuvent être enrichies pour marquer encore plus cette différence.
La balide <pre>
L'usage de l'élément <pre> est voué aux blocs de texte préformatés. Il s'agit entre autre de structurer le contenu pour une meilleure visibilité, avec une police à pas fixe pour convention typographique. Par ailleurs, les espaces multiples sont respectées et non fusionnées, ce qui est bigrement pratique.
Bloc de texte préformaté

Il peut être combiné à un élément <code> pour représenter un code informatique, ou <samp> pour une sortie. Par défaut, la propriété CSS font-family possède la valeur de famille générique monospace, c'est-à-dire que toute police par défaut du système à espacement pourra être utilisée.

Exemple d'usage de <pre> 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Préformatage</title>
      <style>
         body { background: bisque; font-weight: bold; color: maroon;   text-align: justify; }
         pre { color: black; }
      </style>
   </head>

   <body>       
      <p>Pour centrer le texte des paragraphes et le mettre en gras en CSS, utilisez :</p>
      <pre><code>
   p {
      text-align: center;
      font-weight: bold; 
   }
      </code></pre>
   </body>
</html>
La balise <mark>
Un texte contenu entre <mark> et </mark> est considéré comme marqué ou surligné. Il signale et met en valeur une portion de document sur laquelle nous désirons attirer l'attention, dans un contexte particulier. C'est lélément du marqueur fluo.
Marqueur fluo

Lorsqu'il est employé dans une citation, il dénote que nous souhaitons marquer de manière spécifique le passage balisé, même si ce n'était pas l'intention originale de l'auteur de cette citation. Les résultats d'une page de recherche peuvent en profiter, ainsi que les instructions marquantes d'un bloc de code contenu dans <pre>. Son apparence par défaut consiste en une couleur de fond jaune vif et un texte en noir.

Exemple d'usage de <mark> 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Surlignage</title>
      <style>
         body { background: bisque; font-weight: bold; color: maroon;   text-align: justify; }
         code { color: chocolate; }
      </style>
   </head>

   <body>       
      <p>La propriété CSS <code>azimuth</code> est peu connue :</p>
      <pre><code>
   p {
      color: yellow;
      <mark>azimuth: behind;</mark>
      font-size: smaller; 
   }
      </code></pre>
   </body>
</html>

Contenu embarqué

Nous désignons par contenu embarqué tout élément faisant référence à des données stockées dans un fichier ou une ressource extérieure au document HTML. Il s'agit d'images, d'autres documents HTML, de médias vidéo et d'audio. Les nouveaux éléments <audio>, <video>, <source>, <track> font l'objet d'un chapitre dédié, car ils représentent une avancée majeure de HTML5 et méritent une attention particulière. il en va de même pour <canvas> qui nécessite un développement poussé de ses fonctionnalités ainsi que les instructions JavaScript.

La balise <img>
Certainement une des balises les plus connues et les plus usitées en HTML, <img> embarque une image stiockée dans un fichier externe à l'intérieur d'un document web. Etant donné les fondations même du langage, HTML ne décrit que la structure du document et son contenu texte. Les images ne sont pas intégrées dans ce même fichier HTML, mais stockées dans des fichiers voisins dans le même répertoire ou non avec différents format de compression, possédant chacun des avantages et inconvénients.
Format de compression d'images
Format Compression Invention Usages
GIF Non destructive si la palette d'origine comprend moins de 256 couleurs. Compuserve en 1987. Format non totalement libre Petits éléments graphiques, icônes, petites images animées. Transparence sur un seul niveau.
PNG Non destructive de 1 à 48 bits. Format ouvert. Recommandation W3C et RFC. Images de hautes qualités avec niveaux de transparence, autres éléments graphiques. Transparence sur 1 niveau en 256 couleurs, et jusqu'à 65 535 niveaux sinon.
JPEG Destructive. Algorithmes variables. Groupe JPEG et IBM de 1980 à 1992. Brevet soumis à discussions. Photographies. Pas de transparence.
Le JPEG
Les images au format JPEG sont très répendues sur le Web. Ce format est conçu pour réduire le poids des photos (c'est-à-dire la taille du fichier associé), qui peuvent comporter plus de 16 millions de couleurs différentes. Les images JPEG sont enregistrées avec l'extension .jpg ou .jpeg. Le JPEG détériore un peu la qualité de l'image, d'une façon généralement imperceptible (dépendant du taux de compression). C'est ce qui le rend si efficace pour réduire le poids des photos. Quand il s'agit d'une photo, nous ne pouvons généralement détecter la perte de qualité. Par contre, si ce n'est pas une photo, vous risquez de voir l'image un peu baver. Dans ce cas, il vaut mieux utiliser le format PNG.
Taux de compression

Plus le taux de compression JPEG est élevé, plus la qualité s'en ressent, et plus la taille du fichier est réduite. Pour la compression d'une image de type photographique avec une palette de couleur très étendue et sans formes géométriques, le format JPEG s'avère le plus performant avec un compromis de qualité moyenne. La compression PNG-24 est sans pertes, donc l'image est parfaite, mais avec un poids nettement plus élevé. Voici ci-dessous une serie de photo dont les quatre premières sont au format JPEG avec des taux de compressions différents et la dernière au format PNG-24.

Photos avec des taux de compression différents La photo du fichier PNG est effectivement parfaite mais avec un poids de fichier énorme vu la dimension de l'image. Le JPEG à 95% représente pratiquement la même perfection mais avec un fichier quatre fois moins important. Le JPEG à 80% est très souvent considéré comme un bon compromis, puisque le poids du fichier est vraiment très correcte avec une apparence très satisfaisante (légers artefacts le long des branches).
Les formats GIF et PNG
Dans le cas d'ume image disposant d'une palette de couleur réduite (sans trop de dégradés, composés de formes simples ou d'aplats de couleur), les formats GIF et PNG sont les plus appropriés. Ils détériorent sensiblement moins les contours et la netteté. Le poids d'un fichier PNG-8 est légèrement plus faible qu'un fichier GIF possédant le même nombre de couleurs. En revanche, la déclinaison en PNG-24 produit un fichier nettement plus lourd.
Le PNG
Le format PNG est le plus récent de tous. Ce format est adapté à la plupart des graphismes (à tous ce qui n'est pas une photo. Le PNG possède deux avantages : il peut être rendu transparent et il n'altère pas la qualité de l'image. Le PNG a été inventé pour concurrencer le format GIF, où à l'époque il fallait payer des royalties pour pouvoir utiliser des GIF. Depuis, le PNG a bien évolué et c'est devenu le format le plus puissant pour enregistrer la plupart des images. Dans les applications pratiques, le PNG existe en deux versions, en fonction du nombre de couleurs que doit comporter l'image : PNG-8 256 couleurs, PNG-24 16 millions de couleur - autant qu'une image JPEG. Il est également possible d'utiliser dans quelques cas un PNG-32 afin de gérer le canal alpha sur 8 bits qui permet d'avoir un dégradé de transparence.
Usage des images en HTML
La balise <img> est vouée à détenir des images apportant un plus pour le contenu du document, et non pour sa présentation. Elle n'est pas conçue pour afficher des images de fond ou d'embellissement de la page web pour lesquelles il est tout à fait indiqué d'utiliser les feuilles de style - et bien souvent la propriété background-image - afin de toujours conserver la séparation entre la forme et le contenu.
Cas d'utilisation de la balise <img>

Les instructions CSS offrent des possibilités avancées pour la disposition, la répétition des motifs sur deux axes, les fonds multiples, etc. Les images utilisées dans ce cadre ne seront pas cliquables, ni destinées à être imprimées. Quelques cas concrets dans lesquels il est recommandé d'utiliser <img> :

  • Un logo cliquable, associé au titre principal ;
  • Une photo d'illustration pour un article ou dans un album photo ;
  • Des icônes cliquables pour des commandes ou des liens.
Quelques cas concrets dans lesquels il est recommandé d'utiliser des CSS :
  • Images de fond en général (zone de contenu, de navigation, de formulaires) ;
  • Images et icônes décoratives, séparations verticales ou horizontales.
La spécification distingue aussi ces cas selon la précense des attributs alt et src :
  • Si aucun des deux n'est défini, l'élément ne représente rien.
  • Si seul src est indéfini, alors l'élément correspond au texte contenu dans alt.
  • Si l'attribut alt est vide, alors l'image est décorative.
  • Si l'attribut alt n'est pas vide, l'image fait partie intégrante du contenu et cet attribut donne un équivalent texte de remplacement pour l'image. Il peut être amené a être affiché si l'image ne peut être chargée, si l'utilisateur a désactivé l'affichage des images, ou s'il navique à l'aide d'une synthèse vocale.
  • Si l'attribut alt est absent et que l'image ne peut être interprétée ou affichée, l'agent utilisateur peut choisir d'exploiter l'attribut global title ou la valeur de l'élément <figcaption> si l'ensemble est contenu dans <figure>, en tant que légende.
Attributs spécifiques à <img>>
Attribut Valeurs Rôles
src URL Adresse du fichier image.
alt texte Texte alternatif à utiliser en cas d'abscence de la ressource, d'incapacité de l'agent utilisateur à rendre l'image, ou de synthède vocale
width nombre entier positif Largeur de l'image en pixels.
height nombre entier positif Hauteur de l'image en pixels.
ismap ismap ou ou (vide) Indique que l'élément image donne accès à une image map côté serveur.
usemap chaîne de texte Nom de l'élément <map> à utiliser pour la définition des zones cliquables de l'image map côté client.
Exemple d'usage de l'élément <img> 
<!-- Image dans le même répertoire que la page HTML -->      
<img src="bellatrix.jpg">

<!-- Image stokée dans le répertoire images qui se trouve au même niveau que la page HTML -->      
<img src="images/bellatrix.jpg">

<!-- Image stockée à la racine du site web -->      
<img src="/bellatrix.jpg">
    
<!-- Image située sur un autre site -->      
<img src="http://manu.kegtux.org/bellatrix.jpg">
Attribut alt
Le texte alternatif d'une image est spécifié par l'attribut alt. Il faut le considérer comme un contenu de repli lorsque l'image ne peut être visualisée. Soit parce qu'elle n'a pas été trouvée ou téléchargée, soit parce que le navigateur ne peut comprendre son format, soit parce que l'utilisateur n'est pas en mesure de la voir.
Attributs width et height
Les attributs width et height définissent respectivement l'espace d'affichage alloué pour l'image. Idéalement, ceux-ci reflètent les dimensions réelles du fichier image, en pixels. Si tel n'est pas le cas, l'image est redimensionnée par le navigateur avec un rendu potentionnellement disgracieux si les proportions ne sont pas respectées ou que la résolution est insuffisante. Si aucune dimension n'est attribuée grâce à width ou height, le navigateur alloue automatiquement l'espace requis d'après la résolution native du fichier image. Du point de vue des performances d'affichage et de rendu graphique, il est souvent recommandé de préciser ces valeurs de largeur et hauteur afin d'indiquer dès le chargement du code HTML les dimensions de l'espace à réserver. Le navigateur n'aura pas besoin d'attendre le chargement ultérieur de la ressource image pour en déduire ses propriétés.
Attribut usemap
Une image peut être associée à la définition d'une zone de liens cliquables (ou image map), telle que décrite avec l'élément <map>. Cet attribut contient alors l'identifiant unique de ce dernier pour y faire appel.
Attribut ismap
La valeur boolenne true ou false de l'attribut ismap indique que le navigateur doit transmettre les coordonnées du point cliqué sur l'image au serveur, lorsque celle-ci est bien entendu cliquable par exemple dans un lien <a>. Ces coordonnées sont envoyées sous la forme ?x,y et peuvent être analysées côté serveur.
Liens sur les images
Les liens hypertextes appliqués aux images revêtent les mêmes caractéristiques que les liens sur le contenu texte. L'intégralité de la surface de l'image est alors cliquable. Pour des raisons d'accessibilté, il est très fortement recommandé de toujours préciser un texte alternatif comme valeur de l'attribut alt.
Image qui sert de lien

Par défaut, les images figurant dans un lien arborent une bordure bleue disgracieuse. Il est fortement conseillé de prévoir une règle CSS qui permet de s'en affranchir.

Exemple de visualisation et de lien avec des images 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Lien sur une photo</title>
      <style>
         body { background: darkolivegreen; text-align: center; }
      </style>
   </head>

   <body>    
      <a href="HD/Mésange-noire.jpg">
         <img alt="Mésange noire" src="Mésange-noire.jpg" title="Voir la mésange en Haute Définition">
      </a>
   </body>
</html>
Ajouter une infobulle : L'attribut permettant d'afficher une bulle d'aide est le même que pour les liens, il s'agit de l'attribut title spécifié sur la balise <img> ou sur la balise <a>. Survollez la photo avec la souris pour voir l'infobulle apparaître.
La balise <map>
Un élément <map> est utilisé en conjonction avec une image <img> pour concevoir une carte cliquable appliquée à celle-ci. Le résultat consiste en des zones distinctes et transparentes, de formes variées, équipées de liens. En anglais, nous employons plus couramment le terme image map. L'attribut name est requis pour cet élément, car il permet de l'associer à l'élément image <img> via son attribut usemap.
Attribut spécifique à <area>
Attribut Valeur Rôle
name Nom de l'élément image lié Nom par lequel l'élément peut être référencé dans une image <img> avec l'attribut usemap.
Zones cliquables

Une image map contient un ou plusieurs éléments <area> qui définissent chacun une zone cliquable d'après une forme (shape), des coordonnées pour cette forme (coords) et une adresse (href).

Exemple d'usage de l'élément <area> pour <map> 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Lien sur une photo</title>
      <style>
         body { background: darkolivegreen; text-align: center; }
      </style>
   </head>

   <body>    
       <img alt="" src="Mésange-noire.jpg" width="400" height="299" usemap="#corps">
       <map name="corps">
          <area shape="circle" coords="145,65,45" title="Tête de la mésange" href="tete.jpg" type="image/jpeg">
          <area shape="rect" coords="310,120,400,180" title="Queue de la mésange" href="queue.jpg" type="image/jpeg">
          <area shape="default" title="Toute la mésange noire en HD" href="MesangeHD.jpg" type="image/jpeg">
       </map>
   </body>
</html>
Dans cet exemple, nous cherchons à rendre cliquable séparément la tête ou la queue de la mésange ou l'ensemble de la photo avec des liens adaptées à la circonstance.
La balise <area>
Un élément <area> est une zone cliquable individuelle faisant partie d'une image map. Proche de l'élément <a>, une zone cliquable <area> comporte des attributs semblables relatifs aux liens, à savoir href, hreflang, media, rel, target, type. Nous y retrouvons également alt qui confère un texte alternatif à la zone, afin de renseigner les internautes naviguant sans image ou avec une synthèse vocale.
Attributs spécifiques à <area>
Attribut Valeurs Rôle
href URL Cible du lien.
hreflang code de langue Langage de base de la cible du lien
media media query Spécifie une requête de média pour laquelle la cible est optimisée.
rel alternate, archives, author, bookmark, external, first, help, index, last, licence, next, nofollow, noreffer, prefetch, prev, search, sidebar, tag, up. Spécifie la relation établie par le lien, entre le document courant et la cible. Plusieurs valeurs peuvent être combinées, séparées par des espaces.
target _blank, _parent, _self, _top. Nom d'un élément de type iframe (attribut name). Attribue un contexte de navigation dans lequel suivre le lien.
type type MIME Le type MIME de la destination du lien.
alt Chaîne de texte Texte alternatif.
shape rect, circle, poly, default. Forme de la zone cliquable. default : rectangle couvrant la totalité de l'image.
coords valeurs numériques séparées par des virgules Coordonnées de la forme par rapport au coin supérieur gauche de l'image, exprimées en pixels.
pour rect : x1, y1, x2, y2;
pour circle : x, y, rayon;
pour poly : x1, y1, x2, y2, x3, y3, etc.
download nom du fichier après téléchargement ou vide
Les attributs spécifiques shape et coords définissent respectivement la forme de la zone ainsi que ses coordonnées. La syntaxe des coordonnées dépend de cette forme. Nous y retrouvons le coin supérieur gauche et inférieur droit d'un rectangle (rect), le centre et le rayon d'un cercle (circle), ou une énumération d'autant de points que nécessaire pour un polygone (poly).
La balise <figure>
Cet élément ne correspond pas à proprement parler à un contenu embarqué, mais est bien souvent en osmose avec <img>. Il permet d'associer une légende optionnelle <figcaption> à du contenu regroupé en un bloc. Ce sont généralement des éléments qui viennent enrichir le texte principal pour compléter les informations de la page.
Belle présentation

En d'autre termes, il s'agit de porter sur le Web ce que nous connaissons déjà sur d'autres supports tels que les livres imprimés : enrichir une image, un graphisme, une capture d'écran, par une légende. Des contenus plus variés peuvent être concernés, avec les éléments <video>, <audio>, <canvas>, des blocs de code <code> ou des tableaux complets <table>.

Rendu graphique avec <figure> et <figcaption> 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les figures</title>
      <style>
         figure { text-align: center;  display: inline-block; box-shadow: 0px 0px 20px #aaa;  padding: 1em;   }
         figcaption { text-align: center;  color: gray;  font-style: italic;   font-size: 1.5em;  }         
      </style>
   </head>

   <body>    
      <figure>
         <img src="Mésange-noire.jpg" width="400">
         <figcaption>Mésange noire</figcaption>
      </figure>
   </body>
</html>
La balise <figure> a un rôle avant tout sémantique. Cela veut dire qu'elle indique à l'ordinateur que l'image a du sens et qu'elle est importante pour la bonne compréhension du texte.
La balise <figcaption>
Le rôle de <figcaption> est de conférer une légende à l'élément <figure>. Son contenu autorisé est un contenu de type flux, c'est-à-dire du texte, mais aussi d'autres éléments de flux tels que des liens pouvant cibler une page avec des explications supplémentaires ou une référence à l'auteur de l'illustration. Une légende doit figurer dans le code avant ou après le contenu dans <figure>.
La balise <details>
L'élément <details> représente un composant d'interface dévoilant une information ou des contrôles supplémentaires à l'utilisateur. C'est une fonctionnalité que nous retrouvons dans la plupart des interfaces graphiques utilisateurs des systèmes d'exploitation sous la forme d'une icône - par exemple un signe + ou une flèche- éventuellement accompagné d'un titre. Un clic sur l'icône ou son intitulé texte doit déployer un groupe d'informations supplémentaires masquées par défaut.
Attribut spécifique à <details>
Attribut Valeurs Rôle
open open ou ou vide Spécifie la visibilité initiale de l'élément visible à l'utilisateur dès le départ ou pas.
L'attribut open

L'attribut open définit l'état d'affichage par défaut, et peut être manipulé au travers d'un script si nécessaire. S'il est ajouté, les détails doivent être affichés à l'utilisateur. S'il est retiré, les détails sont masqués.

Rendu graphique avec <figure> et <details> 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les figures</title>
      <style>
         body { background-color: gray; }
         figure { background-color: white;  text-align: center; display: inline-block; box-shadow: 3px 3px 7px black;  padding: 0.5em; }
         figcaption { text-align: center;  font-style: italic;  font-size: 1.2em; }   
         details { text-align: left; }
         ul { list-style-type: none; padding-left: 1em; }
      </style>
   </head>

   <body>    
      <figure>
         <figcaption>Mésange noire</figcaption>  
         <img src="Mésange-noire.jpg" width="250">         
         <details title="Cliquez pour découvrir les conditions">
             <summary>Condition de la prise de vue</summary>
             <p>Sur un conifère à Arpajon-sur-Cère</p>
         </details>
      </figure>
      <figure>
         <details open>
            <summary>Nom du fichier</summary>
            <p><input type="text"></p>
         </details>
         <details>
            <summary>Compression</summary>
            <ul>
               <li><input type="radio" value="JPEG" checked>JPEG</li>
               <li><input type="radio" value="PNG">PNG</li>
               <li><input type="radio" value="GIF">GIF</li>
            </ul>
         </details>     
         <details>
            <summary>Qualité</summary>
            <p><input type="range" min="0" max="100"></p>
         </details>
      </figure>
   </body>
</html>
Dans cet exemple, les détails relatifs à la condition de la prise de vue sont masqué au départ, par défaut. Le déploiement des informations complémentaires se réalise lorsque l'utilisateur clique sur la partie sommaire où se situe le triangle noir qui change d'orientation suivant que le déploiement est réalisé ou pas.
La balise <summary>
L'intitulé d'un élément <details> peut être spécifié par <summary>. S'il est absent, l'agent utilisateur doit déterminer lui-même le titre à donner à <details>. Le contenu texte de <summary> est censé refléter un titre pertinent, une légende ou un résumé pour son parent qui est obligatoirement un élément <details>. Par défaut, le principe est d'afficher cet intitulé, et de ne dévoiler le reste du contenu qu'après avoir activé - cliqué dessus - ou si l'attribut open de <details> est présent dès le chargement de la page.

Données tabulaires - Les tableaux

Indispensables pour organiser les informations, les tableaux sont un petit peu délicats à construire en HTML. Nous allons commencer par construire des tableaux basiques, puis nous complexifierons au fur et à mesure : fusion des cellules, division en multiples sections... Nous découvrirons aussi les propriétés CSS liées aux tableaux, qui nous permettrons de personnaliser leur apparence.

La balise <table>
Un élément <table> est destiné à contenir des données tabulaires. Pour cela, nous désignons un ensemble d'informations qui peuvent ou qui doivent être présentées dans une structure formatée en colonnes et en lignes. Différents éléments enfants peuvent apporter une valeur sémantique au contenu : en-tête et titre de tableau, intitulés de colonnes ou de lignes, etc. Entre la balise ouvrante <table> et la balise fermante </table>, peuvent être placés les éléments suivant :
Structure d'un tableau
Elément Occurences Rôle
<caption> 0 ou 1 Titre du tableau
<colgroup> 0 ou + Propriétés pour un groupe de colonnes
<thead> 0 ou 1 En-tête du tableau
<tfoot> 0 ou 1 Pied du tableau
<tbody>
ou
<tr>		 0 ou +

1 ou +		 Corps du tableau (contenant tr, th, td)

Lignes du tableau (contenant th, td)
Formations des lignes et des colonnes

En HTML, un tableau se construit ligne par ligne au moyen d'éléments successifs <tr>. Ensuite, dans chaque ligne, nous spécifions le contenu des différentes cellules : classiques <td>, en-têtes <th>.

Exemple simple de tableau avec les cellules en-têtes sur la première ligne 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les tableaux</title>
      <style>
         body { background-color: bisque; }
         table { background-color: burlywood;  width: 420px;  box-radius: 5px;  box-shadow: 3px 3px 15px #aaa; }
         table caption { font-style: italic;  font-size: 1.2em;  color: saddlebrown; padding-bottom: 0.3em;  }
      </style>
   </head>

   <body>    
      <table title="Tableau avec en-têtes sur la première ligne">
         <caption>Liste du personnel</caption>
         <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Compétences</th>
         </tr>        
         <tr>
            <td>RÉMY</td>
            <td>Emmanuel</td>
            <td>Informaticien</td>
         </tr>
         <tr>
            <td>DURAND</td>
            <td>Michel</td>
            <td>Mécanicien</td>            
         </tr>
      </table>
   </body>
</html>

Comme vous pouvez le constater, par défaut, votre navigateur centre le titre du tableau ainsi que le contenu des cellules d'en-têtes. Le texte de ces dernières est également automatiquement mis en gras. Le titre du tableau se place au dehors du tableau et au-dessus afin de bien comprendre à quoi servent ces données tabulaires.

Deuxième exemple de tableau avec les cellules en-têtes sur la première colonne 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les tableaux</title>
      <style>
         body { background-color: bisque; }
         table { background-color: burlywood;  width: 420px;  box-radius: 5px;  box-shadow: 3px 3px 15px #aaa; text-align: left; }
         table caption { font-style: italic;  font-size: 1.2em;  color: saddlebrown; padding-bottom: 0.3em;  }
      </style>
   </head>

   <body>    
      <table>
         <caption>Liste du personnel</caption>
         <tr>
            <th>Nom</th>
            <td>RÉMY</td>
            <td>DURAND</td>
         </tr>        
         <tr>
            <th>Prénom</th>
            <td>Emmanuel</td>
            <td>Michel</td>            
         </tr>
         <tr>
            <th>Compétences</th>            
            <td>Informaticien</td>
            <td>Mécanicien</td>            
         </tr>
      </table>
   </body>
</html>
La balise <caption>
Normalement, tout tableau doit avoir un titre. Le titre permet de renseigner rapidement le visiteur du contenu du tableau. Notre précédent exemple est constitué d'une liste de personnes... oui mais alors ? Qu'est-ce que cela représente ? Sans titre de tableau, vous le voyez, nous sommes un peu perdu. Ainsi, la vocation de <caption> est d'attribuer une légende ou un titre à un tableau de données. Il doit être inséré immédiatement après la balise ouvrante <table>, et ne doit être utilisé qu'une seule fois au sein de cet élément. Sachez que vous pouvez changer la position du titre par défaut à l'aide de la propriété CSS caption-side qui peut prendre les valeurs suivantes : top, bottom, left, right.
La balise <tr>
Un élément <tr> (table row) représente une ligne de tableau. Il contient un ou plusieurs éléments <td> et/ou <th>.
Un élément <tr> peut être enfant de :
  • <thead> : et dans ce cas, il ne doit contenir que des <th> ;
  • <tfoot> ;
  • <tbody> ;
  • <table> : lorsqu'il n'y a pas d'élément <tbody>, après d'éventuels frères <caption>, <colgroup> et <thead>.
La balise <td>
Une cellule <td> (table data) peut contenir du texte et beaucoup d'autres éléments HTML tels que des liens, des images, des listes, etc. Elle est toujours imbriquée dans un élément <tr>.
Attributs spécifiques à <td>
Attribut Valeurs Rôle
headers identifiants Une liste d'identifiants (attribut id) séparés par des espaces de cellules en-têtes qui relèvent de cette cellule. Utilisé par les navigateurs non visuels.
colspan nombre entier positif Nombre de colonnes occupées et fusionnées par cette cellule.
rowspan nombre entier positif Nombre de lignes occupées et fusionnées par cette cellule.
Fusion des cellules

Les attributs colspan et rowspan permettent de créer des fusions de cellules respectivement sur des colonnes et des lignes. Quel que soit le choix de votre attribut, vous devez indiquer le nombre de cellules à fusionner entre elles. Il faut donc omettre autant d'autres éléments <td> dans le parent que des colonnes ou des lignes fusionnées.

Fusion de deux cellules 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les tableaux</title>
      <style>
         body { background-color: bisque; }
         td, th { padding: 0.3em; }
         td { border: 1px dashed #aaa; }
         th { background: #cade5b; }
         table { width: 370px; box-shadow: 3px 3px 15px; }
      </style>
   </head>

   <body>    
      <table>
         <tr>
            <th colspan="2">Animal et groupe</th>
            <th>Classe</th>
         </tr>      
         <tr>
            <td>Kangourou</td>
            <td>marsupial</td> 
            <td rowspan="2">mammifère</td>
         </tr>
         <tr>
            <td>Baleine</td>           
            <td>Cétacé</td>             
         </tr>
      </table>
   </body>
</html>
La balise <th>
Une cellule <th> (table header) est une cellule spécialisée qui joue le rôle d'en-tête de colonne ou de ligne dans un tableau. Il doit être imbriqué dans une balise <tr>.
Attributs spécifiques à <th>
Attribut Valeurs Rôle
scope row, col, rowgroup, colgroup Spécifie les cellules concernées par cette cellule en-tête, respectivement, la ligne courante, la colonne courante, le groupe de lignes courant, le groupe de colonnes courant.
headers identifiants Une liste d'identifiants attribut id séparés par des espaces de cellules en-têtes qui relèvent de cette cellule. Utilisé par les navigateurs non visuels.
colspan nombre entier positif Nombre de colonnes occupées et fusionnées par cette cellule.
rowspan nombre entier positif Nombre de lignes occupées et fusionnées par cette cellule.
La balise <colgroup>
Un élément <colgroup> placé en debut de <table> est utilisé pour spécifier des propriétés communes à un groupe de colonnes. Ces propriétés seront inspirées depuis les attributs affectés à <colgroup>, tels que style. Elles seront affectées au nombre de colonnes indiqué par l'attribut span. Il doit être placé avant tout usage de <thead>, <tbody>, <tfoot>, et <tr>.
Attribut spécifique à <colgoup>
Attribut Valeurs Rôle
span nombre entier positif Nombre de colonnes auxquelles appliquer les propriétés.
Les groupes de colonnes 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset=UTF-8>
      <title>Les tableaux</title>
      <style>
         body { background-color: bisque; }
         table { background-color: burlywood;  width: 420px;  box-shadow: 3px 3px 15px #aaa; }
         td { border: 1px solid peru; }
         table caption { font-style: italic;  font-size: 1.2em;  color: saddlebrown; padding-bottom: 0.3em;  }
      </style>
   </head>

   <body>    
      <table>
         <caption>Liste du personnel</caption>
         <colgroup span="2" style="background: peru;" ></colgroup>
         <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Compétences</th>
         </tr>        
         <tr>
            <td>RÉMY</td>
            <td>Emmanuel</td>
            <td>Informaticien</td>
         </tr>
         <tr>
            <td>DURAND</td>
            <td>Michel</td>
            <td>Mécanicien</td>            
         </tr>
      </table>
   </body>
</html>
La balise <col>
Une énumération d'un ou plusieurs éléments <col> définit les propriétés individuelles pour chacune des colonnes, prenant la priorité sur celles indiquées par le parent <colgroup>.
Attribut spécifique à <col>
Attribut Valeurs Rôle
span nombre entier positif Nombre de colonnes auxquelles appliquer les propriétés.
La gestion des colonnes 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset=UTF-8>
      <title>Les tableaux</title>
      <style>
         body { background-color: bisque; }
         table { background-color: burlywood;  width: 420px;  box-shadow: 3px 3px 15px #aaa; }
         td { border: 1px solid peru; }
         table caption { font-style: italic;  font-size: 1.2em;  color: saddlebrown; padding-bottom: 0.3em;  }
      </style>
   </head>

   <body>    
      <table>
         <caption>Liste du personnel</caption>
         <colgroup>
            <col style="background: tan; ">
            <col style="background: peru;" span="2">
         </colgroup>
         <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Compétences</th>
         </tr>        
         <tr>
            <td>RÉMY</td>
            <td>Emmanuel</td>
            <td>Informaticien</td>
         </tr>
         <tr>
            <td>DURAND</td>
            <td>Michel</td>
            <td>Mécanicien</td>            
         </tr>
      </table>
   </body>
</html>
Les tableaux structurés
Nous venons d'apprendre à construire des petits tableaux simples. Ces petits tableaux suffisent dans la plupart des cas, mais il arrive que nous ayons besoin des tableaux plus complexes. Pour les gros tableaux, il est possible de les diviser en trois parties : une en-tête, le corps, le pied du tableau.
La balise <thead>
Un élément <thead> représente un en-tête de tableau, utilisé en conjonction avec <tbody> et <tfoot>. Il doit être placé après <caption> et <colgroup> s'il y a lieu, et avant <tbody> ou <tfoot>.
En-tête d'un tableau

Son contenu est constitué d'enfants <tr>, eux-mêmes constitués d'un ou plusieurs <th>. La spécification HTML n'autorise pas d'y placer des cellules classiques <td>>.

En-tête de tableau 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les tableaux</title>
      <style>
         body { background-color: bisque; }
         table { background-color: burlywood;  width: 420px;  box-shadow: 3px 3px 15px #aaa;  border: 1px solid black;  border-collapse: collapse; }
         thead { background-color: darkgoldenrod;  color: bisque;  }
         td { border: 1px dotted darkgoldenrod;  padding: 2px;  padding-left: 0.5em; }
         table caption { font-style: italic;  font-size: 1.2em;  color: saddlebrown; padding-bottom: 0.3em;  }
      </style>
   </head>

   <body>    
      <table>
         <caption>Liste du personnel</caption>
         <thead>
            <tr>
               <th>Nom</th>
               <th>Prénom</th>
               <th>Compétences</th>  
            </tr>      
         </thead>
         <tbody>
            <tr>
               <td>RÉMY</td>
               <td>Emmanuel</td>
               <td>Informaticien</td>              
            </tr>
            <tr>
               <td>DURAND</td>           
               <td>Michel</td>       
               <td>Mécanicien</td>            
            </tr>
         </tbody>
      </table>
   </body>
</html>
La balise <tfoot>
Un élément <tfoot> représente un pied de tableau, utilisé en conjonction avec <thead> et <tbody>. Nous pouvons y placer zéro ou plusieurs <tr>.
Attention !

<tfoot> doit apparaître avant <tbody> dans le code afin de fournir au navigateur les renseignements qu'il détient, avant de charger le reste du contenu.

Pied de tableau 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les tableaux</title>
      <style>
         body { background-color: bisque; }
         table { background-color: burlywood;  width: 420px;  box-shadow: 3px 3px 15px #aaa;  border: 1px solid black;  border-collapse: collapse; }
         thead, tfoot { background-color: darkgoldenrod;  color: bisque;  }
         td { border: 1px dotted darkgoldenrod;  padding: 2px;  padding-left: 0.5em; }
         table caption { font-style: italic;  font-size: 1.2em;  color: saddlebrown; padding-bottom: 0.3em;  }
      </style>
   </head>

   <body>    
      <table>
         <caption>Liste du personnel</caption>
         <thead>
            <tr>
               <th>Nom</th>
               <th>Prénom</th>
               <th>Compétences</th>  
            </tr>      
         </thead>         
         <tfoot>
            <tr >
               <td colspan="3">Deux employés</td>
            </tr>
         </tfoot>
         <tbody>
            <tr>
               <td>RÉMY</td>
               <td>Emmanuel</td>
               <td>Informaticien</td>              
            </tr>
            <tr>
               <td>DURAND</td>           
               <td>Michel</td>       
               <td>Mécanicien</td>            
            </tr>
         </tbody>
      </table>
   </body>
</html>
La balise <tbody>
Un élément <tbody> représente un corps de tableau, utilisé en conjonction avec <thead> et <tfoot>. Il regroupe les lignes <tr> qui contiennent les données du tableau. Dans ce cas de figure, aucun élément <tr> ne peut être directement enfant de <table>.
Gestion de l'affichage de la partie principale d'un tableau

Les navigateurs peuvent exploiter cette structuration pour agrémenter l'affichage de tableaux, particulièrement s'ils possèdent des dimensions qui excède la surface de visualisation, en maintenant ces éléments visibles à l'écran indépendamment des lignes, durant le défilement du document. Le même principe peut être appliqué à l'impression pour conserver les blocs d'en-tête et de pied de tableau, en haut et en bas de chaque page, si ce dernier doit s'étaler sur plusieurs pages.

Corps du tableau 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les tableaux</title>
      <style>
         body { background-color: bisque; }
         td, th { padding: 0.3em; }
         td { border: 1px dashed #aaa; }
         th { background: #cade5b; }
         tfoot { background: #c98fde; }
         table { width: 370px; box-shadow: 3px 3px 15px; }
      </style>
   </head>

   <body>    
      <table>
         <thead>
            <tr>
               <th>Article</th>
               <th>Prix</th>
            </tr>      
         </thead>         
         <tfoot>
            <tr >
               <td>Total</td>
               <td>33,58 €</td>
            </tr>
         </tfoot>
         <tbody>
            <tr>
               <td>Chemise</td>
               <td>11,18 €</td>         
            </tr>
            <tr>
               <td>Pantalon</td>           
               <td>22,40 €</td>             
            </tr>
         </tbody>
      </table>
   </body>
</html>
Exemple de synthèse avec les bonnes pratiques du CSS 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les tableaux</title>
      <style>
         table { width: 25em; border-collapse: separate; border-spacing: 2px; caption-side: bottom; }
         td, th { padding: 6px 12px; }
         th { text-align: left; }
         td:last-child, th:last-child { text-align: right; }
         table caption { color: #555; font-style: italic; padding: 10px; border-bottom: 1px solid #ccc; }
         tr:nth-child(odd) { background: #eee; }
         tr:nth-child(even) { background: #ddd; }
         tr:first-child { background: #cba; color:  white; }
         table td:empty, table td:empty:hover { background: white; }
         table tr + tr:hover { background: #bbb; color: white; }
         table tr + tr td:hover,  table tr + tr th:hover { background: #777; }
      </style>
   </head>

   <body>    
      <table>
         <caption>Prix des fruits</caption>
         <tr>
            <td></td>
            <th scope="col">Origine</th>
            <th scope="col">Prix</th>
         </tr>      
         <tr >
            <th scope="row">Kiwi</th>
            <td>France</td>
            <td>42 €</td>
         </tr>
         <tr>
            <th scope="row">Pastèque</th>
            <td>Taïwan</td>
            <td>1337 €</td>         
         </tr>
         <tr>
            <th scope="row">Papaye</th>
            <td>Roumanie</td>
            <td>1,3 €</td>             
         </tr>
         <tr>
            <th scope="row">Melon</th>
            <td>France</td>
            <td>12 €</td>             
         </tr>         
         <tr>
            <th scope="row">Litchi</th>
            <td>Groëndland</td>
            <td>15,50 €</td>             
         </tr>              
      </table>
   </body>
</html>

Syntaxe de base des CSS

Les CSS, permettent de définir le style de votre page web, la façon dont chaque élément sera affiché : position, couleur, police, bordure, ombre portée, etc. L'apparence d'un document HTML est défini dans la ou les feuille de style qui lui est associée. Le langage CSS ou feuille de style en cascade porte bien son nom, car il définit un ensemble de règles de mise en forme appliquées de façon combinée selon un degré de priorité styles intrinsèques au navigateur, style utilisateur, styles selon le média de consultation.

Rubriques

Association des styles au document HTML

Les définitions de style peuvent être associées au document HTML de plusieurs façons :
  • Vous rédigez les définitions dans un fichier annexe, monstyle.css par exemple, et vous l'importer dans la page web concernée pour prendre en compte les styles associés. C'est pratique pour définir en une seule fois un style et l'appliquer à plusieurs pages. Cela correspond généralement à la charte graphique du site. 
    <head>
   <link rel="stylesheet" type="text/css" href="monstyle.css">
</head>
  • En HTML 5, l'attribut type="text/css" est utilisé par défaut dans l'élément <style>. Il peut donc être supprimé pour alléger le code. 
    <head>
   <link rel="stylesheet" href="monstyle.css">
</head>
  • Vous pouvez également proposer un ensemble de styles spécifiques pour une seule page. Vous traduisez alors vos styles à l'intérieur de la dite page à l'aide de la balise dédiée, nommée <style>. 
    <head>
   <style>
      body {background-color: yellowgreen; }
   </style>
</head>
  • Quelquefois, nous désirons proposer un style particulier pour une seule balise. Dans ce cas précis, nous spécifions notre style à l'aide de l'attribut style de notre balise. Toutes les balises HTML possède cet attribut particulier. 
    <p style="color: yellow;">

Règle, bloc de déclaration, propriétés et valeurs

Une règle CSS se compose d'un sélecteur suivi de son bloc de déclaration, ce dernier débutant par une accolage gauche { et se terminant par l'accolade droite } correspondante et contenant une ou plusieurs déclarations. Au final, une feuille de styles est un fichier de type textuel contenant l'ensemble des règles CSS. Une propriété est une syntaxe définie explicitement par les spécifications CSS et définissant la mise en forme de l'élément auquel elle s'applique. Nous pouvons regrouper les propriétés par type typographie, positionnement, modèle de boîte, mais aussi par type de média compatible écran, imprimante, mobile, auditif, projection.

Les normes CSS spécifient quelles sont les valeurs autorisées pour chaque propriété. Ces valeurs peuvent être construites à partir d'identificateurs, de chaînes de caractères, de nombres, de longueurs, de pourcentages, d'adresses URI, de couleurs, d'angles, de durée, etc. Une propriété dont la syntaxe n'est pas homologuée ou dont la valeur n'est pas valide est a priori ignorée par les navigateurs.

Déclarer des propriétés

Le terme déclaration désigne un ensemble formé par la propriété et sa valeur associée, par exemple font-style: italic;. Nous pouvons regrouper plusieurs déclarations en les séparant par des points-virgules, par exemple font-style: italic; background-color: #ffc;.

La façon d'écrire les règles fait vraiment penser aux structures ou aux classes du langage C++, où le sélecteur correspond au nom de la classe et les propriétés aux attributs. La différence ici, c'est que nous désignions tout de suite et impérativement la valeur des propriétés, alors que pour une classe, nous sommes obligés de passer par une phase de construction.

Commentaire

Les commentaires en CSS, comme dans beaucoup d'autres langages, sont des instructions facultatives commençant par les caractères /* et se terminant par */. Nous pouvons les placer partout entre les règles, voir au sein des règles mais pas entre une propriété et sa valeur, leur contenu n'ayant aucune influence sur le rendu. Nous ne pouvons pas les imbriquer.

Leur usage est principalement informationnel, dans le cadre de projets en commun et dans l'optique de justifier tel ou tel choix de déclaration CSS, ou encore de délimiter les différentes parties de la feuille de styles.

<style>
      a {color: green; } /* sélecteur d'élément (poids "d") */
      #warning a {color: maroon; } /* sélecteur d'identifiant (poids "b") + 1 sélecteur de poids "d" */
      a.erreur { color: red; } /* sélecteur de classe (poids "c") + 1 sélecteur de poids "d" */
</style>

Unité CSS

De nombreuses propriétés CSS peuvent avoir des valeurs numériques exprimées dans différentes unités.

Voici la liste des unités exprimées de façon absolue :
  • cm : centimètre.
  • in : pouce (2,54 cm).
  • mm : millimètre.
  • pt : point (1/62 inch).
  • pc : pica (12 points).

A titre d'information : 1 in = 2,54 cm = 25,4 mm = 72 pt = 6 pc

Il existe également des unités exprimées de façon relative, qui dépendent de leur élément parent :
  • em : cadratin. Un em correspond grossièrement à la hauteur de la lettre Ç de l'élément parent (taille du texte définie dans la propriété font-size).
  • ex : fraction de la hauteur des caractères. Dans les polices occidentales, ex correspond à la hauteur de la lettre minuscule x.
  • px : pixel. Cette unité dépend de la résolution du périphérique d'affichage.
  • % : pourcentage de la taille de l'élément ou de son parent.
L'unité em est très intéressante. Elle permet en effet aux utilisateurs finaux de redimmensionner le texte proportionnellement à la taille de la police, tout en conservant la mise en page intacte. C'est la raison pour laquelle je ne saurais trop vous recommander de l'utiliser !

Le sélecteur

Pour appliquer un style particulier à certaines balises de notre page HTML, il est nécessaire de pouvoir les différencier. Chacune n'a pas d'identifiant unique permettant de les regrouper ou de discriminer dans notre feuille de style. C'est à ce moment-là qu'entrent en jeu les sélecteurs qui vont nous permettre de restreindre l'application de nos propriétés CSS. Un sélecteur va donc permettre de dire Je veux que tous les éléments de ce type aient ce style. Ainsi, les CSS reposent sur des sélecteurs qui indiquent à quelle balise ou à quel type de contenu appliquer un ou plusieurs effets. Les sélecteurs vous permettent de sélectionner des balises de façon intelligente.

Le terme sélecteur désigne la partie précédent le bloc de déclaration, c'est-à-dire à gauche de l'accolade ouvrante d'une règle CSS. Un sélecteur doit d'ailleurs toujours être accompagné d'un bloc de déclaration. Le sélecteur indique l'élément sur lequel vont s'appliquer les déclarations CSS présentes dans le bloc qui lui est associé. Il peut revétir plusieurs formes :

Sélecteur d'élément (ou de balise)
Ce sélecteur permet de changer le style d'une balise particulière partout où elle sera rencontrée dans la page ou les pages web. Par exemple, si vous souhaitez avoir la même apparence avec un formatage particulier à chaque fois que vous désirez utiliser la balise h1, voici ce que vous pouvez faire : 
h1 {
   background-color: yellowgreen;
   font-weight: bold;
}

Plusieurs sélecteurs quelque soit leurs natures peuvent précéder un bloc de déclaration. Il suffit de les séparer par une virgule. Le bloc sera alors appliqué à chacun des sélecteurs.

h1, h2, h3 {
   background-color: yellowgreen;
   font-weight: bold;
}
Sélecteur de classe

Une classe est un nom que nous choisissons librement en se limitant aux caractères alphanumériques classiques et dont nous baptisons les éléments concernés via l'attribut class. Un sélecteur de classe reprend ce nom en le préfixant d'un point par exemple : .erreur, .bloc, etc..

Partie HTML

<span class="erreur">Formulaire incomplet</span>

Partie CSS

.erreur { color: red; font-weight: bold; }

Comme c'est le cas ici, si aucun élément ne restreint le sélecteur de classe, tous les éléments dont l'attribut class a la valeur spécifiée sont concernés. Le sélecteur de classe est représenté par un point. Il peut ainsi permettre également de cibler certains éléments en fonction de la valeur de leur attribut. Par exemple, le style ci-après s'applique à tous les éléments <p> dont l'attribut class vaut info :

Partie CSS

p.info { background: yellow; }

Partie HTML

<p class="info">Attention aux ponctuations !</p>

Sélecteur d'identifiant
Un identifiant (ou id) est lui aussi un nom choisi librement en se limitant aux caractères alphanumériques classiques. Il se distingue de la classe en ce qu'il ne peut porter au plus que sur un objet du document.

Le sélecteur d'identifiant est représenté par le caractère dièse (#). Il cible l'identifiant dont l'attribut id a la valeur spécifiée. Lui aussi fonctionne exactement de la même manière que class, à un détail près : il ne peut être utilisé une seule fois dans le code. Quel intérêt ? En pratique, nous ne mettrons des id que sur des éléments qui sont uniques dans la page, comme par exemple le logo.

Partie CSS

#navigation { margin: 0; padding: 0; }

Partie HTML

<ul id="navigation">Choix particulier</ul>

Attention !

L'identifiant désigne donc un élément unique dans le document (par exemple #kiwi), contrairement aux classes pouvant symboliser plusieurs types d'éléments ou des groupes d'éléments (par exemple .fruit) : l'élément dont l'id est kiwi sera unique, mais plusieurs éléments peuvent appartenir à la classe fruit.

Prenez donc le réflexe d'attribuer un identifiant aux objets uniques de votre code ou aux grands blocs qui structurent la page. Nous trouvons souvent un bloc d'en-tête (#header), le pied de page (#footer), la partie latérale (#aside), la partie principale (#main), le menu de navigation (#nav), etc. Les éléments susceptibles d'apparaître plusieurs fois dans un document HTML seront quant à eux qualifiés à l'aide de classes.
Sélecteur d'attributs
Ce sélecteur consiste en une extension du sélecteur d'élément, avec la possibilité de cibler un attribut HTML, la valeur d'un attribut voit une partie de cette valeur.
Cas d'utilisation des sélecteurs d'attributs :
  • La syntaxe est la suivante : [attribut] { propriété: valeur; propriété: valeur; }
  • Nous pouvons éventuellement préciser l'élément concerné à l'aide de la syntaxe : élément[attribut] { propriété: valeur; propriété: valeur; }
  • Il est ainsi possible de cibler, par exemple, uniquement les images disposant d'un attribut alt, à l'aide d'un sélecteur CSS img[alt], et de les styler comme bon nous semble.
Choisir une valeur spécifique à un sélecteur d'attribut

Le sélecteur d'attribut offre également de préciser la valeur attendue de l'attribut ciblé : le sélecteur a[hreflang="fr"] va s'appliquer à tous les liens dont l'attribut hreflang contient exactement la valeur fr. Pour ne cibler que les cellules de tableaux dont l'attribut colspan vaut 3, il suffit d'écrire td[colspan="3"]. Notez qu'il est parfaitement envisageable de cumuler deux sélecteurs d'attribut, comme le décrit l'exemple suivant :

img[class="vignette"][width="250"] { border: 1px solid green; }

Cette règle a pour but d'ajouter une bordure verte autour des éléments d'image à condition que leur attribut class ait la valeur vignette et que l'attribut width vaille 250.

Les guillemets entourant la valeur de l'attribut ne sont pas nécessaires, ni demandés par les spécifications, mais l'expérience a démontré une meilleure reconnaissance du sélecteur lorsqu'il en dispose.
Sélecteur d'attributs avec reconnaissance de chaîne de caractères
De nouveaux sélecteurs permettent de cibler encore plus précisément les éléments auxquels vous vous adressez :
  • [attribut^="valeur"] : caractérise un attribut dont la valeur commence exactement par la chaîne valeur.
  • [attribut$="valeur"] : représente un attribut dont la valeur finit exactement par le suffixe valeur.
  • [attribut*="valeur"] : désigne un attribut dont la valeur contient au moins une fois la sous-chaîne valeur.

Cette méthode de sélection est particulièrement attrayante dans la mesure où nous rencontrons fréquemment des cas de figure où les éléments se distinguent que par leurs attributs : les champs de soumission de formulaire (<input type="submit">), ou encore les liens hypertextes menant vers une adresse sécurisée attribut href débutant par la chaîne https. Les exemples au quotidien sont plus nombreux que vous ne l'imaginez !

a[href^="mailto"] { background-image: url(e-mail.gif) left center no-repeat; padding-left: 25px; }

Généalogie

Les différents éléments composant un fichier HTML titres, paragraphes, listes, liens, images... s'organisent sous la forme d'un arbre généalogique, que nous nommons également arbre du document ou DOM pour Document Object Model. Cet arbre généalogique est composé de fratries et de degrés de parenté qui sont exploités par les sélecteurs CSS pour cibler les différents éléments du document.

Ancêtre, parent, frère
  • Au sein d'une arborescence, le terme ancêtre désigne tout élément situé dans la même branche que l'élément de référence, X par exemple, mais à un niveau supérieur dans la hiérarchie. Le parent est un élément unique qui fait référence à l'élément placé directement au-dessus de X.
  • A l'inverse, le concept de descendant fait référence à tout élément qui est situé dans la même branche que X, mais à un niveau plus bas dans la hiérarchie. Les enfants sont les éléments placés directement au-dessous de X.
  • Tout les éléments situés au même niveau que X partageant le même parent sont appelés frères.

Sélecteurs avancés

Sélecteur universel
Le sélecteur universel étoile (*) s'applique à tous les éléments. Vous l'utiliserez essentiellement et encore pour modifier le style de tous les éléments de la page.
Par exemple, la police de caractères :
* { font-family: Verdana;  }
Attention !

Le sélecteur universel peut provoquer des problèmes de performances une page web, même petite comporte beaucoup de balises, donc beaucoup d'éléments. La propriété font-family sera plutôt déclarée dans le style de l'élément body.

body { font-family: Verdana;  }
Sélecteur de descendance
Un sélecteur de descendance est construit avec deux sélecteurs traditionnels ou plus séparés par un espace. Il cible toutes les balises situées à l'intérieur d'une autre balise, quelque soit le niveau d'imbrications. Cela peut donc désigner un enfant d'une autre balise ou un petit-enfant, etc. Notez qu'il n'y a pas de virgules entre les éléments exprimés.
Partie HTML

<p>Un paragraphe contenant <a>un lien<em>important</em></a></p>

Partie CSS

p em { color: red; background-color: yellow; }

Dans cet exemple, les citations importantes seront de couleur rouge sur fond jaune lorsqu'elle seront situées uniquement à l'intérieur d'un paragraphe (pas pour les titres) et ceci quelque soit le niveau de filiation. Remarquez au passage que dans cet exemple, l'élément <p> est le parent, l'élément <a> est l'enfant et l'élément <em> est un descendant. Bien entendu, un enfant direct peut être considéré comme un descendant. La notion de descendance n'impose donc pas de limites.

Sélecteur d'enfant
Le sélecteur d'enfant s'applique, comme son nom le laisse présager, à l'enfant ou aux enfants d'un élément désigné.
Sa syntaxe est la suivante :
E > F { propriété: valeur; }
Parentée directe

A l'instar des autres sélecteurs, celui-ci se lit de la droite vers la gauche. Ainsi notre exemple va-t-il appliquer la déclaration à l'élément F s'il est enfant d'un élément E. A la différence du sélecteur classique de descendance, symbolysé par un espace entre les éléments (E F), le sélecteur d'enfant (E > F) ne s'applique qu'en cas de parenté directe et n'aura aucune prise si un élément se trouve hiérachiquement entre E et F. Reprenons l'exemple précédent en proposant des scénarii différents suivant la descendance choisie :

Partie HTML

<p>Un paragraphe contenant <a>un lien<em>important</em></a></p>

Partie CSS 
p > em { background: green; } // em n'est pas ciblé donc pas de couleur
p em { background: red; }  // em devient rouge
a > em { background: blue; }  // em devient bleu
a em { background: yellow; }  // em devient jaune
listes imbriquées

Au premier abord, l'intérêt de cette syntaxe peut paraître mineur. Il est pourtant très pratique dans le cas de documents emboîtant plusieurs données de même type, par exemple des listes imbriquées.

index.html 

<!DOCTYPE html>
<html>
   <head>
      <title>Sélecteur d'enfant</title>
      <meta charset=UTF-8>
      <style>
         #menu > li { list-style-type: square;  }
      </style>
   </head>

   <body>
      <ul id="menu">
         <li><a href="url1">accueil</a></li>
         <li><a href="url2">société</a></li>
         <li><a href="url3">contact</a>
            <ul class="submenu">
               <li><a href="url3-1">plan d'accès</a></li>
               <li><a href="url3-2">formulaire de contact</a></li>
               <li><a href="url3-3">réseaux sociaux</a></li>
            </ul> 
         </li>
      </ul>
   </body>
</html>
Cet exemple illustre un menu de navigation à deux niveaux. Afin de ne cibler que la première génération de la liste les enfants directs de l'élément identifié comme menu, il est préférable de prendre le sélecteur d'enfant. Ainsi, les éléments <li> contenus dans submenu ne seront pas affectés et concervent leur puce par défaut.
Sélecteur de frère adjacent
Le sélecteur de frère adjacent ou sélecteur d'adjacence affecte un élément à condition qu'il soit immédiatement précédé d'un autre élément spécifié.
Syntaxe :
E + F { propriété: valeur; }
Éléments au même niveau d'imbrication

Cette règle s'applique à l'élément F s'il est frère de E et s'il lui succède dans l'ordre de déclaration HTML. Illustrons par un exemple simple constitué d'un titre de niveau 2 suivi par deux paragraphes.

index.html 

<!DOCTYPE html>
<html>
   <head>
      <title>Sélecteur d'adjacence</title>
      <meta charset=UTF-8>
      <style>
         h2, p { color: white; background: green; margin: 1px; padding: 2px 7px; }
         h2 + p { background: black;  }
         em { color: chartreuse; font-weight: bold; }
      </style>
   </head>

   <body>
      <h2>Frère des deux balises suivantes <em>p</em></h2>
      <p>Frère de <em>h2</em> et de <em>p</em> qui suit</p>
      <p>Frère des deux balises précédentes <em>h2</em> et <em>p</em></p>
   </body>
</html>
Dans cet exemple, seul le premier paragraphe directement adjacent au titre se distingue par une couleur de fond noire. Les paragraphes qui suivent demeurent inchangés. Il ne sont pas concernés par ce critère de sélection spécifique.
Cibler des éléments identiques sauf le premier

Ce type de sélecteur a pour avantage de cibler un groupe d'éléments identiques tout en excluant le premier. Par exemple, pour afficher une bordure à gauche de tous les éléments d'une liste sauf le premier, il suffit d'indiquer la règle suivante :

index.html 

<!DOCTYPE html>
<html>
   <head>
      <title>Sélecteur d'enfant</title>
      <meta charset=UTF-8>
      <style>
          li+li { border-left: 2px solid brown; padding-left: 3px; }
      </style>
   </head>

   <body>
      <ul>
         <li><a href="url1">accueil</a></li>
         <li><a href="url2">société</a></li>
         <li><a href="url3">contact</a></li>
      </ul>
   </body>
</html>
Sélecteur adjacent général
La norme CSS 3 élargit le principe d'adjacence en introduisant un sélecteur adjacent général s'écrivant ainsi :
E ~ F { propriété: valeur; }
Toute la descendance

La différence avec le sélecteur adjacent classique est que la version proposée par CSS 3 ne se limite pas qu'à la proximité directe : d'autres frères peuvent se placer entre E et F.

Ordre et priorité des sélecteurs

Attention, lorsque deux règles CSS différentes ciblent le même élément, c'est la dernière déclarée la plus basse dans le code source qui s'applique et qui écrase la précédente. Vos sélecteurs ne doivent pas se trouver en pagaille dans votre fichier CSS. Le fichier est lu de haut en bas et le dernier élément lu est celui appliqué. D'où le nom de Cascading Style Sheet : feuille de style en cascade : on part du plus haut et on descend.

Ainsi pour l'exemple suivant : 
div p { color: black;  }
p { color: green;  }

Le dernier style lu sera appliqué à tous les paragraphe, même si une autre définition existe plus haut. Donc le texte des paragraphes sera en vert, même ceux contenus dans une balise <div>. Il faut donc penser à organiser vos sélecteurs du plus général au plus spécifique.

En pratique, cette loi ne vaut que dans le cas où les deux sélecteurs incriminés sont exactement du même type et déclarés de la même manière, car il existe une priorité entre les différents types de sélecteurs.

Mode de déclaration

Comme nous l'avons précisé en introduction de ce chapitre, il existe plusieurs façon d'appliquer des styles CSS à un élément HTML. Attention toutefois chaque méthode de déclaration a une priorité différente :

  • Style en ligne : Nous appliquons le style directement au sein de la balise HTML, via l'attribut style=. Ce mode est prioritaire sur tous les autres.
  • Déclaration dans l'en-tête du document: on emploie la balise HTML <style> que nous plaçons au sein de l'élément <head> de la page HTML.
  • Feuille de style auteur : la mise en forme est complètement externalisée dans un fichier de style CSS lié à l'aide de <link> ou @import.

Poids des sélecteurs

Au sein du même mode de déclaration, les spécifications CSS proposent une classification des sélecteurs selon un barème de poids sous forme de notation à quatre chiffres :

  • Poids "a" : règle CSS déclarée à l'aide de l'attribut HTML style= au sein de l'élément.
  • Poids "b" : sélecteur d'identifiant (id).
  • Poids "c" : sélecteur de classe, d'attributs ([]) ou de pseudo-classe (:hover, :focus, :first-child).
  • Poids "d" : sélecteur d'élément (p, div, a ...) ou de pseudo-élément (:first-letter, :before, :after, :first-line).
  • Poids nul : sélecteur joker (*), de parenté (>) ou d'ajacence (+).
Priorité d'interprétation

L'explication de ce barème est simple : une déclaration qui s'applique à un sélecteur d'id (exemple : #menu {color: green;}) aura toujours un poids supérieur à la même déclaration appliquée à un sélecteur de classe (exemple : .menu {color: lime;}) qui elle-même sera prioritaire sur une déclaration visant un élément en particulier (exemple : h1 {color: red;}). En cas de conflit, il est alors parfois nécessaire "d'ajouter du poids" à votre sélecteur en y incluant un type de sélecteur supplémentaire.

index.html 

<!DOCTYPE html>
<html>
   <head>
      <title>Sélecteur d'enfant</title>
      <meta charset=UTF-8>
      <style>
          a {color: green; } /* sélecteur d'élément (poids "d") */
          #warning a {color: maroon; } /* sélecteur d'identifiant (poids "b") + 1 sélecteur de poids "d" */
          a.erreur { color: red; } /* sélecteur de classe (poids "c") + 1 sélecteur de poids "d" */
      </style>
   </head>

   <body>
      <div  id="warning">
         <a class="erreur" href="url">Source de l'erreur</a>
      </div>
   </body>
</html>
Vue les règles de priorité, ici la couleur du lien indiquant une erreur sera marron car la règle appliquée est #warning a {color: maroon; }. Bien que la règle a.erreur { color: red; } lui succède dans l'ordre du code CSS, le sélecteur d'identifiant demeure prioritaire. Si vous désirez que la couleur du lien soit rouge, vous devez ajouter un poids au moins équivalent à celui du sélecteur a.erreur. Concrètement, j'écrirai #warning a.erreur { color: red; }.
Attention

Attention à ne pas verser dans l'extrême dans l'apport de poids, afin de ne pas vous retrouver avec des accumulations de multiples types de sélecteur. Identifiez au plus court les éléments à mettre en forme, sans sélecteur intermédiaires inutiles, et ce, en amont de votre projet de conception CSS.

!important

La déclaration !important a été introduite par CSS dans le but d'outrepasser volontairement la priorité conférée par défaut aux modes de déclaration que sont les feuilles de style auteur et utilisateur. Dans la pratique, une déclaration suivie du mot-clé !important devient préférentielle, quel que soit le poids du sélecteur qui l'accompagne : les styles marqués ainsi écrasent d'office tous les styles similaires antérieurs.

index.html 

<!DOCTYPE html>
<html>
   <head>
      <title>Sélecteur d'enfant</title>
      <meta charset=UTF-8>
      <style>
          a {color: green; } /* sélecteur d'élément (poids "d") */
          #warning a {color: maroon; } /* sélecteur d'identifiant (poids "b") + 1 sélecteur de poids "d" */
          a.erreur { color: red !important; } /* sélecteur de classe (poids "c") + 1 sélecteur de poids "d" avec la spécification !important */
      </style>
   </head>

   <body>
      <div  id="warning">
         <a class="erreur" href="url">Source de l'erreur</a>
      </div>
   </body>
</html>
Quelle que soit la place d'apparition de cette règle dans la feuille de style et quel que soit le poids de son sélecteur, les styles seront affectés en priorité... sauf si une autre règle équivalente revendique elle aussi sa préséance à l'aide d'une déclaration !important, auquel cas, la règle habituelle du poids des sélecteurs s'applique.

Pseudo-classes et pseudo-éléments

Dans l'optique de mettre en forme des éléments selon un état contextuel survol, premier enfant, première ligne... qui ne serait pas défini dans l'arbre du document CSS introduit les concepts de pseudo-classe et de pseudo-élément. Les pseudo-classes permet de sélectionner des éléments en fonction de leur état. Cet état peut être variables en raison d'actions de l'utilisateur. Les pseudo-classes proposent également un moyen de sélectionner des éléments en fonction de leur position. Le sélecteur de pseudo-classe est représenté par le caractère deux-points (:).

Exemples
  • Parmi les pseudo-classes les plus couramment utilisées, retenons les différents états dans les liens hypertextes (:link, :visited, :hover, :focus et :active) et le premier enfant d'un élément (:first-child).
  • Du côté des pseudo-éléments, mentionnons plus particulièrement la première lettre d'un bloc (::first-letter), sa première ligne (::first-line) ou le contenu créé avant (::before) ou après (::after) un élément.

Pseudo-classes

:link :visited
Ces pseudo-classes ciblent les éléments a dont respectivement le lien n'a pas été ou a été visité. Les deux lignes suivantes définissent la couleur des liens : 
:link { color: fushia;  }
:visited { color: navy;  }
:hover
La pseudo-classe :hover cible les éléments dont le contenu est survolé. Cela permet par exemple de changer la bordure d'une image lorsqu'elle pointée par la souris. 
img:hover { border-style: dotted; }
:active
Cette pseudo-classe cible l'instant précis du clic de souris sur le lien choisi. Nous pouvons alors proposer une petite animation qui informe l'utilisateur qu'il a bien sélectionné l'élément.
:focus
La pseudo-classe :focus cible les éléments qui ont le focus par défaut, les liens et les éléments de formulaires. Elle permet très simplement de modifier la couleur de l'arrière plan ou un autre style pour montrer à l'utilisateur quel est le champ actuel qu'il peut saisir ou compléter. Cette pseudo-classe se rapporte donc à un élément lorsqu'il est atteint via le clavier ou un autre dispositif de pointage. Selon la sépcification, seuls les éléments acceptant l'attribut HTML tabindex qui définit l'ordre de navigation avec la touche tabulation sont concernés, c'est-à-dire <a>, <area>, <input>, <object> et <textarea>.
L'ordre est important pour les liens

Pour rappel, l'ordre de déclaration des pseudo-classes est importante dans le cas des liens hyper-textes, pour faire en sorte que toutes s'appliquent, respectivement :

  • :link
  • :visited
  • :hover / :focus
  • :active
Gestion du focus 

<!DOCTYPE html>
<html>
   <head>
      <title>Le focus</title>
      <meta charset=UTF-8>
      <style>
         body {background: beige; color: green; font-weight: bold; }
         input[type=text] {background: yellow; border: solid green thin; border-right-width: 7px; border-radius: 3px; }
         input[type=text]:focus {background: wheat; border-color: red; }
      </style>
   </head>

   <body>
      <form>
         <p>Nom Prénom:<br><input type="text"/></p>
         <p>Site web :<br><input type="text"/></p>
         <p>E-mail :<br><input type="text"/></p>
         <input type="submit" />
      </form>
   </body>
</html>
:default
Cible les éléments qui sont sélectionnés par défaut, par exemple dans une liste ou pour des cases à cocher.
:lang
La pseudo-classe :lang permet de définir un style en fonction de la langue du document. Ici, par exemple, nous définissons les guillemets à utiliser pour la langue française : 
:lang(fr) { quotes: '"' '"'; }
A moins d'avoir dans l'idée de mettre en forme certaines parties différemment selon la langue du document, comme les guillemets à la française sur des citations, l'intérêt de ce sélecteur est assez limité dans le cadre d'un site monolingue ; mais il acquiert une redoutable effcicacité sur des sites polyglottes.
:empty
Ce sélecteur fait référence à un élément vide de tout contenu balises enfants ou simple texte. Ainsi, <p></p> sera concerné par le sélecteur :empty, contrairement à <p><span></span></p>, <p>fruit</p> ou encore <p>&nbsp;</p>. Cette pseudo-classe trouve habituellement son utilité au sein de tableaux de données dynamiques où des cellules vides de contenu peuvent ainsi se distinguer des autres. 
td:empty { background-color: gray; }
:root
Eléments à la racine du document. Cette pseudo-classe est d'un intérêt relativement limité : en HTML, ce sélecteur désigne uniquement, et toujours, l'élément racine <html>. La seule différence avec le sélecteur html est que le poids de :root est supérieur. Cette pseudo-classe trouve habituellement son utilité au sein de tableaux de données dynamiques où des cellules vides de contenu peuvent ainsi se distinguer des autres.

:root { background-image:url(fonf.jpg); } /* une image de fond sera appliquée sur l'élément <html> */
:target
Elément dont l'identifiant est l'ancre spécifiée dans l'URL de la page. Si votre page web contient des ancres internes, c'est-à-dire des éléments nommés par des id, et des liens pointant vers ces éléments, alors la pseudo-classe :target désigne l'élément ciblé par l'ancre en question.
La bonne cible 

<!DOCTYPE html>
<html>
   <head>
      <title>Les cibles</title>
      <meta charset=UTF-8>
      <style>
         body {background: beige; color: green; font-weight: bold; }
         h2:target {background: yellow; border: solid green thin; border-right-width: 10px; border-radius: 5px; padding-left: 10px; }
      </style>
   </head>

   <body>
      <h2 id="fruits">Les fruits</h2>
      <a href="#fruits">Allez à la section des fruits</a>
   </body>
</html>
:enabled :disabled :checked
Les spécifications CSS 3 prévoient de pouvoir mettre en forme les éléments de formulaires selon leur contexte. Ainsi, :enabled désigne les éléments actifs, :disabled les éléments inactifs et :checked les éléments cochés.
Valider une sélection

L'exemple qui suit modifie l'affichage de l'étiquette <label>> associée à un champ lorsque celui-ci est coché par l'utilisateur.

Utilisation des étiquettes 

<!DOCTYPE html>
<html>
   <head>
      <title>Cochées</title>
      <meta charset=UTF-8>
      <style>
         :checked + label { color: green; font-weight: bold; }
      </style>
   </head>

   <body>
      <form>
         <input type="checkbox" id="fruit" value="fruit" />
         <label for="fruit">Vous aimez les fruits</label><br />
         <input type="checkbox" id="legume" value="legume" />
         <label for="fruit">Vous aimez les légumes</label>         
      </form>
   </body>
</html>
:required :optional
Un champ est considéré comme requis (:required) s'il est nécessaire qu'il contienne une valeur lors de la soumission du formulaire auquel il est attaché. A l'inverse, :optional désigne un champ qui peut demeurer vierge.
:valid :invalid
Un élément de formulaire est valide s'il remplit toutes les exigences liées à la sémantique et aux spécifications de son type (texte, nombre, adresse éléctronique, intervalle, URL, etc.).
Exemple
Par exemple, un champ <input> de type URL dont la valeur introduite par l'utilisateur ne débute pas par la chaîne http:// est considéré comme invalide.
Gestion des URLs 

<!DOCTYPE html>
<html>
   <head>
      <title>Cochées</title>
      <meta charset=UTF-8>
      <style>
         body { background-color: antiquewhite; }
         body, input { font-weight: bold; }
         input:invalid { background-color: sandybrown; }
         input:valid { background-color: yellow; }
      </style>
   </head>

   <body>
      <form>
         E-Mail :<br /><input type="email" /><br />
         Site web :<br /><input type="url" /><br />   
      </form>
   </body>
</html>
:in-range :out-of-range
Sélectionne des éléments si la valeur renseignée est ou non comprise dans l'intervalle défini avec min et max.
:read-only :read-write
Sélectionne les éléments en lecture seule, ou en lecture-écriture.
:first-child
Cible le premier enfant d'un élément.

Par exemple, pour mettre en gras le premier élément <p> enfant de l'élément <div>, vous utiliserez le sélecteur ci-après :

div p:first-child { font-weight: bold; }

Choisir le premier frère

Ce sélecteur rend très commode l'identification du premier élément parmi des frères semblables comme le montre cet exemple qui a pour but d'appliquer une bordure sous les éléments d'une liste sauf le premier.

Aucun trait sur la première liste 

<!DOCTYPE html>
<html>
   <head>
      <title>Premier élément</title>
      <meta charset=UTF-8>
      <style>
         body { background-color: antiquewhite; font-weight: bold; }
         ul li { border-top: 1px solid brown; }
         ul li:first-child { border-top: none; }
      </style>
   </head>

   <body>
      <ul>
         <li>Un élément de liste</li>
         <li>Un autre élément de liste</li>
         <li>Encore un élément de liste</li>
      </ul>
   </body>
</html>
Attention !

La portée de :first-child est souvent mal interprétée : comprenez bien qu'il ne s'agit pas forcément d'un élément unique le premier enfant, mais parfois de plusieurs éléments tous les premiers enfants de l'arbre généalogique.

Cibler plusieurs éléments en même temps

Ainsi, au sein du code suivant, plusieurs éléments sont ciblés par le sélecteur div:first-child : le paragraphe, mais aussi l'élément <span>, lui aussi premier enfant descendant d'un <div> 

<div>
  <p><span>Choucroute</span><em>Kuglopf</em></p>
</div>
:not(Sélecteur)
La pseudo-classe de négation :not() cible un élément qui ne correspond pas au sélecteur déterminé entre les parenthèses. Par exemple, :not(a) désignera tous les éléments de la page à l'exception des liens des liens et a:not(:visited) pointera tous les liens sauf ceux déjà visités.
Exclure certains éléments

Dans la pratique, ce sélecteur se révélera utile si vous souhaitez mettre en forme un groupe d'éléments mais avec des exclusions spécifiques. Par exemple, pour désigner tous les éléments d'une liste sauf le premier, nous pourrions écrire :

Exclusion de la première liste 

<!DOCTYPE html>
<html>
   <head>
      <title>Premier élément</title>
      <meta charset=UTF-8>
      <style>
         body { background-color: antiquewhite; font-weight: bold; }
         ul li:not(:first-child) { border-top: 1px solid brown; }
      </style>
   </head>

   <body>
      <ul>
         <li>Un élément de liste</li>
         <li>Un autre élément de liste</li>
         <li>Encore un élément de liste</li>
      </ul>
   </body>
</html>
:last-child
Le sélecteur :last-child désigne, comme vous l'avez deviné, un élément dernier enfant de son parent. L'action de supprimer la marge basse du dernier paragraphe d'un bloc pourrait s'écrire de la sorte :

.bloc p:last-child { margin-bottom: 0; }

:nth-child()
Cette pseudo-classe, dite structurelle, propose un moyen sophistiqué de sélectionner des éléments en fonction de leur positions. Plus précisément, la pseudo-classe :nth-child() s'applique au(x) n-ième(s) enfant(s) d'un élément. Les valeurs contenues au sein de la parenthèse de :nth-child() peuvent être :
  1. Un chiffre (entier positif ou négatif) - le premier enfant correspond à la valeur 1.
  2. Une formule de type (an+b), avec a et b deux chiffres ; n prendra toutes les valeurs à partir de zéro.
  3. Les mots-clés even ou odd qui symboliseront tous les fils pairs (even) ou impairs (odd) d'un parent, ce qui est idéal pour voir des styles appliqués en alternance aux lignes d'un tableau, par exemple. Notez que odd a la même signification que 2n+1 et que even a la même que 2n.
Quelques exemples concrets pour illustrer ce sélecteur 
li:nth-child(2) /* Le deuxième enfant d'une liste s'il s'agit d'un <li> */
li:nth-child(2n) /* Chaque <li> sur deux = les éléments pairs */
li:nth-child(even) /* Même critère que précédemment */   
li:nth-child(2n+3) /* le 3ème, le 5ème, le 7ème, ... */

<!DOCTYPE html>
<html>
   <head>
      <title>Imparité</title>
      <meta charset=UTF-8>
      <style>
         body { background-color: antiquewhite; font-weight: bold; }
         li { padding-left: 3px; }
         li:nth-child(odd) { background-color: burlywood; }
      </style>
   </head>

   <body>
      <ul>
         <li>Un élément de liste</li>
         <li>Un autre élément de liste</li>
         <li>Encore un élément de liste</li>
         <li>Le dernier élément de la liste</li>
      </ul>
   </body>
</html>
Valeurs négatives de n

Sachez qu'une valeur négative de n est autorisée et offre des possibilités intéressants : ainsi, le sélecteur :nth-child(-n+3) cible les trois premiers éléments uniquement. Plutôt pratique non ?

Code source 

<!DOCTYPE html>
<html>
   <head>
      <title>Imparité</title>
      <meta charset=UTF-8>
      <style>
         body { background-color: antiquewhite; font-weight: bold; }
         li { padding-left: 3px; }
         li:nth-child(-n+3) { background-color: burlywood; }
      </style>
   </head>

   <body>
      <ul>
         <li>Un élément de liste</li>
         <li>Un autre élément de liste</li>
         <li>Encore un élément de liste</li>
         <li>L'avant dernier élément de la liste</li>
         <li>Le dernier élément de la liste</li>
      </ul>
   </body>
</html>
:nth-last-child()
Cette pseudo-classe :nth-last-child() s'applique au(x) n-ième(s) enfant(s) d'un élément en comptant cette fois-ci depuis le dernier enfant.
:nth-of-type() :nth-last-of-type()
Variante du sélecteur :nth-child(), cette pseudo-classe :nth-of-type() ne compte et ne sélectionne que les éléments du même type. Pour bien comprendre la différence avec le sélecteur :nth-child().
Prenons un exemple de code HTML : 
<div>  
   <p></p>
   <span></span>
   <p></p>
   <p></p>
</div>
  • Le sélecteur div p:nth-child(2) se lit le deuxième élément enfant de <div> à condition qu'il s'agisse d'un paragraphe. Or, dans notre exemple, le deuxième enfant du <div> n'est pas un paragraphe mais un élément <span>. Aucun élément ne sera donc ciblé.
  • Le sélecteur div p:nth-of-type(2) se lit le deuxième élément paragraphe enfant de <div>. Le deuxième paragraphe succédant au <span> sera par conséquent concerné et ciblé.
Le sélecteur :nth-last-of-type() s'applique au(x) n-ième(s) enfant(s) du même type d'un élément en comptant depuis le dernier enfant.
:only-child
Représente un élément qui n'a aucun frère. Prenons pour exemple le cas d'une liste dynamique où le nombre d'éléments peut varier.
Nous souhaitons obtenir l'apparence suivante :
  1. Si la liste comporte plusieurs éléments, alors ceux-ci sont affichés les uns à côté des autres.
  2. Si la liste ne comporte qu'un seul élément, alors il doit occuper toutes la largeur.
Résultats 

<!DOCTYPE html>
<html>
   <head>
      <title>Seulement un enfant</title>
      <meta charset=UTF-8>
      <style>
         body { background-color: antiquewhite; font-weight: bold; }
         ul { margin-left: -35px; }
         li { display: inline; background: burlywood; padding: 1px 10px; }
         li:only-child { display: block; text-align: center; }
      </style>
   </head>

   <body>
      <ul>
         <li>Premier</li>
         <li>Deuxième</li>
         <li>Troisième</li>
      </ul>
      <ul>
         <li>Le seul élément d'une liste</li>
      </ul>      
   </body>
</html>
:only-of-type
La pseudo-classe :only-of-type renvoie tous les éléments qui sont seuls de leur type parmi leurs frères.
Par exemple

Une cellule de tableau <td> unique au sein de sa ligne est concernée par le sélecteur td:only-of-type, même si un élément frère s'y trouve également :

<tr>  
   <th>titre</th>
   <td>contenu</td>
</tr>
:first-of-type :last-of-type
:first-of-type désigne le premier élément de son type parmi ses frère, à l'inverse de :last-of-type.
Par exemple

le sélecteur suivant représente la dernière cellule de données <td> d'une ligne d'un tableau :

tr > td:last-of-type { text-align: right; }

Pseudo-éléments

::first-letter ::first-line
Les pseudo-éléments ::first-letter et ::first-line correspondent respectivement au premier caractère et à la première ligne de texte au sein d'un élément de type bloc ou équivalent.
Lettrine

::first-letter est traditionnellement utilisé pour mettre en exergue une lettrine, à l'instar de certains anciens ouvrages typographiques, comme l'exemple ci-dessous :

Paragraphe avec lettrine 

<!DOCTYPE html>
<html>
   <head>
      <title>Première lettre du paragraphe</title>
      <meta charset=UTF-8>
      <style>
         p {
            color: white;
            font-family: Arial,  sans-serif;
            background-color: chartreuse;
            text-align: justify;
            padding: 5px;
         }
         
         p::first-letter {
            float: left;
            font: 2em Verdana,  sans-serif;
            color: chartreuse;
            background-color: white; 
            padding:  0 5px;
            margin: 0 5px 0 0;
         }
      </style>
   </head>

   <body>
      <p>La première lettre de chaque paragraphe possède un style particulier. 
         C'est ce que nous appelons une lettrine. Remarquez également la justification 
         du paragraphe.
      </p>
   </body>
</html>
::before ::after

Les pseudo-éléments ::before et ::after ouvrent la voie à la création automatique de contenu via CSS, sans que celui-ci ne soit présent dans le document HTML. Attachés à un sélecteur, ces pseudo-éléments couplés à des propriétés spécifiques telles que content permettent d'afficher une chaîne de caractères, une image d'arrière-plan, des guillemets de citation ou encore des compteurs avant ou après l'élément.

Pour être très précis, ce contenu apparaîtra dans la boîte de l'élément, entre les marges internes (padding) et le contenu de celui-ci. En vertu de cette particularité, les pseudo-éléments ::before et ::after ne sont pas applicables sur des éléments dépourvus de contenus (généralement distingués par des balises autofermantes), à savoir : br, hr, img, input, select et textarea. La propriété content accepte différentes valeurs : toute chaîne de caractères placée entre guillemets simples ou doubles, une image de fond via url(chemin-image), la valeur d'un attribut récupéré via attr(nom-attribut), ou encore des mots-clés tels que counter compteur, open-quote guillemets de citation ouvrants, close-quote guillemets de citation fermants, no-open-quote ou no-close-quote pas de guillemets ouvrants ou fermants.
Contenu automatique

L'élément créé via ::before et ::after n'existe pas dans l'arbre du document et possède un mode de rendu par défaut de type inline, mais peut être mis en forme, dimensionné et positionné à l'aide des propriétés CSS classiques existantes.

Guillemets ouvrants et fermants dans un bloc de citation 
blockquote::before { content: open-quote; }
blockquote::after { content: close-quote; }
Images de fond affichées avant et après chaque paragraphe 
p::before { content: url(images/arrondi-haut.png); }
p::after { content:url(images/arrondi-bas.png); }
Mise en oeuvre d'un menu linéaire 

<!DOCTYPE html>
<html>
   <head>
      <title>Before</title>
      <meta charset=UTF-8>
      <style>
         body { background-color: antiquewhite; font-weight: bold; }
         #menu { background-color: burlywood; padding: 3px 10px; border-radius: 5px; }
         #menu::before { content: "Vous êtes ici : "; color: antiquewhite; }
         #menu li { display: inline; }
         #menu li + li:before { content: "> "; color: antiquewhite; }
      </style>
   </head>

   <body>
      <ul id="menu">
         <li>Premier</li>
         <li>Deuxième</li>
         <li>Troisième</li>
      </ul>
   </body>
</html>
Valeur de l'attribut attr()

attr() est une fonction particulière de la propriété content - et donc actuellement liée aux pseudo-éléments ::before et ::after - qui renvoie la chaîne contenu d'un attribut de l'élément ciblé. Cette valeur dynamique offre la possibilité d'afficher un contenu servant de méta-donnée normalement réservée aux agents utilisateurs.

Parmi les applications courantes, citons l'affichage des URL des liens hypertextes, très pratique au sein d'une feuille de style d'impression. D'ailleurs pour appliquer cette règle spécifique exclusivement à l'impression, il est possible de prévoir une feuille de stye dédiée et appelée via l'attribut media, ou simplement de placer une règle @ (@media) en début de feuille de style classique. 
@media print { 
   a::after { content: "  (" attr(href) ")";  }
}

Il est également possible d'employer cette fonction pour afficher la valeur de l'attribut title d'un lien, afin de signaler son ouverture dans une nouvelle fenêtre.

Titre d'un lien 

<!DOCTYPE html>
<html>
   <head>
      <title>After</title>
      <meta charset=UTF-8>
      <style>
         body { background-color: antiquewhite; font-weight: bold; }
         a[title]::after { content: " -  (" attr(title) ")"; } /* Ne cible que les liens disposant d'un attribut title */
      </style>
   </head>

   <body>
      <a href="#" title="S'ouvre dans une nouvelle fenêtre" target="_blank">Lien</a>
   </body>
</html>
Décoration de listes à l'aide de ::before 

<!DOCTYPE html>
<html>
   <head>
      <title>Puces de liste</title>
      <meta charset=UTF-8>
      <style>
         body { background-color: antiquewhite; font-weight: bold; }
         ul { margin-left: -35px; }
         li { list-style-type:  none; color: background; }
         li::before { content: "- "; color: blueviolet; }
      </style>
   </head>

   <body>
      <ul id="menu">
         <li>Premier</li>
         <li>Deuxième</li>
         <li>Troisième</li>
      </ul>
   </body>
</html>

Le cas des listes ordonnées est quelque peu particulier, notamment parce qu'il est nécessaire de disposer d'une puce différente (numérotée ou non) pour chaque élément de liste : difficile de s'en sortir avec une image de fond, par exemple. Pour les listes ordonnées, les spécifications CSS prévoient la possibilité d'employer des compteurs automatiques et personnalisables : le couple counter-reset> et counter-increment.

Liste ordonnée 

<!DOCTYPE html>
<html>
   <head>
      <title>Liste ordonnée</title>
      <meta charset=UTF-8>
      <style>
         body { background-color: antiquewhite; font-weight: bold; }
         ul { margin-left: -35px; }
         li { list-style-type:  none; color: background; counter-increment: test; }
         li::before { content: counter(test) "°) "; color: blueviolet; }
      </style>
   </head>

   <body>
      <ul id="menu">
         <li>Premier</li>
         <li>Deuxième</li>
         <li>Troisième</li>
      </ul>
      <ul>
         <li>Le seul élément d'une liste</li>
      </ul>      
   </body>
</html>
::selection
Le sélecteur ::selection n'est pas une pseudo-classe mais un pseudo-élément, d'où la syntaxe débutant par un double :. Son usage est simple : il permet de modifier la couleur de fond ou de texte d'une portion de contenu que le visiteur sélectionne en glissant la souris par-dessus.

Règles @

Les règles @ (ou règles-at) sont des règles qui étendent la simple syntaxe d'une déclaration de type sélecteur-bloc. Ces règles sont précédées de l'arobase (@) suivi d'un mot clé. Il en existe deux types, des règles simples identiques à une déclaration classique et des règles identificateurs de bloc, entourées d'accolades ( { } ). Ces dernières sont des instructions qui se présentent généralement sous la forme de meta-sélecteurs permettant de regrouper des blocs de règles au sein d'un bloc de niveau supérieur.

@import
La règle @import inclut une feuille de styles CSS au sein d'une autre feuille de styles. Cette règle doit absolument être placée en tête de fichier, sous peine d'être invalide.
Importation

Le chemin vers la feuille de styles est indiqué via la valeur url(styles.css). Il est possible de préciser les types de médias concernés par cette feuille de styles au moyen d'un mot-clé placé après l'adresse du fichier externe.

@import url(css/reset.css);
/* Il est aisément possible de préciser à quoi la feuille de style doit s'appliquer */
@import url(css/print.css) print;
@media
La règle @media indique qu'un bloc de règles ne concernera que des périphériques de sortie déterminés.
Pour l'écran ou pour l'impression

Par exemple, certains styles peuvent être définis pour l'écran, d'autres pour l'impression :

Par exemple 
@media screen {
     body { background: url(logo.jpg) center top; }
}

@media print {
     body { background-color: #FFF; color: #000; }
}
Les différents types de médias communéments reconnus sont :
  • all : l'ensemble des médias possibles.
  • aural et speech : synthèdes vocales.
  • handheld : mobiles.
  • print : imprimantes.
  • projection : projecteurs.
  • screen : écrans d'ordinateur.
@page
La règle @page ne s'applique qu'au sein d'un fichier de styles pour l'impression et a pour seule fonction de déterminer les marges des feuilles d'un support de sortie paginé.
Mise en page

Il est ainsi possible de fixer des marges appliquées au document lorsqu'il sera imprimé, par exemple 2 centimètres en haut et en bas et 1,5 centimètre à gauche et à droite.

@page {  margin: 2cm 1.5cm; }

A l'aide des pseudo-éléments :left, :right et :first, nous pouvons également agir de façon plus précise sur les pages paires (ou gauche) et impaires (ou droite), ainsi que sur la page de garde :

@page {  margin: 2.5cm; }  /* marge par défaut pour l'ensemble des pages */
@page :left  {  margin-left: 5cm; }  /* marge à gauche pour les pages de gauche uniquement */
@page :right  {  margin-right: 5cm; }  /* marge à droite pour les pages de droite uniquement */
@page :first  {  margin-top: 5cm; }  /* marge haute pour la page de garde uniquement */

Les fonctions

L'utilisation des fonctions n'est pas nouvelle dans CSS, en effet nous connaissons déjà sûrement la fonction url() qui permet de charger le contenu de l'adresse HTTP pasée en paramètre, ou encore rgb() qui permet de définir une couleur et. CSS3 introduit de nouvelles fonctions qui permettent de réaliser des opérations qui sortent du cadre habituel de CSS.

Une fonction intéressante est la fonction attr() que nous venons juste de découvrir qui permet de récupérer automatiquement la valeur de l'attribut d'un élément associée aux pseudo-éléments ::before et ::after.

calc

La fonction calc() permet de calculer une valeur en effectuant des opérations arithmétiques simples, additions, soustractions, multiplications, divisions.

  • Elle permet donc par exemple de calculer une largeur dynamique tout en ménageant une marge constante : width: calc(100% - 50px);
  • Elle peut aussi servir à faire des calculs plus complexes pour prendre en compte des éléments multiples : margin-left: calc(20%/3 - 2em);.

Le modèle de boîte - Dimension

Une page Web peut être vue comme une succession et un empilement de boîtes, que nous appelons blocs. La plupart des éléments vus aux chapitres précédents sont des blocs : <header>, <article>, <nav> ... Mais nous en connaissons déjà d'autres plus classiques : les paragraphes <p>, les titres <h1> ... Durant ce chapitre, nous allons apprendre à manipuler ces blocs comme de véritables boîtes. Nous allons leur donner des dimensions, les agencer en jouant sur leurs marges, mais aussi apprendre à gérer leur contenu... pour éviter que le texte ne dépasse de ces blocs !

Rubriques

Définition

Les sites actuels reposent sur une architecture de boîtes, que ce soit des boîtes de types blocs, des textes, des tableaux ou des éléments postionnés.

La spécification CSS2.1 définit quatre modèles de positionnement :
  • block layout : Le modèle de boîte de type block est le modèle de boîte classique. Les principaux avantages de ce modèle sont que les boîtes de type block peuvent être dimensionnées avec les propriétés width et height, et qu'elles sont pourvues de marges internes (padding) et de marges externes (margin) qui nous permet d'espacer les boîtes les unes des autres. Les inconvénients majeurs sont qu'il n'existe pas d'alignement vertical du contenu au sein de la boîte, qu'il n'a pas de lien avec le contexte (les boîtes sont autonomes), mais surtout le calcul de la taille d'une boîte se fait en ajoutant les valeurs de largeur (width), de marge interne (padding) et de bordures (border).
  • inline layout utilisé pour le texte. Le deuxième type de boîte, le type inline, ne définit pas de boîte autonome contrairement aux blocs, par conséquent les éléments s'affichent côte à côte. La boîte ne peut cependant pas être dimensionnée. En revanche, un alignement vertical des éléments inline contenus dans un élément de type block est possible grâce à la propriété vertical-align. Dernières contraintes, les marges internes ne fonctionnent que sur la droite et la gauche de l'élément, les marges externes quant à elle, ne décalent pas réellement les éléments environnants.
  • table layout : Le troisième modèle est le modèle tabulaire. L'avantage principal de ce modèle est que le positionnement des boîtes est dépendant du contexte, sans création de boîte autonome. C'est aussi son principal inconvénient. Ainsi deux boîtes peuvent se positionner côte à côte, leur taille peut être modifiée, et un alignement vertical est possible. De plus la largeur et la hauteur des boîtes sont fluides et s'adaptent aux boîtes environnantes. C'est un avantage quand il s'agit de deux boîtes côte à côte car les hauteurs seront identiques mais cela peut être un inconvénient dans le cas de plusieurs lignes, car les hauteurs s'adapterons entre elles.
  • positionned layout utilisé pour le positionnement d'élément autonome au sein de la page. Le dernier modèle de boîte concerne les éléments positionnés hors flux. Les éléments HTML basculent dans ce modèle lorsque les porpriétés CSS position ou float sont utilisées. Dans ce cas les éléments n'ayant plus de parent, n'ont plus de taille par défaut. Leur taille est donc dépendante de leur contenu. Pour le reste, le modèle de boîte de type block> s'applique.

Retour sur les balises de type block et inline

En HTML, la plupart des balises peuvent se ranger dans l'une ou l'autre de ces deux catégories :
  • Les balises block : c'est le cas par exemple des paragraphes <p></p>. Une balise de type block sur votre page Web crée automatiquement un retour à la ligne avant et après. Votre page Web sera en fait constitué d'une série de blocs les uns à la suite des autres. Il est également possible de placer un bloc à l'intérieur d'un autre bloc, ce qui augmente considérablement nos possibilités pour créer le design de notre site ! (ex : <p>, <footer>, <h1>, <h2>, <section>, etc.).
  • Les balises inline : c'est le cas par exemple des liens <a></a>. Une balise de type inline se trouve obligatoirement à l'intérieur d'une balise block. Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne c'est pour cela que nous parlons de balise en ligne. (ex : <em>, <strong>, <mark>, <a>, <img>, etc.).
Comme nous l'avons déjà évoqué dans la définition, il existe plusieurs autres catégories très spécifiques, par exemple pour les cellules de tableau (type table-cell) ou les puces (type list-item), que nous découvrirons dans le chapitre suivant.
Différence entre une balise inline et une balise block 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les modèles de boîte</title>
      <style>
         body { background-color: bisque;  }
         h1, p { background-color: burlywood; padding: 3px; }
         a { background-color: beige; padding: 3px; }
         em { font-weight: bold; color: beige; }
      </style>
   </head>

   <body>    
      <h1>Un titre important</h1>
      <p>
         Un paragraphe disposant d'un <a>lien à l'intérieur</a> qui nous permet 
         de faire la différence entre les balises de type <em>block et l'inline</em>.
      </p>
      <p>Un autre paragraphe</p>
   </body>
</html>
Comme vous pouvez le constater, les blocs sont les uns en-dessous des autres. Nous pouvons aussi les imbriquer les uns à l'intérieur des autres, à l'image des blocs <aside> qui se situe à l'intérieur des blocs <section>. La balise inline <a> se trouve à l'intérieur d'une balise block> et le texte vient s'insérer sur la même ligne.

Anatomie d'une boîte - Dimensions

Les boîtes de bloc sont des zones rectangulaires qui se comportent comme autant de zones d'affichage indépendantes. Chaque boîte peut être dotée de barre de défilement, d'une image d'arrière plan, de styles indépendants et être positionnée précisément sur la page pour obtenir un affichage digne d'un professionnel.

Une boîte rectangulaire peut être définie par les diverses composantes suivantes :
  • La zone de son contenu : représentée par une largeur et une hauteur : en CSS, il s'agit des propriétés width et height.
  • Un espace réservé uniquement à la bordure de la boîte : (propriété border).
  • Une marge interne à la boîte : (propriété padding) se situant entre la zone de contenu et la bordure.
  • Une marge externe à la boîte : (propriété margin) qui se situe hors de la boîte, au-delà de l'espace alloué à la bordure. Elle affecte le positionnement de l'élément puisqu'elle pousse la boîte ou ses soeurs environnantes.
Les marges et les bordures

Toutes ces composantes doivent être prises en considération : contrairement à ce que nous pouvons penser, un élément n'occupe pas uniquement l'espace déterminé par sa valeur width, mais aussi celui de ses marges internes (padding) ainsi que ses bordures. Vous pouvez régler chacune de ces propriétés soit en pixels (px), pourcentage (%) en em, etc. Par défaut, un bloc prend systématiquement 100% de la largeur disponible, comme par exemple les balises <body> et <p> (voir le résultat précédent).

Par exemple 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les modèles de boîte</title>
      <style>
         body {  margin: 0px;  background-color: bisque;  }
         p { width: 270px;   padding: 10px;   margin: 7px;   border: 1px solid peru;  background-color: burlywood;  text-align: justify;  color: brown; }
      </style>
   </head>

   <body>    
      <p>Un premier paragraphe qui nous permet de bien visualiser les différentes marges ainsi que les bordures.</p>
      <p>Un deuxième paragraphe.</p>      
   </body>
</html>
La largeur de la boîte de chaque paragraphe (surface occupée par l'arrière plan burlywood) est dans cet exemple de 292 pixels ! En effet, les composantes à prendre en compte sont width, padding et border. La marge externe (margin) n'entre pas dans le calcul de la largeur de l'élément. La propriété padding exprime les marges tout autour de l'élément principal, il faut donc le compter de chaque côté. Il en est de même pour la propriété border. Au final, nous additionnons 270 px (width) + 20 px (padding) + 2 px (border) pour parvenir à une largeur réelle de 292 pixels. La balise <body> possède par défaut des marges externe de 8 pixels. Je les ai supprimé afin de bien visualiser les marges concernant les deux paragraphes.
Agir sur un côté spécifique

D'après le résultat obtenu, les propriétés margin, padding et border s'appliquent systématiquement aux quatre côtés du bloc. Si vous désirez spécifier des marges différentes en haut, en bas, à gauche et à droite, vous devez alors utiliser des propriétés plus précises. Le principe est relativement simple. Il suffit de spécifier les suffixes concernant la position désirée (top, bottom, left et right) sur les propriétés qui vous intéressent.

En voici quelques exemples :
  • margin-top : marge extérieur en haut ;
  • padding-left : marge intérieure à gauche ;
  • border-bottom : bordure du bas.

Il existe d'autre façons de spécifier les marges avec les propriétés margin et padding comme beaucoup d'autres.

Par exemple :
  1. margin: 2px 0 3px 1px; marge extérieure en haut de 2px, aucune à droite, 3px à en bas et 1px à gauche.
  2. padding: 2px 3px; marge intérieure de 2px en haut et en bas et de 3px> à gauche et à droite.

box-sizing

Comme nous venons de le voir, le calcul de la largeur d'une boîte peut s'avérer délicat puisque nous devons tenir compte de la largeur du contenu, de la largeur de la marge interne et de la largeur de la bordure. La propriété permet alors de modifier la méthode de calcul des dimensions d'une boîte.

La propriété box-sizing accepte trois valeurs :
  • content-box : modèle de boîte par défaut ;
  • border-box : les bordures et les marges internes sont comprises dans les dimensions de la boîte ;
  • padding-box : seules les marges internes sont comprises.
En reprenant l'exemple précédent, mais en ajoutant la valeur border-box à la propriété box-sizing

Les bordures et les marges internes étant incluses à l'intérieur de notre élément, celui-ci mesurera donc exactement 270px au lieu des 292px calculés précédemment La zone d'affichage correspondant au contenu s'en trouve donc réduit.
Cette nouvelle propriété permet ainsi de s'affranchir du calcul que nous devons effectuer lorsque nous fixons la taille d'un élément qui a des bordures et/ou des marges internes. Elle devient également très pratique lorsque nous utilisons les poucentages pour fixer la taille d'un élément, tout en ajoutant des marges internes en px ou en em.

Minima et maxima

Une bonne pratique de la conception Web accessible à tous est de favoriser autant que possible la fluidité des éléments. Souvent, nous leur affectons une hauteur propriété height en espérant figer leur aspect comme nous le faisons sur le support d'impression. C'est un leurre puisque le contenu demeure libre alors de dépasser de sa boîte. Or, nous ne pouvons pas dompter la taille des textes que le visiteur va définir selon ses besoins et envies. Evitez par conséquent de fixer impérativement une hauteur, sauf s'il s'agit d'un élément dont vous maîrtiser parfaitement les dimensions du contenu.

Afin d'éviter ce genre de problématique, nous pouvons proposer au bloc des dimensions minimales et maximales grâces aux propriétés ci dessous :

  • min-width : largeur minimale (en pixels, pourcentage, em...) ;
  • max-width : largeur maximale ;
  • min-height : hauteur minimale ;
  • max-height : hauteur maximale.

Ces propriétés particulières ne figent pas les dimensions de l'élément, à la différence des classiques height et width, mais se contentent de définir une valeur minimale ou maximale, quelque soit le contenu présent.

Valeurs minimales 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les modèles de boîte</title>
      <style>
         body { background-color: bisque; }
         p { 
            width: 50%;    min-width: 200px;  min-height: 80px;  padding: 10px;    margin: 7px; 
            border: 1px solid peru;  background-color: burlywood;  text-align: justify;  color: brown;
         }
      </style>
   </head>

   <body>    
      <p>Un premier paragraphe qui nous permet de bien visualiser les différentes marges ainsi que les bordures.</p>
      <p>Un deuxième paragraphe.</p>      
   </body>
</html>
Bonne pratique

La propriété max-width est particulièrement utile pour la gestion des contenus récalcitrants : plutôt que de limiter la largeur du bloc parent, nous pouvons nous en servir pour restreindre les dimensions internes de contenus. L'avantage est que cette propriété peut aussi bien s'appliquer sur des éléments tels que des images <img>, des champs de formulaires (<input>, <select> ...) ou des tableaux de données (<table>, <td>, <th>).

Par exemple 
p img { max-width: 600px; }  /* les images des paragraphes seront limitées à 600px de large */
La propriété max-width est une excellente rustine pour de nombreux éléments dont le contenu n'est pas forcément maîtriser dans toutes les situations. Ainsi, la déclaration max-width: 100% restreint l'élément désigné à ne pas déborder de son parent.

Centrer horizontalement des blocs

Si une déclaration text-align: center appliquée à un bloc suffit à centrer horizontalement le contenu textuel ou les images au sein de celui-ci, l'alignement des éléments de type bloc est généralement plus problématique. pourtant l'une des particularités du modèle de boîte, et plus précisément de ses marges externes, permet de centrer simplement les blocs.

Pour centrer des blocs, vous devez respecter les règles suivantes :
  1. Donnez une largeur au bloc (avec les propriétés width, min-width ou max-width) ;
  2. Indiquez que vous désirez des marges extérieures automatiques, avec la valeur auto.
Centrer les boîtes 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les modèles de boîte</title>
      <style>
         body { background-color: bisque; }
         p { 
            width: 50%;   min-width: 200px;  min-height: 80px;  padding: 10px;   margin-left: auto;   margin-right: auto;
            border: 1px solid peru;  background-color: burlywood;  text-align: justify;  color: brown;
         }
      </style>
   </head>

   <body>    
      <p>Un premier paragraphe qui nous permet de bien visualiser les différentes marges ainsi que les bordures.</p>
      <p>Un deuxième paragraphe.</p>      
   </body>
</html>
A ce stade, les paragraphes larges de 50% sont centré horizontalement au sein de son conteneur <body>. Nous pouvons optimiser le code en employant la syntaxe raccourcie de la propriété margin : 
p { width: 50%; margin: 0 auto; }
Alignement vertical d'un élément

Notez pour finir que les marges automatiques appliquées en haut et en bas n'ont aucun effet sur l'alignement vertical d'un élément. Le centrage vertical est une mission plus délicate que nous découvrirons ultérieurement. Ainsi il possible de simplifier encore plus le réglage de margin.

Par exemple 
p { width: 50%; margin: auto; }

Fusion des marges

La fusion des marges est une particularité du modèle de boîte qui concerne les marges externes verticales (margin-top et margin-bottom) des éléments de type bloc positionnés dans le flux. Lorsque deux ou plusieurs éléments sont adjacents, qu'ils soient frères ou imbriquée (parent-enfant), leurs marges verticales se combinent pour n'en former qu'une seule : la plus grande des deux.

Fusion et non addition

Dans l'exemple qui suit, pour chaque paragraphe nous définissons une marge haute de 10 pixels et une marge basse de 20 pixels. Nous nous attendons par conséquent à un écart de 30 pixels entre les deux paragraphes. Or il n'en n'est rien : en vertu de la fusion de marges, seule la marge la plus élevée, c'est-à-dire 20 pixels, est retenu.

Fusion des marges 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les modèles de boîte</title>
      <style>
         body { background-color: bisque; }
         p { 
            width: 270px;    padding: 7px;    margin-top: 10px;   margin-bottom: 20px;
            border: 1px solid peru; background-color: burlywood; text-align: justify; color: brown;
         }
      </style>
   </head>

   <body>    
      <p>Un premier paragraphe qui nous permet de bien visualiser les différentes marges ainsi que les bordures.</p>
      <p>Un deuxième paragraphe.</p>      
   </body>
</html>
Boîtes imbriquées

Plus déroutant encore, ce mécanisme intervient également dans le cas de boîtes imbriquées, c'est-à-dire entre un parent et son premier ou son dernier enfant, par exemple un paragraphe <p> au sein d'un <article>. Le principe demeure identique, à l'exception notable que les marges concernées sont :

  • La marge supérieure du parent et la marge supérieure du premier enfant ;
  • La marge inférieure du parent et la marge inférieure du dernier enfant.

Parmi ces combinaisons, la marge externe la plus grande est retenue et s'applique au-dessus ou en dessous du parent.

Fusion des marges 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les modèles de boîte</title>
      <style>
         body { background-color: bisque; }
         article {  background-color: peru;  }
         p { 
            width: 270px;   padding: 3px;    margin-top: 30px;
            background-color: burlywood; text-align: justify; color: brown;
         }
      </style>
   </head>

   <body>    
      <article><p>La marge haute se répercute sur le parent</p></article>   
   </body>
</html>
Cette situation illustre au comportement courant, dû à la fusion de marges entre un parent et son enfant : la marge supérieure de <article> non renseignée donc nulle fusionne avec la marge supérieure de <p> (30 pixels). Au final, la marge externe supérieure du bloc <article> prend pour valeur... 30px et tout le bloc est décalé vers le bas.
Cas où la fusion des marges ne s'appliquent pas

Le mécanisme de fusion des marges a été instauré pour harmoniser le rythme vertical, par exemple pour mieux répartir une suite de paragraphes ou de liens, de façon à ce que l'espace entre chaque élément demeure identique. Dans certains cas, il est souhaitable de s'affranchir de ce phénomène, qui peut perturber l'affichage d'un site web. Dans les différents cas suivants, la fusion des marges ne s'applique pas entre un parent et son enfant :

  1. Lorsqu'une bordure est appliquée sur le parent. Une simple bordure haute ou basse suffit et il est impossible de rendre cette bordure invisible avec une déclaration de type border-top: 1px solid transparent. Attention toutefois à ne pas oublier que la largeur de la bordure compte dans le calcul des dimensions de boîte.
  2. Lorsqu'une marge interne (padding) haute ou basse est appliquée au parent. Là aussi, un simple padding-top: 1px fonctionne, mais doit être pris en compte dans la hauteur du parent. Cette astuce fonctionne sur tous les navigateurs.

  3. Lorsqu'un contenu orphelin (non balisé) est introduit avant le premier enfant : n'importe quel texte brut, ou caractère, empêche alors la fusion de marges.
  4. Lorsque la déclaration overflow: hidden ou overflow: auto est appliquée sur le parent. Cette solution est intéressante, mais a d'autres conséquences (empêche le dépassement des flottants, peut cacher les contenus qui dépassent ou faire apparaître des barres de défilement). A utiliser avec prudence.
  5. Lorsque le parent est positionné hors du flux position absolue, fixée ou flottement. Il s'agit là aussi d'une manoeuvre séduisante, mais qui a des répercussions sur l'ensemble du design de votre page web.

Le contenu dépasse les capacités de la boîte - overflow

Lorsque nous commençons à définir des dimensions précises pour nos blocs, comme nous venons de le faire, il arrive qu'ils deviennent trop petits pour le texte qu'ils contiennent. Les propriétés CSS que nous allons découvrir ici ont justement été créées pour contrôler les dépassements... et décider quoi faire si jamais cela devait arriver. Dans certain contexte particuliers, pour ne pas dénaturer la mise en page d'un document, nous sommes amenés à masquer les contenus d'un élément dimensionné à l'aide de la règle overflow (hidden, scroll ou auto).

Problème avec les longs textes

Je vous propose d'illustrer ces propos. Supposons que nous ayons un long paragraphe et que nous voulions qu'il fasse impérativement 200px de large et 110px de haut. Eh oui ! Comme vous pouvez le constater ci-dessous, vous avez demandé des dimensions précises, vous les avez eues ! Mais... le texte ne tient pas à l'intérieur d'un si petit bloc.

Le texte dépasse les capacités du bloc 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les modèles de boîte</title>
      <style>
         body { background-color: bisque; }
         p { 
            width: 200px;   height: 110px;   padding: 5px; 
            background-color: burlywood;   text-align: justify;  color: brown;  border: 1px solid brown;  box-shadow: 3px 3px 7px gray;
         }
      </style>
   </head>

   <body>    
      <p>
         Un simple paragraphe qui comporte du texte relativement long qui dépasse 
         les capacités de la boîte. Ainsi nous pouvons découvrir que la suite du texte
          est quand même affichée, mais en dehors du cadre prévu à cet effet.
      </p>
   </body>
</html>
Empêcher le texte de dépasser les limites de la boîte

Si vous désirez que le texte ne dépasse pas les limites du paragraphe, il va falloir utiliser la propriété overflow. Voici les valeurs quelle peut accepter :

  • visible par défaut : Si le texte dépasse les limites de taille, il reste visible et sort volontairement du bloc.
  • hidden : Si le texte dépasse les limites, il sera tout simplement coupé. Nous ne pourrons pas voir tout le texte.
  • scroll : Là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette fois, le navigateur met en place des barres de défilement pour que nous puissions lire l'ensemble du texte. C'est un peu comme un cadre à l'intérieur de la page.
  • auto : C'est le mode pilote automatique. En gros, c'est le navigateur qui décide de mettre ou non des barres de défilement il n'en mettra qui si c'est nécessaire. C'est la valeur que je conseille d'utiliser le plus souvent.
Le texte dépasse les capacités du bloc 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les modèles de boîte</title>
      <style>
         body { background-color: bisque; }
         article {  background-color: peru;  }         
         p { 
            overflow: auto;  width: 220px;   height: 110px;  padding: 5px; 
            background-color: burlywood;  text-align: justify;   color: brown;   border: 1px solid brown;   box-shadow: 3px 3px 7px gray;
         }</style>
   </head>

   <body>    
      <article><p>La marge haute se répercute sur le parent</p></article>   
   </body>
</html>
Les barres de défilement nous permettent maintenant de consulter le contenu qui n'était pas visible.
Sans les barres de défilement

Il existe d'autres approches possibles en nous passant des barres de défilement. Nous venons de voir que le contenu qui déborde de ce bloc est alors rogné et invisible. Il peut être également utile de laisser un indice visuel pour indiquer la présence de ce contenu masqué. C'est là qu'intervient une nouvelle propriété text-overflow associée à la valeur ellipsis, des points de suspension (...) sont ajoutés à l'endroit où le terme est rogné, mais il est possible de substituer cet indice par un autre de son cru à l'aide de la propriété text-overflow-ellipsis.

Le texte dépasse les capacités du bloc 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les modèles de boîte</title>
      <style>
         body { background-color: bisque; }
         p { 
            overflow: hidden;  text-overflow: ellipsis;   width: 210px;   height: 120px;  padding: 7px; 
            background-color: burlywood;  text-align: justify;   color: brown;   border: 1px solid brown;   box-shadow: 3px 3px 7px gray;
         }
      </style>
   </head>

   <body>    
      <p>
         Un simple paragraphe qui comporte du texte relativement long qui dépasse 
         les capacités de la boîte. Remarquez la présence de ce lien un peu long :
         <a href="" title="http://www.choixdusite.fr/photos/lesmeilleures/">
            http://www.choixdusite.fr/photos/lesmeilleures/
         </a>
      </p>
   </body>
</html>
Gardez bien à l'esprit que text-overflow à lui tout seul ne coupe rien ; il ne sert qu'à donner une indication des points de suspension, par exemple sur un texte déjà coupé (via overflow: hidden généralement).

Le contenu dépasse les capacités de la boîte - overflow-x overflow-y

Les propriétés overflow-x et overflow-y sont des variantes spécifiques de la propriété overflow définie en CSS 2, qui agissent sur un seul axe à la fois : overflow-x gère les débordements horizontaux tandis que overflow-y se charge des dépassements verticaux. Les valeurs admises sont les mêmes que pour overflow :

  • visible par défaut : Le bloc est automatiquement redimensionné selon le contenu, aucune barre de défilement n'apparaît.
  • hidden : Le contenu excédentaire est purement et simplement masqué, sans qu'un ascenceur n'apparaisse.
  • scroll : Une barre de défilement apparaît constamment, même si le contenu ne dépasse pas du bloc.
  • auto : Les dimensions du bloc sont fixes et la barre de défilement apparaît uniquement dans le cas d'un contenu long.

Couper les textes trop larges

Dans un contenu de type texte, lorsqu'un mot sans espace ni trait d'union est plus large que la dimension définie pour son parent, le comportement normal consiste à faire déborder le texte au-dela de la largeur normale du cadre, sans retour à la ligne et sans que la dimension du conteneur ne soit affecté.

Aller à la ligne automatiquement

Il est toutefois possible de forcer la césure d'un mot long à l'aide de la propriété word-wrap appliquée au parent et qui aura pour effet de couper le mot à un endroit arbitraire afin de provoquer un retour à la ligne. La propriété word-wrap admet deux valeurs : normal par défaut et break-word.

Couper le texte trop large 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les modèles de boîte</title>
      <style>
         body { background-color: bisque; }
         p { 
            word-wrap: break-word;  width: 210px;   padding: 7px; 
            background-color: burlywood;  color: brown;   border: 1px solid brown;   box-shadow: 3px 3px 7px gray;
         }
      </style>
   </head>

   <body>    
      <p>Voici un lien un peu long : <a href="">http://www.choixdusite.fr/photos/lesmeilleures/</a></p>
   </body>
</html>

Changer les dimensions d'un bloc

La propriété resize offre l'opportunité à l'utilisateur de redimensionner un bloc à l'aide d'un simple glisser-déposer de la souris. Son application est particulièrement salutaire au sein des éléments de textes libres d'un formualire <textarea>, que le visiteur peut à présent agrandir à loisir afin de disposer de suffisamment d'espace pour insérer son contenu sans être gêné.

Les valeurs de cette propriété sont :
  • none : L'élément ne peut pas être redimensionné par l'utilisateur.
  • vertical : L'élément peut être étiré verticalement uniquement.
  • horizontal : L'élément peut être étiré horizontalement uniquement.
  • both : L'élément peut être contrôlé dans les deux sens.
Retailler une zone d'édition 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les modèles de boîte</title>
      <style>
         body { background-color: bisque; }
         textArea {   width: 200px;   height: 80px;  padding: 7px;  resize: both;   }
      </style>
   </head>

   <body>    
      <textarea>Saisissez votre valeur</textarea>
   </body>
</html>

Le flux courant

L'ordre dans lequel apparaissent les balises dans le code HTML est celui dans lequel les boîtes sont affichées et s'empilent dans le document. Ce schéma de positionnement par défaut se nomme le flux courant. La mise en place des différents éléments de la page s'organise par défaut selon le flux courant.

Les règles de positionnement dans le flux courant sont relativement simples et intuitives. Chaque élément :
Retailler une zone d'édition 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Flux courant</title>
      <style>
         body { background-color: goldenrod; }
         h1, p, a, ul, li { color: bisque; border: 1px solid bisque; margin: 5px; padding: 7px; }
         h1, p, ul, li { background-color: darkgreen; }
         a, img { background-color: chocolate; }
         ul { list-style-type: none; }
      </style>
   </head>

   <body>    
      <h1>Un titre</h1>
      <p>Un paragraphe</p>
      <p>Un autre paragraphe <a>Un lien</a><a>Un autre lien</a></p>
      <ul>Liste non ordonnée
         <li>Un élément de liste</li>
         <li>Un autre élément de liste</li>
      </ul>
   </body>
</html>
Placement automatique

Contrairement à ce que nous pourrions penser, un système aussi rudimentaire que le positionnement en flux permet d'aller très loin dans la mise en page d'un document.

Positionnement absolu

Le positionnement absolu représente un extraordinaire moyen d'étendre limites imposées par le flux courant. Le mécanisme décrivant ce schéma de positionnement est parfaitement défini. Le positionnement absolu permet de placer un élément réellement n'importe où sur la page.

Rubriques
Positionnement du bloc

Un élément est positionné en absolu à l'aide de la propriété position et de sa valeur associée absolute. Mais cela ne suffit pas ! Nous venons juste de préciser que nous désirions une position absolue, mais nous n'avons pas encore précisé où le bloc doit se positionner dans la page. Pour ce faire, nous allons utiliser une des propriétés suivantes :

Comme d'habitude, nous pouvons donner à ces propriétés une valeur en pixels, comme 18px, ou bien une valeur en pourcentage, comme 70%.

Sortie du flux

La grande particularité de ce positionnement est qu'il retire l'élément concerné du flux courant selon ce schéma :
  • L'élément se retrouve sur un autre plan, placé au-dessus du niveau du flux, comme un calque que nous utilisons dans les logiciels de traitement d'image.
  • Les éléments restants se réorganisent entre eux, dans le flux, sans tenir compte de l'élément positionné en absolu hors de leur plan d'affichage.
On dit des éléments héritant de la propriété position qu'ils sont positionnés. Aux éléments positionnés peuvent s'appliquer les quatre propriétés top, right, bottom et left. Il est inutile d'essayer de les affecter à un élément faisant parti du flux courant, elles n'auront aucune conséquence.
Paragraphes dans le flux courant 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Position absolue</title>
      <style>
         body { background-color: goldenrod; font-weight: bold; }
         p  { background-color: darkgreen; color: bisque; border: 1px solid bisque; margin: 5px; padding: 4px; }
         p.calque { background-color: black;  }
      </style>
   </head>

   <body>    
      <p>Paragraphe n°1</p>
      <p class="calque">Paragraphe n°2</p>
      <p>Paragraphe n°3</p>
   </body>
</html>
Paragraphe en position absolue 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Position absolue</title>
      <style>
         body { background-color: goldenrod; font-weight: bold; }
         p  { background-color: darkgreen; color: bisque; border: 1px solid bisque; margin: 5px; padding: 4px; }
         p.calque { background-color: black;  position: absolute; right: 0; top: 0; height: 70px; margin: 0; }
      </style>
   </head>

   <body>    
      <p>Paragraphe n°1</p>
      <p class="calque">Paragraphe n°2</p>
      <p>Paragraphe n°3</p>
   </body>
</html>

Référentiel

Nous avons maintenant bien avancé sur le concept du positionnement absolu, mais il nous manque une donnée essentielle : qui est donc ce fameux Référent mentionné partout ? Plus prosaïquement, par rapport à quoi se positionne un élément en absolu ? C'est là que beaucoup de concepteur web se fourvoient : souvent la réponse qui est donnée Par rapport aux coins de l'écran ou Selon le document web. Même si ce cas de figure peut survenir, il ne s'agit pourtant que d'une exception à la règle.

L'étiquette Élément positionné prend toute sa signification lorsque nous énonçons la formule magique décrivant ce mécanisme de positionnement : Un élément positionné en absolu se place par rapport à son premier ancêtre positionné.

Le principe est le suivant :

le bloc positionné en absolu remonte toute sa branche au sein de la hiérarchie dans le code HTML. Il vérifie si son parent est positionné, c'est-à-dire s'il est muni de la propriété position avec une valeur autre que static. Si tel n'est pas le cas, il remonte d'une génération et ainsi de suite jusqu'à trouver un ancêtre positionné. En dernier recours, si l'élément positionné absolument ne rencontre aucun ancêtre positionné, son référent est l'élément racine <html>.

Nous comprenons, grâce à cette règle, qu'il devient aisé d'indiquer une référence à un bloc absolu : il suffit d'appliquer une des valeurs absolute, fixed ou relative sur la propriété position à cet élément de référence.

Un mode de rendu particulier

Spécificités de rendu

Le positionnement absolu ne répond pas seulement à un mode de placement caractéristique, mais se double également de certaines spécificités de rendu :

  • Sa boîte devient dimensionnable quel que soit son type de rendu initial. Cela signifie qu'un élément HTML de rendu inline par défaut peut bénéficier des propriétés width, height, min-width, max-width, etc. qui auraient été inopérantes dans le flux.
  • L'élément occupe par défaut exactement la largeur de son contenu, c'est-à-dire qu'un bloc qui ne contient qu'un seul mot n'occupera que la surface de ce mot, tandis qu'un élément contenant de longs paragraphes s'étendra sur toute la largeur du référent.
  • Les marges externes des éléments positionnés en absolu ou de leurs enfants ne sont pas sujettes au phénomène de fusion des marges évoqué précédemment.

La profondeur : z-index

Tous les éléments de la page se place selon une composante horizontale (Axe X), verticale (Axe Y) et de profondeur (Axe Z). La propriété z-index a pour valeur un nombre entier qui représente l'ordre d'empilement de l'élément. Plus ce dernier est grand, plus la couche sera haute dans la pile. La valeur 0 de z-index représente la couche de base de l'élément dans le flux. Une valeur négative est permise afin de passer un élément derrière les plans visibles.

Règles

Dans la plupart des cas de figure classiques, la compréhension de l'empilement est intuitive, mais elle l'est moins dès que le contexte est plus complexe. Voici les règles à retenir :

  1. Sans z-index, les éléments s'empilent suivant leur ordre d'apparition dans le code HTML. Le premier se place sous les suivants.
  2. Lorsqu'une propriété z-index est appliquée à plusieurs éléments positionnés au sein d'un même référent, celui bénéficiant de la valeur la plus forte apparaît par dessus les autres.
  3. Lorsque les éléments positionnés dépendent de plusieurs référents qui eux-mêmes disposent d'une valeur de z-index, c'est le poids du z-index référent qui devient prioritaire.
Paragraphe en position absolue 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>z-index</title>
      <style>
         body { background-color: goldenrod; font-weight: bold; }
         p  { color: bisque; border: 1px solid bisque; margin: 5px; padding: 4px; }
         p.index1 { background-color: orangered;  position: absolute; left: 10px; top: 10px; z-index: 3; }
         p.index2 { background-color: black;  position: absolute; left: 30px; top: 30px;  z-index: 2; }
         p.index3 { background-color: darkblue;  position: absolute; left: 50px; top: 50px; z-index: 1;  }
      </style>
   </head>

   <body>    
      <p class="index1">Paragraphe n°1</p>
      <p class="index2">Paragraphe n°2</p>
      <p class="index3">Paragraphe n°3</p>
   </body>
</html>

Etirer un élément

L'une des possibilités originales offertes par les propriétés top, right, bottom et left est de pouvoir cumuler les paires contraires (left et right ou top et bottom) pour littéralement étirer l'élément positionné en absolu au sein de son référent. Ainsi, un paragraphe positionné doté de la double déclaration left: 0; et right: 0; va s'étendre sur toute la largeur de son référent au lieu de n'occuper que la largeur de son contenu.

L'intérêt peut ne pas sembler évident au premier abord, puisque la largeur de type width: 100%; suffit à déployer le bloc sur toute la surface libre. Cependant, rappelez-vous que la propriété width ne représente que la composante de contenu d'une boîte et que les autres unités (bordures, marges internes et externes) sont parfois nécessaires et vont s'ajouter à cette valeur de 100%, provoquant un conflit : le bloc peut dépasser son référent, ou pire, interagir avec d'autres éléments avoisinants.

Astuce

Dans le cas où l'élément absolu est dimensionné à l'aide de ses paires contraires, il devient possible d'occuper 100% de la largeur tout en bénéficiant des propriétés padding et border. Bien entendu, cette astuce fonctionne également pour la paire top et bottom dans le cas d'une expension vertical et elle permet certaines fantaisies, telle que centrer un élément dans la page sans lui imposer de dimensions.

Etirer un élément 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Etirer un élément</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         #message  { 
            position: absolute;   top: 10%; bottom: 10%;    left: 10%; right: 10%;
            padding: 10px; text-align: center; color:  brown;
            background-color: burlywood; border-radius: 10px; box-shadow: 1px 1px 8px;
         }
      </style>
   </head>

   <body>    
      <p id="message">
         Un simple paragraphe qui comporte un texte relativement long qui sera
         automatiquement centré sur la page Web, quelque soit ses dimensions.
      </p>
   </body>
</html>

Positionnement fixé

Autant le positionnement absolu est célèbre, autant il est bien plus rare d'entendre parler du positionnement fixé. Le positionnement fixé se distingue principalement de son cousin absolu de par sa particularité de rendu : un élément fixé demeure ancré à l'écran même lorsque l'utilisateur fait défiler le contenu à l'aide des ascenseurs. De cette manière, l'élément fixé demeure constamment visible quelque soit les conditions.

Pourtant les similitudes entre les deux schémas sont nombreuses.
Toujours visible

En terme de localisation, et lorsque les propriétés top, right, bottom et left sont précisées, l'élément fixé est toujours positionné par rapport à la partie visible de la fenêtre du navigateur, quel que soit sont ancêtre, fut-il positionné. Ce type de positionnement se révèle particulièrement séduisant dans la conception d'un menu de navigation qui demeurera figé à l'écran même si le contenu de la page défile.

Paragraphes fixé en bas et à droite de la page 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Elément fixé</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         #message  { 
            position: fixed;  bottom: 0; right: 0;  width: 50%;
            padding: 10px; text-align: center; color:  brown; margin: 5px;
            background-color: burlywood; border-radius: 5px; box-shadow: 1px 1px 5px;
         }
      </style>
   </head>

   <body>    
      <p id="message">
         Un simple paragraphe qui comporte un texte qui sera automatiquement placé 
         en bas à droite du navigateur, même si la page web est beaucoup plus grande.
      </p>
   </body>
</html>

Positionnement relatif

Ce positionnement permet d'effectuer des ajustements : l'élément est décalé par rapport à sa position initiale. Un élément positionné relativement se place par rapport à sa position classique dans le flux, puis est éventuellement décalé si au moins une des propriétés top, right, bottom ou left est renseignée. La notion de relatif s'applique par conséquent à son emplacement initial dans le flux.

Contrairement aux schémas absolus et fixés, les propriétés top, right, bottom et left ne servent pas à indiquer un emplacement, mais un décalage par rapport à la position initiale. Ainsi, un élément relatif demeure dans le flux et continue à interagir avec les autres éléments voisins. D'ailleurs, l'espace laissé par un élément décalé en relatif ne peut être occupé par d'autres éléments, car il est toujours censé l'occuper.
Élément positionné

Un élément positionné relativement conserve une particularité due à sa propriété CSS : il est dit positionné. Le seul fait d'être positionné en relatif, sans adjonction de valeurs pour top, right, bottom et left en fait un référent dans le flux, parfait pour les contenus positionnés en absolu C'est d'ailleurs son usage principal..

Position relative 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Position relative</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         p  { 
            width: 220px;
            padding: 10px; text-align: justify; color:  brown; margin: 5px;
            background-color: burlywood; border-radius: 5px; box-shadow: 1px 1px 5px;
         }
         strong {
            position: relative;  top: -3px;
            background-color: brown; color: bisque; padding: 2px; 
            opacity: 0.4; border-radius: 2px; font-size: 1.2em; box-shadow: 0 0 3px black;
         }
      </style>
   </head>

   <body>    
      <p id="message">
         Un paragraphe qui comporte un <strong>message important</strong> qui sera mis 
         en valeur par rapport au reste du paragraphe.
      </p>
   </body>
</html>

Positionnement flottant

Ce type de positionnement est très particulier. Il utilise la propréité float et non plus la propriété position. Le principe de base est le suivant : un élément flottant est ôté du flux et placé à l'extrême gauche (float: left;) ou droite (float: right;) de son conteneur, tout en demeurant sur sa hauteur de ligne initiale.

Rubriques
Ce principe de positionnement est lourd de conséquence, car si l'élément est extrait du flux courant, il ne l'est que partiellement : les éléments précédant le bloc ne sont pas affectés ; cependant, tous les éléments suivants se réorganisent dans le flux comme dans le cas du positionnement absolu, sauf... leur contenu qui, lui, s'écoule autour du flottant en épousant sa forme.
Dans le flux

Il est par conséquent nécessaire d'être très attentif au modèle de boîte des éléments suivant le flottant : seule la composante de contenu de la boîte s'écoule autour de l'élément flottant qui la précède. En revanche, la boîte elle-même se repositionne dans le flux à la suite de la boîte en flux précédente.

Paragraphes flottants 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Position relative</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         p  { 
            padding: 5px; text-align: justify; color:  bisque; 
            background-color: darkolivegreen; border: thin solid white;
            box-shadow: 1px 1px 3px black;
         }
         p.flottant {
            float: left;  background-color: black;
            margin-top: 0; margin-right: 5px; margin-bottom: 5px; 
         }
      </style>
   </head>

   <body>    
      <p class="flottant">Un paragraphe flottant.</p>
      <p>
         Un paragraphe normal qui suit le flux courant et dont le texte s'écoule et  épouse 
         les contours du paragraphe flottant quelque soit les dimensions de la page web.
      </p>
   </body>
</html>

Des blocs côte à côte

A l'instar du positionnement absolu, un élément flottant adopte par défaut la largeur qu'occupe son contenu. Si celui-ci est dense, elle est susceptible d'occuper toute la largeur du parent, c'est pourquoi il est souvent nécessaire de fixer une largeur au flottant via la propriété width ou max-with.

Lorsqu'un élément flottant est poussé dans la même direction qu'un autre élément flottant, il demeure sur le même plan et se cale à ses côtés. Il s'agit d'une méthode courante de mise en forme de blocs côte à côte telle qu'un menu de navigation et la zone de contenu.
Attention !

Attention toutefois au caractère hâtif de cette disposition adjacente qui s'écarte de l'application originale de la propriété float : gardez à l'esprit que le flottement est un positionnement hors flux et qu'il n'a plus de prise sur les blocs alentours en flux, à l'exception des contenus qui vont épousés les flottants.

Cela signifie qu'un parent ne contenant que des flottants n'occupera physiquement aucune surface à l'écran, ou encore que les objets flottants vont dépasser de leur conteneur, puisque seuls des contenus en flux sont susceptibles de meubler l'espace dans le plan occupé par le flux courant.
Deux blocs côte à côte 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Position flottante</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         section { background-color: darkolivegreen; border: thin solid white; min-height: 15px; }
         p  { 
            float: left; width: 190px; 
            text-align: justify; color:  bisque; background-color: black; 
            border: thin solid white; padding: 5px; margin: 3px; box-shadow: 1px 1px 3px black;
         }
      </style>
   </head>

   <body>    
      <section>
         <p>Un paragraphe flottant qui se place au début.</p>
         <p> Un deuxième paragraphe flottant qui se place à côté du premier.</p>
      </section>
   </body>
</html>

La propriété clear

La propriété clear est une sorte de passerelle entre deux plans du document : celui du flux courant et celui des flottants. Elle interdit à un élément de se placer sur la même ligne qu'un bloc flottant et le force par conséquent à se caler directement en-dessous de celui-ci. Elle autorise par ailleurs un nettoyage des flottants exclusivement à gauche (clear: left;), à droite (clear: right;) ou les deux simultanément (clear: both;).

Interaction avec les flottants précédents

Cette fonctionnalité offre un certain nombre d'avantages, puisqu'elle autorise un objet en flux à interagir avec les flottants précédents. Cela permet, par exemple, d'empêcher des dépassements de flottants de leur parent, ou de positionner un élément toujours en bas du bloc flottant le plus long.

La propriété clear 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Position flottante</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         p  { 
            padding: 5px; text-align: justify; margin: 3px;
            color:  bisque; background-color: darkolivegreen; border: thin solid white;
            box-shadow: 1px 1px 3px black;
         }
         p.flottant { float: right;  background-color: black;  }
         p.suite { clear: right; }
      </style>
   </head>

   <body>    
      <p class="flottant">Un paragraphe flottant.</p>
      <p class="suite">Un paragraphe dont le texte se place cette fois-ci en dessous du paragraphe flottant précédent.</p>
   </body>
</html>

Rendu par défaut - propriété display

Tous les éléments d'une page web sont définis par la norme HTML en termes d'imbrications tolérées, mais ils le sont également dans leurs spécifications CSS au travers de la propriété intrinsèque display. Cette propriété existe intrinsèquement pour chacune des balise HTML et propose un rendu par défaut qui dépend de l'élément. Nous pouvons également utiliser cette propriété de façon explicite qui va nous permettre d'avoir un rendu personnalisé.

Rubriques
Caractéristiques principales
Cette propriété display est très puissante. Elle est capable de transformer n'importe quel élément d'un type vers un autre. Avec cette propriété magique, je peux par exemple imposer à mes liens (originellement de type inline) d'apparaître sous forme de bloc.
Principales valeurs que peut prendre la propriété display
Valeur Exemples Spécificités
block <div>, <p>, <ul>, <h1> Les éléments de rendu bloc se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Par exemple, une suite de paragraphe <p>.
Par ailleurs, un élément bloc occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur et peut être dimensionné à l'aide des propriétés telles que width, height, min-width, etc.
inline <a>, <em>, <span>, <strong> Les éléments de rendu inline se placent toujours l'un à côté de l'autre afin de rester dans le texte. Par défaut, il n'est pas prévu qu'ils puissent se positionner sur la page (même si cela est possible), ni de leur donner des dimensions hauteur, largeur, profondeur : leur taille va être déterminée par le texte ou les éléments qu'ils contiennent. Certaines propriétés de marges peuvent être appliquées aux éléments, comme les marges latérales (margin-left et margin-right).
none <head> L'élément est complètement retiré du flux, il n'est pas restitué par les agents utilisateurs.
list-item <li> Les éléments de rendu list-item ont un rendu de type block mais peuvent bénéficier des propriétés CSS liées aus puces (list-style...), par exemple <li>.
inline-block <input>, <select> Les éléments de rendu inline-block conservent les mêmes caractéristiques que les inline, mais peuvent être dimensionnés, par exemple l'élément <input>.
table <table> Les éléments de rendu table sont similaires aux éléments de type block, mais n'occupent par défaut que la largeur de leur contenu, par exemple <table>.
table-cell <td>, <th> Les éléments de rendu table-cell ont un rendu similaire aux éléments inline-block dans la mesure où ils s'affichent les uns à côté des autres et peuvent être dimensionnés. Leurs particularités supplémentaires est d'accepter la propriété vertical-align pour aligner leur contenu verticalement, d'avoir des hauteurs identiques entre éléments frères et de répartir automatiquement leur largeur au sein de leur parent.
table-row <tr> Les éléments de rendu table-row ont un rendu similaire aux éléments block dans la mesure où ils s'affichent les uns sous les autres. Leur particularité supplémentaire est de répartir automatiquement leur hauteur au sein de leur parent.

Combiner block et inline

Comment mettre en page deux ou plusieurs blocs côte à côte tout en étant dimensionnés ? Les schémas évoqués précédemment, le positionnement absolu et le flottement, répondent à cette problématique, mais dans un contexte difficile à maîtriser, dû à leur emplacement hors du plan des autres éléments en flux. Cette double prédisposition, pourtant familière, est par conséquent plus délicate à obtenir que nous le pensons si nous souhaitons demeurer dans le flux.

En effet, nous avions longtemps tendance à croire que :
  • Seuls les éléments de type block peuvent bénéficier de largeur (width) ou de hauteur (height) ;
  • et seuls les éléments de type inline se placent les uns à côté des autres.
Pour cumuler les deux avantages, la coutume exige - comme nous l'avons vu - de recourir aux positionnement hors flux tels que les flottants ou le positionnement absolu.

display: inline-block

La solution à ce problème de disposition existe pourtant. Tout élément doté de la règle display: inline-block devient hybride. Il est considéré comme un texte de contenu et hérite de toutes les caractéristiques d'un élément inline se place à côté de l'élément précédent et se positionne verticalement sur la ligne de texte, tout en bénéficiant d'une particularité inhérente aux block : celle de pouvoir être dimensionné. En bref, il se comporte à la fois en block et en inline, en adoptant les avantages de chacun.

Ainsi, cette valeur de la propriété display permet de bénéficier des avantages des deux modèles de boîtes : block et inline. Un élément peut donc être dimensionné tel un bloc, mais reste en ligne, c'est-à-dire que les éléments restent côte à côte. Cela permet entre autre de pouvoir fixer la taille de plusieurs éléments qui sont voués à s'afficher horizontalement, sans l'utilisation de la propriété float. De plus, un alignement vertical des éléments eux-mêmes devient possible, sans toutefois avoir la possibilité d'un alignement vertical au sein de chaque boîte (du contenu).

De beaux liens

Afin d'illustrer cette notion, prenons l'exemple d'un lien hypertexte classique <a>, dont le rendu par défaut est inline. En vertu de son appartenance au groupe des éléments en ligne, un lien ne peut pas bénéficier des propriétés de dimension telles que width. C'est là que la valeur inline-block prend tout son intérêt : modifiez simplement la valeur de rendu par défaut du lien et vous serez en mesure de lui appliquer toutes les propriétés normalements réservées aux blocs.

Combiner bloc et inline 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset=UTF-8>
      <title>inline-block</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         a { 
            display:  inline-block; width: 250px;
            background-color: burlywood; color: brown; text-align: center; text-shadow: 1px 1px 2px gray;
            padding: 5px; border-radius: 5px; box-shadow: 1px 1px 2px;           
         }
      </style>
   </head>

   <body>    
      <a>Un simple lien.</a>
   </body>
</html>

Alignement vertical

Alignement sur la ligne de base

A l'instar des contenus de type textuel, les éléments déclarés en display: inline-block; se positionnent par défaut sur la ligne de texte (baseline), comme le montre l'exemple ci-dessous :

Alignement en baseline 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Alignement baseline</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         p  { 
            display: inline-block; width: 175px; 
            text-align: justify; color:  bisque; background-color: black; 
            border: thin solid white; padding: 3px; margin: 1px; box-shadow: 1px 1px 3px black;
         }
      </style>
   </head>

   <body>    
      <p>Un premier paragraphe qui se place au début.</p>
      <p>Un deuxième paragraphe qui se place à côté du premier aligné sur la baseline.</p>
      <p>Un dernier paragraphe qui se place à la droite des autres.</p>
   </body>
</html>
L'utilisation de la règle float, très utilisée dans ce genre de situation, devient alors obsolète. La gestion du flux de la page s'en trouve facilité, il est inutile d'utiliser un clear: left; sur l'élément suivant pour annuler l'effet du float.
Les valeurs de vertical-align

La propriété vertical-align, réservée aux éléments de contenu ou aux cellules de tableaux, modifie ce comportement intrinsèque. Appliquée à un élément en display: inline-block, elle va aligner cet élément au sein de son parent, comme s'il s'agissait d'un texte, via un large assortiment de possibilités :

Valeur Description
baseline Aligne la base de l'élément avec celle de son parent valeur par défaut.
bottom Aligne le bas de l'élément avec le bas du parent.
text-bottom Aligne le bas de l'élément avec le bas de la police de l'élément parent.
top Aligne le haut de l'élément avec le haut du parent.
text-top Aligne le haut de l'élément avec le haut de la police de l'élément parent.
sub Aligne la base de l'élément avec la ligne de base indice de son parent, tel l'élément HTML <sub>.
super Aligne la base de l'élément avec la ligne de base exposant de son parent, tel l'élément HTML <sup>.
middle Aligne le milieu de l'élément avec le milieu de son parent.
longueur Aligne la base de l'élément à la longueur donnée au-dessus de la ligne de base de son parent.
pourcentage Idem à la valeur longueur, où le pourcentage est calculé par rapport à la propriété line-height.
Alignement sur la partie haute de chaque paragraphe 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Alignement vertical top</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         p  { 
            display: inline-block; width: 175px; vertical-align: top;
            text-align: justify; color:  bisque; background-color: black; 
            border: thin solid white; padding: 3px; margin: 1px; box-shadow: 1px 1px 3px black;
         }
      </style>
   </head>

   <body>    
      <p>Un premier paragraphe qui se place au début.</p>
      <p>Un deuxième paragraphe qui se place à côté du premier aligné sur la partie haute.</p>
      <p>Un dernier paragraphe qui se place à la droite des autres.</p>
   </body>
</html>
Outre l'avantage de pouvoir disposer des blocs dimensionnés côte à côte, le schéma de positionnement inline-block offre également l'opportunité de jouer avec l'alignement vertical des objets grâce à une combinaison astucieuse avec la propriété vertical-align.
Nous pouvons noter que vertical-align n'aligne pas le contenu de l'élément, mais bien les éléments entre eux, comme dans le modèle de boîte inline. Le modèle de boîte tabulaire, que nous verrons dans le chapitre qui suit, permet un centrage vertical du contenu.

Rendu de tableau en CSS

Positionnement absolu, relatif, marges négatives, flottement, clear, sont autant d'étapes nécessaires à la mise en oeuvre d'un projet web de nos jours. Concevoir des mises en pages globales sans positionnement hors flux devrait pourtant être possible en toute simplicité. Quelle solution ? Les tableaux de mise en page. Bien entendu, je ne vous parle pas de l'antique mise en page usant des balises HTML comme <table> et <td>, mais bel et bien d'une conception via les propriétés CSS conçues pour cela, sans interférer dans la structure HTML qui demeurera parfaitement sémantique.

Rubriques
Cette alchimie est rendue possible grâce à de nouvelles valeurs de la propriété display. Vous connaissiez block, inline, none et je vous ai présenté inline-block. Laissez-moi à présent vous décrire table, table-cell, table-row et consoeurs.

Valeurs table, table-cell et table-row

Ces valeurs de la propriété display nous permettent de simuler une structure de mise en pages en tableaux. En lieu et place de l'utilisation des balises <table>, <tr> ou <td>, il est possible de modifier le comportement d'un élément HTML quelconque pour qu'il se comporte tel un tableau (valeur table), telle une ligne (valeur table-row) ou telle une cellule (valeur table-cell).

Il devient ainsi possible de profiter des avantages de cette structure sans ses défauts. Par exemple, il est très facile de positionner des éléments côte à côte et de gérer une hauteur commune. Mais il est encore possible d'aller bien plus loin. La propriété display dispose d'un large panel de valeurs relatives aux rendus de forme tabulaire, dans le but d'afficher les éléments comme s'il s'agissait de tableaux, de cellules ou de lignes.

Les différentes possibilités de la propriété display
Valeur Spécification Correspondance HTML
display: table; Rendu de type tableau pour un élément, c'est-à-dire de type bloc mais qui n'occupe que la largeur du contenu. <table>
display: inline-table; Complément de table de type en-ligne pour un élément : c'est un bloc rectangulaire qui participe à un contexte de mise en forme en-ligne.
display: table-row; L'élément doit s'afficher tel une rangée de cellule. <tr>
display: table-row-group; L'élément regroupe une ou plusieurs rangées de cellules <tbody>
display: table-header-group; Comme pour table-row-group. Visuellement, cet élément est toujours affiché avant toutes les autres rangées et groupes de rangées et après une éventuelle légende. <thead>
display: table-footer-group; Comme pour table-row-group. Visuellement, cet élément est toujours affiché après toutes les autres rangées et groupes de rangées et après une éventuelle légende. <tfoot>
display: table-column; L'élément représente une colonne de cellules. attribut col.
display: table-column-group; L'élément regroupe une ou plusieurs colonnes. attribut col-group.
display: table-cell; L'élément représente une cellule de tableau <td> et <th>
display: table-caption; Légende d'un tableau, positionné par défaut en haut du tableau mais cette disposition peut être modifiée via la propriété caption-side. <caption>
Séparation entre le contenu et l'aspect visuel

Dans cet exemple, nous avons une séparation entre le contenu, qui respecte la sémantique à l'aide des balises <article> et <p>, et le rendu qui affiche chacun des paragraphes sous forme de cellules d'un tableau équitablement réparties sur une même ligne, au travers de la valeur table-cell associée à la propriété display.

Paragraphes rendus sous forme de cellules d'un tableau 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Tableau en CSS</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         article { 
            display: table; width: 100%;
            border-spacing: 5px;  background-color: green;  
         }
         p  { 
            display: table-cell; width: 500px;
            text-align: justify; color:  bisque; background-color: black; padding: 3px; 
            border: thin solid white; box-shadow: 1px 1px 3px black;
         }
      </style>
   </head>

   <body>
      <article>
         <p>Un premier paragraphe qui se place au début.</p>
         <p>Tous les paragraphes sont des cellules qui se répartissent équitablement dans l'article</p>
         <p>Toutes les cellules sont alignées verticalement à l'instar des cellules d'un tableau.</p>
      </article>
   </body>
</html>
Les éléments dont la propriété display a pour valeur table-column ou table-column-group ne sont pas rendu exactement comme si celle-ci avait été none, mais ont une certaine utilité, leurs attributs pouvant donner éventuellement un certain style aux colonnes. Dans notre écriture, nous demandons à ce que le tableau représenté par l'article prenne toute la largeur de la page. Par ailleurs, afin d'être sûr que les cellules soit de même largeur, nous prévoyons une largeur très grande, qui ne sera jamais atteinte normalement. Si vous ne spécifiez aucune largeur pour les paragraphes, les cellules se dimensionnent automatiquement suivant leur contenu à l'instar des cellules d'un tableau. Nous aurions pu éventuellement nous passer de déclarer display: table; sur l'article. Dans ces conditions, vous devez impérativement prévoir une largeur pour les cellules.
Tableau en lignes

Cependant, bien qu'il soit possible d'utiliser un display: table-cell; seul, nous vous conseillons l'utilisation du display: table et du table-layout: fixed; (voir plus loin) sur le parent, qui permet de forcer le rendu du tableau à occuper un espace fixe. Avec le table-layout: fixed, les cellules s'adaptent au tableau. Sans, les cellules s'adaptent à leur contenu, et le tableau s'adapte aux cellules.

Paragraphes rendus sous forme de lignes d'un tableau 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Tableau en CSS</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         article { 
            display: table; height: 200px;
            border-spacing: 5px;  background-color: green;  
         }
         p  { 
            display: table-row; 
            text-align: justify; color:  bisque; background-color: black; padding: 3px; 
            border: thin solid white; box-shadow: 1px 1px 3px black;
         }
      </style>
   </head>

   <body>
      <article>
         <p>Un premier paragraphe qui se place au début.</p>
         <p>Tous les paragraphes sont des lignes qui se répartissent équitablement dans l'article.</p>
         <p>Toutes les lignes sont alignées horizontalement à l'instar des lignes d'un tableau.</p>
      </article>
   </body>
</html>

Quelle différence avec HTML <table> ?

Au travers des exemples précédents, vous avez bien saisi que la mise en page se réalise au travers de réglages CSS (display: table;) et non avec du HTML (<table>) et que la différence est colossale. Les tableaux HTML pour la mise en page impliquent un appauvrissement sémantique évident, sans oublié leur tendance à devenir trop lourds, médiocres en terme d'accessibilité et de référencement. Je rappelle toutefois que les éléments <table> sont toujours nécessaires pour structurer des données tabulaires.

Employer une propriété de rendu CSS va nous permettre d'appliquer cette mise en page sur des éléments HTML ayant du sens : <h1>, <p>, <ul>, mais aussi <header>, <footer>, <aside>, etc. en HTML 5. Nous n'avons pas à se sentir coupable d'employer cette méthode de positionnement, tout comme il est tout à fait naturel d'utiliser display: inline; pour afficher une liste horizontale de liens. Il ne s'agit pas de modifier la sémantique des éléments de liste, mais simplement leur présentation à l'écran. Il en va exactement de même avec display: table-cell.

Spécificités des rangées et des légendes :
  • Comme vous l'avez découvert dans l'exemple précédent, les valeurs de rangées (display: table-row;) présentent des particularités liées à leur rendu : table-row ne comprend pas les propriétés : padding, margin, position, width, min/max-width, min/max-height, vertical-align, border et overflow.
  • Plus globalement, il n'est pas possible d'appliquer la propriété padding aux élément en display : table-row-group, table-header-group, table-footer-group, table-row, table-column-group et table-column.
  • Enfin, il ne peut y avoir qu'un seul table-caption au sein d'un tableau.

Particularité du modèle tabulaire

La structure de rendu sous forme de tableau CSS comporte un certain nombre de singularités qui la distinguent des autres modèles dans le flux : la création d'objets anonymes, l'alignement vertical et la répartition fluide des enfants au sein de leur parent. Elément anonyme : chaque élément de rendu tableau en CSS crée automatiquement des objets de table anonymes autour de lui-même, c'est-à-dire que les éléments de structure manquants sont créés par le navigateur.

De manière générale :
  • Lorsque nous appliquons la déclaration display: table-cell; à un élément, tous ses frères adoptent naturellement un rendu de cellule de tableau.
  • Lorsque nous appliquons la déclaration display: table-cell; à un élément dont le parent n'est pas une rangée (<tr> ou table-row), alors ce parent adopte naturellement un rendu de rangée.
  • Lorsque nous appliquons la déclaration display: table-cell; à un élément dont la parent n'est ni une rangée, ni un tableau (<table> ou display: table;), alors ce parent adopte naturellement à la fois un rendu de rangée et de tableau conteneur.
Écritures simplfiées

Cela signifie que, dans le cas d'un élément affiché sous forme de cellule de tableau (display: table-cell), il ne vous est pas nécessaire de l'entourer d'éléments de structure additionnels tels que les rangées de cellules (display: table-row;) : celles-ci sont implicitement établies. Il en est de même pour le conteneur global (display: table;).

Paragraphes sous forme de cellules d'un tableau sans display: table; 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Tableau en CSS</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         article { 
            display: table; width: 100%;
            border-spacing: 5px;  background-color: green;  
         }
         p  { 
            display: table-cell; width: 500px;
            text-align: justify; color:  bisque; background-color: black; padding: 3px; 
            border: thin solid white; box-shadow: 1px 1px 3px black;
         }
      </style>
   </head>

   <body>
      <article>
         <p>Un premier paragraphe qui se place au début.</p>
         <p>Tous les paragraphes sont des cellules qui se répartissent équitablement dans l'article</p>
         <p>Toutes les cellules sont alignées verticalement à l'instar des cellules d'un tableau.</p>
      </article>
   </body>
</html>
Remplissage de l'espace restant

Abordons une autre particularité intrinsèque du modèle de rendu tabulaire : la fluidité de l'occupation de l'espace. Les éléments de type cellule (table-cell) ou rangée (table-row) se répartissent par défaut de façon à meubler toute la surface disponible en largeur pour les cellules et en hauteur pour les lignes.

Alignement vertical

Les cellules de tableau (<td>) sont réputées pour bénéficier d'un avantage indéniable du concepteur Web : pouvoir appliquer la propriété vertical-align et en tirer toutes les vertues en termes d'alignement vertical des contenus. Qu'à cela ne tienne ! vertical-align est parfaitement adéquate pour le modèle tabulaire CSS et peut être affectée à un élément en display: table-cell; pour en aligner le contenu. Nous pouvons ainsi, par exemple, intuitivement centrer verticalement n'importe quel élément en HTML.

Centrer le contenu verticalement dans les cellules de tableau 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Tableau en CSS</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         article { 
            display: table; width: 100%;
            border-collapse: collapse;
         }
         p  { 
            display: table-cell; width: 500px; vertical-align: middle;
            text-align: justify; color:  bisque; background-color: black; padding: 4px; border: thin solid white;
         }
      </style>
   </head>

   <body>
      <article>
         <p>Un premier paragraphe qui se place au début.</p>
         <p>Tous les paragraphes sont des cellules qui se répartissent équitablement dans l'article.</p>
         <p>Toutes les cellules sont alignées verticalement à l'instar des cellules d'un tableau.</p>
      </article>
   </body>
</html>

Propriétés spécifiques aux tableaux

Certaines propriétés CSS sont spécifiques aux éléments de tableaux. Il s'agit de table-layout, border-collapse, border-spacing, empty-cells et caption-side.

table-layout

Un double algorithme définit le rendu des structures tabulaires :
  • Le modèle automatique (table-layout: auto;) appliqué par défaut confère le pouvoir aux contenus des cellules. Ces derniers déterminent la largeur des colonnes : plus le contenu est dense, plus la colonne est large. La largeur width renseignées pour la table ou ses cellules ne seront qu'indicatives.
  • Le modèle fixe (table-layout: fixed;) se base sur la largeur réelle du tableau et de ses colonnes, et ne dépend pas du contenu.
Répartition des cellules de façon équitable dans le tableau 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Tableau en CSS</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         article { 
            display: table; table-layout: fixed;
            border-collapse: collapse; width: 100%;
         }
         p  { 
            display: table-cell; 
            text-align: justify; color:  bisque; background-color: black; padding: 5px; border: thin solid white;
         }
      </style>
   </head>

   <body>
      <article>
         <p>Un premier paragraphe qui se place au début.</p>
         <p>Tous les paragraphes sont des cellules qui se répartissent équitablement dans l'article.</p>
         <p>Toutes les cellules sont alignées verticalement à l'instar des cellules d'un tableau.</p>
      </article>
   </body>
</html>
Définir l'algorithme d'affichage en mode fixe possède plusieurs avantages :
  • Dès qu'un élément de colonne a une valeur width, alors cette valeur est retenue pour la largeur de toute la colonne. Les événtuelles colonnes restantes se partagent équitablement l'espace horizontal restant de la table.
  • Le navigateur peut commencer à afficher la table dès la réception de la première rangée. De manière générale, cet algorithme accélère les traitements et l'affichage par le navigateur.
  • Les contenus n'affectent pas les largeurs des colonnes. Toute cellule s'appuie sur la propriété overflow pour déterminer le rognage, ou non, du contenu qui déborderait.

border-collapse

Comme c'est le cas pour les tableaux HTML, la propriété border-collapse détermine si les bordures de la table et entre les cellules doivent être séparées (valeur separate) ou fusionnées (valeur collapse).

border-spacing

La propriété CSS border-spacing équivalente à l'attribut cellspacind devenu obsolète, spécifie la distance qui sépare les bordures de cellules adjacentes. Lorsque deux valeurs sont renseignées, la première désigne l'espacement horizontal et la deuxième le vertical. La valeur de cette propriété devient automatiquement nulle lorsque border-collapse a pour valeur collapse.

Espacement entre cellules 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Tableau en CSS</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         article { 
            display: table;  width: 100%;  table-layout: fixed;  border-spacing: 10px 20px; 
            background-color: green;  border-radius: 5px;  box-shadow: 0 0 5px black;
         }
         p  { 
            display: table-cell;  text-align: justify; color:  bisque; 
            background-color: black; padding: 3px; 
            border: thin solid white; box-shadow: 2px 2px 5px black;
         }
      </style>
   </head>

   <body>
      <article>
         <p>Un premier paragraphe qui se place au début.</p>
         <p>Tous les paragraphes sont des cellules qui se répartissent équitablement dans l'article.</p>
         <p>Toutes les cellules sont alignées verticalement à l'instar des cellules d'un tableau.</p>
      </article>
   </body>
</html>

caption-side

Cette propriété indique la position de la boîte de la légende en fonction de celle de la table. Les valeurs acceptées sont top par défaut et bottom, mais aussi left et right, même si ces dernières ne sont pas toujours bien implémentées.

empty-cells

La propriété empty-cells (à ne pas confondre avec le sélecteur CSS 3 :empty évoqué dans un autre chapitre) gère l'affichage des cellules vides : la valeur hide masque les bordures de la cellule. Lorsque cette propriété est appliquée au sein d'une table ne comportant qu'une seule rangée, les cellules vides disparaissent complètement et les autres cellules se réorganisent sans elles.

Conclusion

Nous pouvons conclure cette démonstration en affirmant que les avantages de cette technique sont multiples :
  • La séparation du fond HTML et de la forme CSS est respectée.
  • Il n'y a aucun élément qui sort du flux, comme c'est le cas avec l'utilisation de la propriété float. Il n'y a donc pas besoin d'utiliser la propriété clear sur le bloc suivant.
  • Les blocs <li> ont la même hauteur. Si l'un devient plus grand en hauteur (contenu texte plus important par exemple), les autres blocs frères s'agrandirons également.
  • L'utilisation des bordures (border) ou de marges internes (padding) ne modifie pas la taille des blocs, comme c'est le cas normalement. La taille totale est calculée avec ces valeurs incluses, à l'instar de box-sizing: border-box;
  • Il devient possible de centrer verticalement le contenu du bloc avec vertical-align.
Attention toutefois, les marges externes (margin) ne sont pas applicables sur les éléments affichés en table-cell et en table-row, comme c'est le cas avec les balises <td> et <tr>. De plus, les marges internes (padding) ne sont pas applicables sur des éléments en table-row. C'est pourquoi, l'utilisation des propriétés CSS2.1 spécifiques aux tableaux est obligatoire, comme la propriété border-spacing par exemple.

Nous avons étudié trois valeurs de cette propriété display concernant l'apparence tabulaire, mais d'autres peuvent se révéler intéressantes :

  • La valeur inline-table par exemple, permet de créer un tableau qui suit le modèle de boîte inline, alors que la valeur table suit le modèle de boîte block.
  • Les valeurs table-header-group et table-footer-group sont plus qu'intéressantes. Elles permettent de créer un ensemble de lignes de tableau (tel que table-row-group) qui seront positionnées soit en avant (header), soit après (footer) toutes les autres lignes du tableau. Il est donc possible d'inverser l'ordre d'affichage des éléments par rapport au code source, et cela peut être très utile dans certains cas de figure.
  • Terminons par la valeur table-caption qui permet d'afficher un élément HTML comme étant la légende du tableau. La propriété caption-side avec les valeurs top ou bottom nous aide à positionner cette légende avant ou après le tableau.

Le modèle de boîte flexible

Sous l'appellation Flexible box model module, CSS 3 signe son projet le plus avancé. Le modèle de boîte flexible apparaît comme une extension du modèle de boîte classique défini en CSS 2.1, bénéficiant bien entendu de nouveaux potentiels, parmi lesquels la possibilité d'alterner entre une distribution horizontale ou verticale des éléments, de disposer de largeurs fluides dans les deux sens et, surtout, de pouvoir définir l'ordre exact d'affichage des boîtes à l'écran.

display: box;

Le modèle de boîte étendu est initié par la valeur box associée à une propriété que nous connaissons bien à présent : display. Il vous suffit d'affecter la déclaration display: box; à un bloc pour lui faire adopter le modèle de boîte flexible et que ses éléments se disposent automatiquement les uns à côté des autres.

En théorie, oui. Dans la pratique, ce module n'étant pas finalisé, il conviendra d'utiliser les préfixes -moz- pour Mozilla, -webkit- pour Chrome et Safari, -o- pour Opera, et enfin -ie- pour Iternet Exploreur.

Les boîtes flexibles 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Boîtes flexibles</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         article { 
            display: -webkit-box; background-color: green;
            border-radius: 5px;  box-shadow: 0 0 5px black; 
         }
         p  { 
            -webkit-box-flex: 1; min-width: 200px; margin: 7px;  padding: 4px;         
            text-align: justify; color:  bisque;  background-color: black;   
            border: thin solid white; box-shadow: 2px 2px 5px black;
         }
      </style>
   </head>

   <body>
      <article>
         <p>Un premier paragraphe qui se place au début.</p>
         <p>Tous les paragraphes sont des boîtes qui se répartissent équitablement dans l'article.</p>
         <p>Toutes les boîtes sont alignées verticalement à l'instar des cellules d'un tableau.</p>
      </article>
   </body>
</html>
Empilement vertical
La propriété box-orient permet de choisir le sens d'alignement des boîtes, dans le sens horizontal ou le sens vertical.
Ordre d'empilement
Comptant parmi les fonctionnalités les plus attractives de ce module, la propriété box-direction permet de trier les boîtes selon l'ordre d'apparition dans le flux ou selon l'ordre inverse, par exemple box-direction: reverse;
Ordre de distribution
Il est même possible de définir explicitement l'ordre de distribution des boîtes grâce à la propriété box-ordinal-group. La distribution se fait du plus petit le groupe 1 au plus grand le groupe 2, puis 3, etc.. La valeur par défaut de cette propriété est 1. Par exemple : box-ordinal-group: 2;
Flexibilité : remplir l'espace
Comme son nom l'indique, le modèle de boîte flexible apporte en toute simplicité une dimension de fluidité aux éléments. Une boîte devient flexible à partir du moment où elle se voit attribuer la propriété box-flex avec une valeur supérieure ou égale à 1. Elle s'étend alors sur toute la surface disponible restante au sein de son parent.
Centrer le contenu
Pour centrer les boîtes à l'intérieur de leur conteneur, vous disposez de la propriété box-pack qui gère l'alignement horizontal, tandis que box-align s'occupe de la verticalité. Une valeur commune de center suffit à positionner les boîtes au coeur de leur parent.
Les listes flexibles 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Boîtes flexibles</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         ul { 
            display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center;
            width: 98%; height: 120px;  padding: 0; margin: 0;
            list-style: none; background-color: brown; border-radius: 3px; box-shadow: 3px 3px 10px black;
         }
         li  { 
            padding: 4px;  margin: 7px; width: 130px; height: 70px;  text-align: center; 
            color:  brown;  background-color: burlywood;  border-radius: 4px; box-shadow: 2px 2px 5px black;
         }
      </style>
   </head>

   <body>
      <ul>
         <li>Boîte 1</li>
         <li>Boîte 2</li>
         <li>Boîte 3</li>
      </ul>
   </body>
</html>

La gestion des couleurs

En abordant la question de la couleur, nous entrons de plein-pied dans la notion de webdesign. Le mot design se rapporte au travail sur l'esthétisme d'un objet produit par l'industrie. Il a désormais conquis tous les secteurs d'activité et de production, notamment l'architecture, l'industrie, le graphisme publicité, Web, etc. Il s'agit de rendre beau un objet conçu avant tout pour être utile. Le webdesign, ou design de sites web, s'inscrit dans cette lignée, et désigne avant tout l'alliance entre le graphisme et le côté fonctionel d'un site... deux notions pas forcément antagoniste. Un site web non ergonomique ne subsistera pas longtemps. Il faut toujours s'efforcer à doser subtilement les côtés fonctionnels et esthétiques.

Rubriques

La symbolique des couleurs

Les signes et influences attribués aux couleurs par les cultures et les sociétés humaines sont variés mais pas toujours contradictoires. Ainsi le noir, symbole de deuil et de tristesse en Occident, n'a pas la même fonction dans les pays où ce rôle est dévolu à d'autres couleurs notamment au blanc. Malgré tout, nous pouvons brosser un tableau général de la symbolique des couleurs.

Rôle des couleurs choisies
Couleur Symbolique Exemple d'utilisation
Blanc Le vide, l'espace, la pureté, la propreté et la sobriété. C'est une couleur reposante et non agressive. Intervient rarement explicitement ; souvent relégué au second plan une page web aérée se devant de présenter un arrière-plan allégé. Il permet aussi de faire ressortir les éléments important de la page.
Noir Symbole de deuil ou de tristesse, le noir est également associé à l'art, à l'apparat et au luxe. Un fond noir donne une impression d'élégance: nous retrouvons ainsi cette technique sur les sites web d'art, les boutiques de luxe ou les casinos. Le noir se marie très bien avec les autres teintes.
Gris Malgré sa connotation de mélange et de neutralité, le gris est également une couleur passe-partout. Comme le bleu, cette couleur est souvent associée au site technologiques ou informatiques : les ordinateurs et le matériel informatique sont généralement gris.
Vert Représente la nature et tout ce qui s'y rapporte. C'est aussi une couleur qui confère une impression de fraîcheur saine : nous la retrouvons ainsi dans les sirops et chewin-gums rafraîchissants. Sites en rapport avec la nature, la chasse ou les loisirs.
Bleu Couleur froide par excellence, le bleu inspire la rigueur et la science. Il représente également de grans espaces comme le ciel ou la mer, conférant ainsi une impression de tranquilité. Sites web technologiques ou scientifiques.
Jaune Couleur stimulante évoquant le dynamisme, le jaune attire l'oeil... mais trop de jaune agresse. Sites associés à des thèmes (sport, loisir, publicité, médias).
Rouge Le rouge (avec l'orange) est la couleur chaude par excellence. Couleur associée à plusieurs éléments très forts, tels que le feu, l'amour, le sang. Sa force rehausse la pâleur générale et dirige le regard du visiteur. Un site à dominante rouge dégage chaleur et passion.
Chaque couleur joue un rôle important pour le design :
  • Une couleur chaude est généralement associée au domaine du sentiment et de la perception ; elle attire l'oeil.
  • Une couleur froide symbolise quant à elle le pragmatisme, l'esprit et la science ; elle ouvre l'esprit et le regard et agrandit l'espace.
  • La couleur chaude par excellence est le rouge et ses dérivés, notamment l'orange. Le bleu forme la couleur froide de base. Evitez de mêler aléatoirement des nuances chaudes et froides ; efforcez-vous plutôt de conserver une composition cohérente sur ce point.

L'espace de couleurs RGB

RGB (RVB en français). Datant des années 1930, ce système repose sur les caractéristiques techniques des tubes cathodiques. C'est donc une notation convenant particulièrement bien aux couleurs en informatique. L'espace RGB définit la proportion de chacune de ces trois couleurs fondamentales en la codant sur un octet, c'est-à-dire une valeur comprise entre 0 et 255. Chaque couleur est ainsi transcrite sur trois octets, ce qui représente près de 17 millions de possibilités 224. C'est amplement suffisant, l'oeil humain ne discerne qu'un à deux millions de couleurs différentes.

Écritures possibles pour la gestion des couleurs
  • La syntaxe CSS pour la notation des couleurs en RGB est la suivante : rgb(0, 0, 255) Ceci correspond au bleu . Effectivement, nous avons zéro sur le rouge, zéro sur le vert et la valeur maximale sur le bleu.
  • Nous pouvons également inscrire les valeurs en poucentages : rgb(0, 0, 100%) Autre représentation du bleu.
Ces couleurs fondamentales se composent à l'écran par synthèse additive, moins intuitive que la synthède soustractive, familière aux peintres. C'est pourquoi il est utile de se familiariser avec les codes des couleurs les plus classiques voir le tableau plus loin.
Choisissez finement votre couleur

En modifiant la valeur de ces trois composantes, nous pouvons représenter toute teinte imaginable. Nous définirons ainsi plusieurs variantes de bleu en n'agissant que sur le troisième nombre. Cette notation est dite décimale car elle recourt au système de numération familier, à dix chiffres.

La couleur bleue 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Les couleurs</title>
      <style>
         body { background-color: rgb(200, 200, 255); }
         p { 
            background-color: rgb(128, 128, 255);  color: rgb(0, 0, 180);
            font-size: 2.2em;  font-weight: bold; text-shadow: 1px 1px 0 lightgray;
            border-radius: 3px; box-shadow: 2px 2px 3px; padding: 7px; margin: 8px;  
         }
      </style>
   </head>

   <body>
      <p>Un paragraphe pour tester les différentes teintes de bleu.</p>
   </body>
</html>

La transparence des couleurs

Les notations RGBa et HSLa indroduisent la notion de transparence pour toutes les propriétés relatives aux couleurs : arrière-plans, bordures, couleurs des textes, etc. Nous venons de découvrir la notation habituelle RGB, CSS 3 ajoute une quatrième composante a canal alpha qui correspond au degré de transparence et dont la valeur est fixée entre 0 et 1.

Rajouter de la transparence à une couleur

Le principal avantage de cette notation est qu'il ne s'agit pas d'une propriété, mais d'une valeur. Ses effets ne s'appliquent donc pas à l'élément entier et à ses descendants, mais uniquement à l'une de ses propriétés : la couleur de texte, la couleur de bordure ou encore la couleur de l'arrière-plan. La notation pour intégrer la transparence est la suivante rgba() avec ses quatre paramètres.

La couleur bleue 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Les couleurs</title>
      <style>
         body { background-color: rgba(0, 0, 180, 0.2); }
         p { 
            background-color: rgba(0, 0, 180, 0.3);  color: rgb(0, 0, 180);
            font-size: 2.2em;  font-weight: bold; text-shadow: 1px 1px 0 lightgray;
            border-radius: 3px; box-shadow: 2px 2px 3px; padding: 7px; margin: 8px;  
         }
      </style>
   </head>

   <body>
      <p>Un paragraphe pour tester les différentes teintes de bleu.</p>
   </body>
</html>
Teinte, saturation et luminosité

La notation HSLa traduit les couleurs via des canaux de teinte, de saturation, de luminosité et de transparence : la notation est la suivante hsla() avec ses quatre paramètres.

  • H Hue : nuance de couleur entre 0 et 360 0 correspond au rouge, 120 au vert et 240 au bleu ;
  • S Saturation : valeur en pourcentage : 0 est complètement terne, 100% est au maximum de la vibrance couleur vive ;
  • L Luminosity : valeur de 0 sombre à 100% clair;
  • a alpha : degré de transparence, valeur de 0 à 1.

p { color: hsla(120, 100%, 50%, 0.5); } couleur du texte vert semi-transparent pour tous les paragraphes

L'opacité

Une autre façon de gérer la transparence est de passer par la propriété opacity, mais comme il s'agit d'une propriété, elle agit sur l'ensemble de l'élément concerné. Les valeurs acceptées par cette propriété sont également situées entre 0 et 1. La valeur 0 rend l'élément et ses descendants entièrement invisible, tandis qu'avec la valeur par défaut de 1, il est totalement opaque. Il est possible d'appliquer cette propriété à tous les éléments HTML, qu'ils soient de type bloc ou non.

Travailer avec la transparence

En reprenant le premier exemple, et en plaçant une opacité de 50% sur l'ensemble du paragraphe, voici ce que nous obtenons :

La couleur bleue 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Les couleurs</title>
      <style>
         body { background-color: rgb(200, 200, 255); }
         p { 
            opacity: 0.5;
            background-color: rgb(128, 128, 255);  color: rgb(0, 0, 180);
            font-size: 2.2em;  font-weight: bold; text-shadow: 1px 1px 0 lightgray;
            border-radius: 3px; box-shadow: 2px 2px 3px; padding: 7px; margin: 8px;  
         }
      </style>
   </head>

   <body>
      <p>Un paragraphe pour tester les différentes teintes de bleu.</p>
   </body>
</html>
Un inconvénient fréquemment rencontré est que opacity s'applique à l'élément dans son intégralité, y compris tous ses descendants, ce qui n'est pas sans poser des problèmes si nous désirons que l'un des enfants ne bénéficie pas de ce lourd héritage : en pratique, et sans jouer avec des positionnements hors flux complexes, il est impossible d'annuler l'opacité de son ancêtre.

La notation hexadécimale

C'est une manière d'écrire les nombres, plus adaptée à l'informatique et notamment à la manipulation d'octets. On y autorise seize chiffres (les chiffres habituels complétés par les six premières lettres de l'alphabet - généralement écrites en minuscules). Deux caractères peuvent alors exprimer 16 fois 16 soit 256 valeurs différentes, de 00 à FF 255.

Le symbole # introduit une valeur RGB codée en hexadécimal. Les trois composantes sont alors rassemblées sur six caractères : #0000FF bleu. Ces trois paires successives correspondent respectivement aux codages hexadécimaux des composantes rouge, vert et bleue de la couleur considérée. L'exemple proposé prévoit ainsi une quantité nulle de rouge et de vert et la quantité maximale de bleu.

La notation hexadécimale courte

Quand le codage hexadécimal d'une couleur se compose de trois paires jumelles comme #FFFFFF, #CC55AA, #FFAA99, la syntaxe CSS permet de la condenser. Nous ne reportons pour cela qu'un seul caractère par couple, pour obtenir une notation à trois chiffres. Ainsi,#000000, #FFFFFF, #CC55AA et #FFAA99 deviennent respectivement #000, #FFF, #C5A et #FA9.

Cette technique ne pourra toutefois condenser des notations telles que #FFAA96, #3AAAAA, #00000F, car leurs paires de caractères consécutifs ne sont pas composées des mêmes chiffres hexadécimaux.

Les mots-clés de couleurs

L'être humain préfère souvent les mots aux nombres. CSS possède certains mots-clés anglais représentant les couleurs les plus utilisées. Aux principales couleurs correspond un mot-clé plus intuitif que son code équivalent, voici ci-dessous le tableau des correspondances.

Couleurs prédéfinies
Couleur Mot-clé RGB Hexadécimal Hexadécimal court
Noir black rgb(0 ,0, 0) #000000 #000
Blanc white grb(255, 255, 255) #FFFFFF #FFF
Gris gray rgb(128, 128, 128) #808080
Argent silver rgb(192, 192, 192) #C0C0C0
Bleu blue rgb(0, 0, 255) #0000FF #00F
Bleu marine navy rgb(0, 0, 128) #000080
Cyan cyan rgb(0, 255, 255) #00FFFF #0FF
Cyan foncé teal rgb(0, 128, 128) #008080
Vert green rgb(0, 128, 0) #008000
Vert olive olive rgb(128, 128, 0) #808000
Vert clair lime rgb(0, 255, 0) #00FF00 #0F0
Lilas, Magenta fushia rgb(255, 0, 255) #FF00FF #F0F
Violet purple rgb(128, 0, 128) #800080
Indigo indigo rgb(75, 0, 130) #4B0082
Rouge red rgb(255, 0, 0) #FF0000 #F00
Marron maroon rgb(128, 0, 0) #800000
Jaune yellow rgb(255, 255, 0) #FFFF00 #FF0

Arrières-plans, bordures, ombres et images de fond

Dans un document web graphique, la prise en compte de l'environnement des éléments bordures, arrière-plan et images de fond constitue la dernière étape majeure avant de passer aux positionnements des objets en CSS à proprement parler. Historiquement, la majeure partie des effets graphiques pour le web était réalisée à l'aide d'images. Par exemple, pour la création d'ombres autour d'un bloc ou pour la création de coins arrondis, plusieurs images étaient créées puis appliquées en CSS à l'aide de la règle background-image. CSS 3 tente de répondre aux désirs des graphistes en proposant des règles spécifiques qui permettent de s'affranchir de l'utilisation de logiciels pour certains effets simples. C'est le cas de la transparence, des ombres, des coins arrondis, des dégrédés. Détaillons ensemble ces fonctionnalités.

Rubriques

Mettre en forme les bordures

CSS permet d'entourer très simplement les divers éléments de type bloc d'une page web par des bordures aux caractéristiques libres style, épaisseur, couleurs, arrondissement des angles. Cette possibilté est également offerte aux éléments en ligne qui possèdent des dimensions par défaut hauteur et largeur. C'est le cas de la balise <img>, par exemple.

Les différents styles de bordures

La propriété border-style met en place le type des bordures d'un élément :

  • dashed : tirets ;
  • dotted : pointillés ;
  • double : deux traits pleins d'épaisseur égale et séparés par un espace vide de même épaisseur ;
  • groove : effet 3D gravé dans la page, opposé de ridge ;
  • hidden : pas de bordure mais influe sur la bordure mitoyenne ;
  • inset : effet entrant, élément incrusté dans la page, opposé de outset ;
  • none : pas de bordure ; équivaut à border-width: 0;
  • outset : effet sortant, élément extrudé de la page, opposé de inset ;
  • ridge : effet 3D sortant de la page, opposé de groove ;
  • solid : trait plein.
Les styles de bordure 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Les bordures</title>
      <style>
         body { background: linear-gradient(to right, yellow, red); }
         em { 
            display: inline-block;  width: 120px;  padding: 5px; margin: 3px; 
            text-align: center; font-size: 1.2em; font-weight: bold;
         }
      </style>
   </head>

   <body>
      <p>
         <em style="border-style: solid">solid</em>
         <em style="border-style: dotted">dotted</em>
         <em style="border-style: dashed">dashed</em>
         <em style="border-style: double">double</em>
         <em style="border-style: ridge">ridge</em>
         <em style="border-style: groove">groove</em>
         <em style="border-style: inset">inset</em>
         <em style="border-style: outset">outset</em>
      </p>
   </body>
</html>
Placer des bordures sur quelques côtés

Chacun des quatre côtés d'un élément peut aussi être représenté différemment. Pour cela, nous précisons à la suite plusieurs valeurs de border-style, dont l'interprétation dépendra de leur nombre :

  • Deux valeurs seront affectées respectivement aux côtés horizontaux et verticaux du cadre. Par exemple : border-style: solid dotted;
  • Trois valeurs concerneront tout à tour le haut, les côtés verticaux et le bas. Par exemple : border-style: solid double dotted;
  • Quatre valeurs décrirons les styles des quatre côté en tournant dans le sens horaire, haut, droit, bas et gauche. Par exemple : border-style: solid double dotted ridge;
Enfin, il existe une autre possibilité en spécifiant directement le style de bordure sur le côté concerné, avec les propriétés : border-top-style haut, border-right-style droit, border-bottom-style bas et border-left-style gauche.
L'épaisseur des bordures

La propriété border-width définit l'épaisseur des bordures, et n'a de sens qu'en accompagnement d'un style (border-style) ou d'une couleur de bordure (border-color). Nous pouvons précisez les épaisseurs de plusieurs manières :

  • thin : bordure fine ;
  • medium : bordure moyenne ;
  • thick : bordure épaisse ;
  • Avec une mention numérique de longueur reprenant la syntaxe habituelle.
De nouveau, fournir plusieurs valeurs permettra de représenter différemment les quatre côtés de l'élément. Comme pour le style, l'affectation des valeurs dépend de la taille de leur liste.
  • Deux valeurs portent sur les côtés horizontaux puis verticaux. Par exemple : border-width: 6px 2px;
  • Trois valeurs représentent le haut, les côtés latéraux et le bas. Par exemple : border-width: thin medium 3em;
  • Quatre valeurs définissent les côtés en partant du haut et en tournant dans le sens horaire. Par exemple : border-width: thin medium 3em 1em;
De la même façon, nous pouvons encore définir directement l'épaisseur de chaque côté avec les propriétés border-top-width, border-right-width, border-bottom-width et border-left-width.
La couleur des bordures

Elle est mise en place par la propriété border-color, qui ne s'applique qu'en complément d'un style (border-style) ou d'une épaisseur de bordure (border-width). Sans cela, la bordure est inexistante. Rappelons que nous pouvons spécifier une couleur de plusieurs manières :

  • Par son nom en anglais. Par exemple : border-color: black ;
  • Par rgb(x, y, z) : définition de la couleur en mode RGB avec des entiers de 0 à 255 ou des pourcentages. Par exemple : border-color: rgb(50, 255, 80);
  • Par rgba(x, y, z, a) : définition de la couleur en mode RGBa qui permet d'intégrer la transparence dont la valeur est fixée entre 0 et 1. Par exemple : border-color: rgba(50, 255, 80, 0.5);
  • Par son codage RGB exprimé en hexadécimal, court ou long. Par exemple : border-color: #fc0 ;
Encore une fois, l'ordre d'attribution des valeurs de couleurs se fait dans le sens horaire en partant du haut, en les complétant éventuellement par symétrie.
  • Deux valeurs définissent ainsi une couleur par orientation horizontale ou verticale de côté. Par exemple : border-color: #fc0 #ccc ;
  • Trois valeurs permettent de plus de distinguer le haut du bas. Par exemple : border-color: blue green red ;
  • Quatre valeurs individualisent chaque côté. Par exemple : border-color: blue green red yellow ;
De nouveau, les propriétés border-top-color, border-right-color, border-bottom-color et border-left-color s'appliquent directement à un côté précis.
Notation raccourcie

La propriété générale border rassemble tous ces aspects en une seule instruction. Par exemple, pour obtenir une bordure en pointillé gris large de 3 pixels, il suffit ainsi d'écrire : border: 3px dotted gray;

Bordure personnalisée 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Les bordures</title>
      <style>
         body { background: linear-gradient(to right, yellow, red); }
         p { 
            border: thin solid green;  border-left-width: 0.8em; border-radius: 0.4em;
            background-color: rgb(255, 255, 64); padding: 7px; margin: 5px;
            font-size: 1.2em; font-weight: bold; box-shadow: 2px 2px 10px;
         }
      </style>
   </head>

   <body>
      <p>Voici un exemple de bordure personnalisée.</p>
   </body>
</html>
Bordures arrondies

A l'instar des ombres, la création de coins arrondis est une pratique courante qui permet d'adoucir un élément de design. Sur une page web, les coins arrondis permettent d'alléger le rendu visuel des blocs, en lieu et place des coins carrés nets. La propriété border-radius nous permet d'ajouter des coins arrondis sur une boîte, en spécifiant une taille du rayon pour ses angles.

Comme pour l'utilisation des propriétés de marges (margin et padding), border-radius accepte une, deux, trois ou quatre valeurs séparées par des espaces :

  • Une valeur : les quatre arrondis sont identiques ;
  • Deux valeurs : les deux diagonales
    • la première définit l'angle en haut à gauche et l'angle en bas à droite ;
    • la deuxième définit l'angle en haut à droite et l'angle en bas à gauche.
  • Trois valeurs :
    • la première définit l'angle en haut à gauche ;
    • la deuxième définit l'angle en haut à droite et l'angle en bas à gauche ;
    • la troisième définit l'angle en bas à droite ;
  • Quatre valeurs :
    • les angles sont définis chacun leur tour, à partir de l'angle en haut à gauche puis en tournant dans le sens des aiguilles d'une montre. Ainsi, la règle suivante va créer un bloc arrondi de 15px en haut à gauche, 0px en haut à droite, 25px en bas à droite et 0px en bas à gauche : border-radius: 15px 0 25px 0;
Bordure personnalisée 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Les bordures</title>
      <style>
         body { background: linear-gradient(to right, yellow, red); }
         p { 
            border: thin solid green;  border-left-width: 1em; border-radius: 1.5em 0;
            background-color: rgb(255, 255, 64); padding: 10px; margin: 5px;
            font-size: 1.2em; font-weight: bold; box-shadow: 3px 3px 15px;
         }
      </style>
   </head>

   <body>
      <p>Voici un autre exemple de bordure personnalisée.</p>
   </body>
</html>
Il existe d'autres propriétés qui permettent d'attribuer une valeur particulière à chaque angle, et cette fois-ci la syntaxe est beaucoup plus longue, avec respectivement : border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius.

La propriété border-radius prévoit également de spécifier deux valeurs différentes pour chaque angle. Cela revient à définir une courbe, qui ne suit plus un cercle, mais une ellipse. Les deux valeurs, séparées par un trait de fraction /, représentent alors l'arrondi horizontal, pour la première, et l'arrondi vertical, pour la seconde.

Par exemples

Voici ce que nous pouvons obtenir en reprenant l'exemple précédent et en spécifiant les valeurs suivantes : border-radius: 2em / 0.5em ;

Il est bien entendu possible d'affecter des valeurs elliptiques différentes pour chaque angle de l'élément. Avec les réglages suivants, voici ce que nous obtenons comme résultats : border-radius: 2em 5px 5px 2em / 0.5em 5px 5px 0.5em ;

Les ombres portées

Les ombres font parties des nouveautés récentes proposées par CSS 3. La propriété box-shadow a été incluse dans le module border de CSS 3 et permet d'ajouter une ombre portée sur n'importe quel élément HTML. Parmi les différentes valeurs utilisables, il est possible d'indiquer les décalages vertical et horizontal, ainsi que la force du dégradé, sans oublié la couleur bien entendu. La propriété s'applique sur la boîte de l'élément, et non sur sa bordure. L'ombrage n'affecte pas la taille de sa boîte.

Ombre autour d'une boîte

La propriété box-shadow ajoute une ou plusieurs ombres sur une boîte. Une ombre est créée à partir de six paramètres (quatre longueurs, une couleur et un mot clé) où les valeurs correspondent à :

  • Décalage horizontal de l'ombre obligatoire : Une valeur positive décale l'ombre vers la droite, alors qu'une valeur négative la décale vers la gauche ;
  • Décalage vertical de l'ombre obligatoire : Une valeur positive décale l'ombre vers le bas, alors qu'une valeur négative la décale vers le haut ;
  • Valeur de l'adoucissement du dégradé Valeur de flou - optionnel : Une valeur de 0 donne une ombre nette, une valeur positive provoque un flou glaussien, les valeurs négatives sont interdites ;
  • Valeur d'étendue (optionnel) : Une valeur positive augmente la taille de l'ombre, par rapport à celle de la boîte, alors qu'une valeur négative diminue la taille de l'ombre ;
  • Couleur optionnel : Toutes les définitions des couleurs sont autorisées mot-clé, hexadécimal, fonctions avec ou sans alpha, la couleur peut aussi être écrite avant les quatre autres paramètres.
  • Mot-clé inset optionnel : Crée une ombre interne, c'est-à-dire à l'intérieur de la boîte.
Les valeurs de décalage de l'ombre sont obligatoires, tandis que les valeurs de flou, d'étendue, la couleur et le mot-clé inset sont optionnels. Si ces valeurs nes sont pas précisées, la valeur de flou et celle d'étendue sont de 0, la couleur est définie par le navigateur et l'ombre n'est pas interne. Nous pouvons donc nous passer de définir la couleur de l'ombre. Dans ce cas là, c'est généralement la couleur du texte qui sert de référence. Dans ces conditions, nous pouvons également nous passer de la valeur de l'adoucissement si nous désirons une ombre franche et nette.
Ombre portée nette 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Les ombres portées</title>
      <style>
         body { background-color: rgb(255, 255, 180); }
         p {             
            border: thin solid green;  border-left-width: 1em;
            border-radius: 2em 5px 5px 2em / 0.5em 5px 5px 0.5em ; 
            color: rgb(0, 80, 0); background-color: rgb(255, 255, 64); padding: 10px; margin: 20px;
            font-size: 1.2em; font-weight: bold; box-shadow: 10px 10px;
         }
      </style>
   </head>

   <body>
      <p>Quelques exemples sur les façons de placer une ombre portée sur un élément.</p>
   </body>
</html>
Dans notre exemple, la première valeur indique le décalage horizontal vers la droite de 10px, la deuxième correspond au décalage vertical vers le bas également de 10px. Vu que nous ne spécifions que ces deux valeurs, l'ombre proposée est très nette, sans adoucissement du coup pas très esthétique et la couleur de l'ombre est verte foncée - rgb(0, 80, 0) - comme celle du texte.
Adoucissement

Lorsque l'adoucissement est nul, la couleur de l'ombre est homogène sur toute sa surface. Avec une valeur sur l'adoucissement, il est possible de proposer un dégradé de l'ombre pour que cette dernière passe d'une valeur très opaques vers le bord de la boîte pour finir avec une couleur beaucoup plus transparente vers l'extérieur.

L'adoucissement peut être faible inférieur au décalage, normal égal au décalage ou élevé supérieur au décalage. Dans ce dernier cas, plus la valeur est élevée, plus nous obtenons une ombre transparente de plus en plus grande, qui entoure la totalité de la boîte, même si nous avons prévu un décalage vers le bas et à droite, par exemple.
Adoucissement faible

À l'aide des valeurs proposées ci-dessous, l'intérieur de l'ombre reste opaque sur 5px, et ensuite plus nous allons vers l'extérieur et plus l'ombre devient transparente sur les 5px prévus ce qui fait l'apparence de l'adoucissement. L'aspect de cette ombre est déjà plus agréable que l'ombre sans adoucissement :

box-shadow: 10px 10px 5px;

Adoucissement normal

Cette fois-ci l'adoucissement progresse naturellement du bord de la boîte jusqu'à l'extrémité de l'ombre. Avec ces réglages, l'ombre paraît plus naturelle

box-shadow: 10px 10px 10px;

Adoucissement élevé

Avec ce dernier cas, nous proposons une largeur de l'ombre qui est bien plus grande que le décalage avec un adoucissement extrêmement progressif. Du coup, vu sa largeur, l'ombre ne se situe pas uniquement vers le bas et à droite, mais déborde également vers le haut et la gauche :

box-shadow: 10px 10px 50px;

Choisir la couleur de l'ombre

Il suffit de préciser la couleur sur la quatrième paramètre de la propriété box-shadow. Il est possible, là aussi, de ne pas spécifier le paramètre de l'adoucissement, mais franchement ce n'est vraiment pas très esthétique.

box-shadow: 3px 3px 12px black;

Choisir la largeur de l'ombre

Il est également possible de définir une valeur optionnelle de largeur de l'ombrage, qui se situera directement à la suite de la valeur d'adoucissement. Toutefois, nous pouvons optenir la même apparence sans tenir compte de ce paramètre optionnel.

box-shadow: 5px 5px 30px 5px black;

Ombre interne

Enfin, une dernière valeur peut être renseignée, correspondant au type de l'ombrage : à l'extérieur du bloc outset, par défaut, ou à l'intérieur inset.

box-shadow: 3px 3px 12px black inset;

Plusieurs ombres

Il est également possible d'ajouter plusieurs ombres simultanément, en les séparant par une virgule. Les ombres s'appliquent alors de haut en bas, sans jamais superposer la boîte.

box-shadow: 2px 2px 15px black inset, 2px 2px 15px black;

Border-radius : 50%

Si une valeur en pourcentage est appliquée pour border-radius, cette valeur se réfère à la largeur et à la hauteur de la boîte elle-même contrairement aux règles CSS habituelles où la valeur en pourcentage se réfère souvent à la taille de son parent. Les marges internes padding et les bordures sont incluses dans cette taille. C'est pourquoi le fait de spécifier border-radius: 50%; un élément lui ajoute des coins arrondis de sa demi-taille, et donc a pour effet de créer une ellipse ou un rond si la boîte est carrée.

Normalement, l'ombre ajoutée ne modifie pas la taille de l'élément. Elle est dessinée à l'extérieur de la boîte. De plus, les ombres sont découpées au niveau des bordures, ce qui signifie qu'une boîte transparente ne laisse jamais apparaître l'ombre. Celle-ci paraît rognée au niveau de la boîte. Cela permet de pouvoir utiliser une couleur d'arrière-plan semi-transparente, sans voir l'ombre au travers.

Appliquer une image de fond (arrière-plan)

L'utilisation des images d'arrière-plan en CSS est une fonctionnalité primordiale. Toutes les images concernant le design ne doivent pas être présentes sous forme de balise <img> dans le code HTML. Ces images n'apportent effectivement pas d'indications essentielles à une bonne compréhention du contenu. Elle n'ajoutent pas de signification à la page, elles se contentent de rendre joli.

CSS3 apporte de nombreuses nouveautés concernant la gestion de ces images d'arrière-plan. Il est par exemple possible de choisir l'origine du positionnement d'une image appliquée en arrière-plan, de rogner le rendu de celle-ci, ou même de jouer sur sa taille. Mais la principale innovation est sans doute la gestion de plusieurs arrière-plans pour un même élément HTML.

Pour appliquer nos images en CSS, nous disposons de plusieurs règles :
  • background-image ou background pour les blocs ;
  • list-style-image ou list-style pour les éléments de liste à puces ;
  • border-image pour les images de bordures ;
  • content pour le contenu généré (cas plus rare).
Appliquer une simple image de fond à un élément

La propriété background-image associe une image de fond à l'élément sur lequel elle porte. Pour mettre en place une image d'arrière-plan valable pour tout le document, nous la placerons sous la balise <body>. Par défaut, cette image sera répétée en damier ou papier peint à partir du coin supérieur gauche. Nous pouvons toutefois modifier ce comportement en jouant sur les attributs CSS de la propriété background.

A nouveau, l'absence d'un mécanisme d'héritage a peu d'impact : le comportement par défaut étant l'absence de tout fond, les éléments imbriqués apparaîtrons comme ceux de leur parents. Pour cette propriété background-image deux valeurs sont possibles : none et url(chemin-vers-l'image). 
p { background-image: url(dossier/fond.jpg);  }
p { background-image: url(http://www.monsite.fr/dossier/fond.jpg);   }
// Soulignons l'absence inhabituelle d'apostrophes simples ou doubles autour des noms des images.
Image de fond sur un paragraphe 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Les images de fond</title>
      <style>
         body { background-color: rgb(255, 255, 200); }
         p {             
            background-image: url(attention.gif); 
            border-radius: 5px ; border: 3px outset;  font-size: 1.2em; font-weight: bold; color: rgb(64, 0, 0); padding: 10px; margin: 20px;
         }
      </style>
   </head>

   <body>
      <p>Exemples pour placer une ou plusieurs images en arrière-plan.</p>
   </body>
</html>
Positionner l'image à sa convenance

Avec background-position, nous pourrons placer dans un élément une image d'arrière-plan définie par background-image. Cet attribut s'utilise surtout en l'absence de répétition (background-repeat). CSS2.1 propose deux valeurs uniquement : La première valeur exprimée de manière absolue par une longueur ou relative par un pourcentage spécifie la position horizontale par rapport au bord gauche. L'éventuelle deuxième valeur démarquée de la première par un blanc portera sur la position verticale (par rapport au bord supérieur). En son absence, c'est la valeur par défaut center (ou 50%) qui prendra effet. Voici quelques règles :

  • les nombres négatifs sont autorisés ;
  • il est interdit de mêler valeurs relatives et absolues (dans le cas des positions) ;
  • les valeurs relatives sont des pourcentages calculés par rapport aux dimensions de l'image.

En somme, ces deux valeurs placent le coin supérieur gauche de l'image dans l'espace. Pour mémoire les correspondances sont :

  • 0% 0% = left top
  • 50% 50% = center center
  • 100% 100% = right bottom

CSS3 offre la possibilité d'écrire trois ou quatre valeurs, séparées par des espaces. Ces nouvelles valeurs doivent être précédées d'un des mots-clés ci-dessus qui définit le côté d'où s'applique le décalage. Ainsi dans l'exemple qui suit, nous décalons l'image d'arrière-plan de 3 pixels par rapport au bord droit et de 5 pixels par rapport au bas du paragraphe. Pour info, le décalage par défaut s'effectue par rapport au coin haut gauche.

Image de fond en bas à droite du paragraphe 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset=UTF-8>
      <title>Les images de fond</title>
      <style>
         body { background-color: rgb(255, 255, 200); }
         p {             
            background-image: url(attention.gif);  background-position: right 3px bottom 5px;   background-repeat: no-repeat;
            border-radius: 5px ; border: 3px outset;  font-weight: bold; color: rgb(64, 0, 0); padding: 2px 30px 2px 3px; margin: 8px;
         }
      </style>
   </head>

   <body>
      <p>Exemples pour placer une image de fond en bas à droite.</p>
   </body>
</html>
Répétition de l'image de fond

Par défaut, tout image d'arrière-plan se répète comme une mosaïque en remplissant l'espace de l'élément qui la contient. La propriété background-repeat permet de modifier ce comportement et reconnaît pour cela quatre valeurs :

  • repeat : c'est la valeur et le comportement par défaut, où l'image se répète sur les deux axes.
  • no-repeat : l'image n'apparaît qu'une seule fois, sans répétition.
  • repeat-x : l'image ne se répète que dans le sens horizontal (exemple : frise).
  • repeat-y : l'image ne se répète que dans le sens vertical (exemple : bordure verticale ou marge).

Avec CSS3, deux nouvelles méthodes de répétition sont ajoutées, à l'aide des mots-clés space et round. Ces deux méthodes permettent de répéter l'image d'arrière-plan afin de remplir précisément le fond d'une boîte. La différence réside dans la méthode de remplissage :

  • space : ajoute des espaces vides entre les répétitions ;
  • round : redimensionne la taille des images pour qu'il n'y ait aucune coupure sur les images qui se situent à droite et en bas.
Fixer l'image par rapport au contenu

Une image d'arrière-plan accompagne par défaut son élément si celui-ci est déplacé par une barre d'ascenceur scroll. Nous pouvons toutefois la fixer par rapport à la fenêtre du navigateur avec la propriété background-attachement. L'effet obtenu est intéressant car nous voyons alors glisser le texte par dessus le fond. Deux valeurs sont disponibles :

  • scroll : l'image de fond défile avec le texte par défaut. Si vous placez un très long texte sur l'élément concerné et si ce texte ne tient pas sur la fenêtre, une barre d'ascenceur apparaît alors sur la droite. Déplacer cet ascenceur provoque le comportement par défaut de l'image de fond : elle accompagne le mouvement jusqu'à sortir complètement du champ.
  • fixed : l'image de fond reste fixe. L'image n'est plus attachée au contenu, mais à la fenêtre. Elle reste en place, quelle que soit la position de l'ascenceur. C'est donc une propriété très intéressante pour placer certains éléments de mise en page devant rester figés quel que soit le contenu du document (par exemple, les logos).
Image de fond en bas à droite du paragraphe 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Les images de fond</title>
      <style>
         body { 
            background-color: bisque; 
            background-image: url(attention.gif); 
            background-position: right bottom;
            background-repeat: no-repeat;
            background-attachment: fixed;
            font-size: 1.3em; text-align: justify; padding-right: 30px;
         }
      </style>
   </head>

   <body>
      <p>
         Juste un petit exemple de texte relativement long afin de bien contrôler le fonctionnement
         d'une image de fond fixe par rapport à la fenêtre du navigateur. Quel que soit la position de 
         l'ascenceur, l'image reste toujours visible en bas à droite.
      </p>
   </body>
</html>
Notation raccourcie

Heureusement, une notation abrégée permet ici encore d'alléger les suites de déclarations semblables. La propriété background réunit toutes les caractéristiques d'arrière-plan décrites dans ce chapitre. Ainsi, pour l'exemple précédent, voici ce que nous pouvons écrire sur le fond associé à la balise <body>.

body { 
    background: bisque url(attention.gif) right bottom no-repeat fixed;
    font-size: 1.3em; text-align: justify; padding-right: 30px;
}
Dimension de l'image de fond

La propriété background-size, offre un moyen de spécifier les dimensions des images d'arrière plan dans le but de les adapter à celles de l'élément sur lequel elles sont appliquées.Les valeurs possibles sont :

  • Valeurs numériques : pour définir la largeur et/ou la hauteur. Le ratio est conservé si une seule valeur est fournie ;
  • Pourcentage : par rapport à la boîte elle-même. Une valeur de 100% 100% couvre toute la boîte, mais le ratio de l'image n'est pas conservé ;
  • countain : le fond est étendu à la taille de la boîte en ajustant le plus grand côté largeur ou hauteur au sein de celle-ci. Le ratio de l'image est conservé ;
  • cover : le fond est étendu à la taille de la boîte en ajustant le plus petit côté (largeur ou hauteur) au sein de celle-ci. Le ratio de l'image est conservé.

La valeur par défaut est background-size: auto;. Toutes les valeurs omises correspondent à auto.

Proposer une dimension à l'image de fond 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Les images de fond</title>
      <style>
         body { background-color: darkolivegreen; }
         p {              
            display: table-cell; width: 270px; height: 160px; color: rgb(255, 255, 0); 
            text-shadow: 0 -1px 0 white, 0 1px 0 black; border-radius: 5px ; border: 3px outset;  
            text-align: center; vertical-align: middle;  font: italic 1.2em Arial; padding: 30px; 
            background: darkgreen url(Mésange-noire.jpg) center center no-repeat; background-size: 80%;          
         }
      </style>
   </head>

   <body>
      <p>Exemples pour placer une ou plusieurs images en arrière-plan.</p>
   </body>
</html>
Il est possible de spécifier la valeur auto pour conserver le ratio visuel de l'image. Dans l'exemple ci-dessus, vu que je n'ai proposé qu'une seule valeur 80% en horizontal, la hauteur de l'image s'est automatiquement recalculée pour respecter le ratio original, ce qui sous entend bien que la valeur auto est une valeur par défaut.

Deux valeurs originales viennent compléter l'arsenal des possibilités de background-size : les valeurs contain et cover. Dans les deux cas, l'image de fond conservera toujours ses proportions, mais contain la forcera à l'intérieur de l'élément au maximum, tandis que cover la forcera à couvrir toute la surface une partie de l'image ne sera pas visible.

Images correspondantes

Arrière-plans multiples

CSS 3 rend possible l'affichage de plusieurs images d'arrière-plan sur un même élément en cumulant les valeurs au sein des propriétés background-image, background-position, background-size, background-repeat et background, ces valeurs étant simplement séparés par une virgule. Il n'est pas obligatoire de définir des fonds multiples composées uniquement d'images, la combinaison d'images et de couleurs est également possible, mais les arrières-plans mutiples prennent tout leurs sens quand il s'agit d'appliquer plusieurs images en fond d'un élément unique.

Le résultat est similaire à des calques d'un logiciel de traitement d'image : la première image déclarée dans la liste sera au premier plan. Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan. Lorsque plusieurs images d'arrière-plan sont déclarées, l'ordre d'apparition dans la règle détermine leur empilement : la première de la liste apparaît en haut de la pile, puis la deuxième, et ainsi de suite jusqu'à la dernière qui occupera la couche la plus basse.
Plusieurs images de fond 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Les images de fond</title>
      <style>
         body { background-color: darkolivegreen; }
         p {              
            display: table-cell; width: 240px; height: 160px; color: rgb(255, 255, 0); 
            text-shadow: 0 -1px 0 white, 0 1px 0 black; border-radius: 5px ; border: 3px outset;  
            text-align: center; vertical-align: middle;  font: italic 1.2em Arial; 
            background: url(attention.gif) top right no-repeat, url(Mésange-noire.jpg) top center no-repeat;    
            background-size: auto, cover;
         }
      </style>
   </head>

   <body>
      <p>Exemples pour placer une ou plusieurs images en arrière-plan.</p>
   </body>
</html>
L'ordre de déclaration est important dans la propriété background : dans l'exemple ci-dessus, la position top right s'applique uniquement à la première image la croix et top center s'applique uniquement à l'image de fond la mésange. Pour la propriété background-size, la valeur auto s'applique à la croix et conserve donc sa taille originale, et cover s'applique à l'image de fond qui occupe ainsi toute la surface de la boîte.
Rogner l'image d'arrière-plan

La propriété background-clip permet de définir les limites auxquelles une image d'arrière-plan est rognée clip en anglais et donc n'est plus visible. La propriété peut prendre trois valeurs :

  • border-boxpar défaut : le fond est visible jusqu'aux limites extérieures de la bordure mais ne la superpose pas)
  • padding-box : le fond est visible jusqu'aux limites extérieures de la marge interne (padding), il s'arrête donc juste avant la bordure ;
  • content-box : le fond est visible uniquement sous le contenu. Il s'arrête à la limite inférieure de la marge interne. Cela correspond à la taille spécifiée par width et height dans le modèle de boîte classique.
Rogner l'image de fond 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Les images de fond</title>
      <style>
         body { background-color: darkolivegreen; }
         p {              
            display: table-cell; width: 270px; height: 160px; color: rgb(255, 255, 0); 
            text-shadow: 0 -1px 0 white, 0 1px 0 black; border-radius: 5px ; border: 3px outset;  
            text-align: center; vertical-align: middle;  font: italic 1.2em Arial; padding: 10px; 
            background: darkgreen url(Mésange-noire.jpg) no-repeat content-box;     
         }
      </style>
   </head>

   <body>
      <p>Exemples pour placer une ou plusieurs images en arrière-plan.</p>
   </body>
</html>
Fixer l'origine de l'image d'arrière-plan

La propriété background-origin permet de définir l'origine du positionnement initial des images d'arrière-plan. La propriété a trois valeurs possibles, qui sont similaires à celles de background-clip :

  • border-box : l'origine est la limite externe de la bordure ;
  • padding-box par défaut : l'origine est la limite externe de la marge interne ;
  • content-box : l'origine est la limite externe du contenu.
Fixer l'origine de l'image de fond 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Les images de fond</title>
      <style>
         body { background-color: darkolivegreen; }
         p {              
            display: table-cell; width: 270px; height: 160px; color: rgb(255, 255, 0); 
            text-shadow: 0 -1px 0 white, 0 1px 0 black; border-radius: 5px ; border: 3px outset;  
            text-align: center; vertical-align: middle;  font: italic 1.2em Arial; padding: 10px; 
            background: darkgreen url(Mésange-noire.jpg) no-repeat; 
            background-origin: content-box; background-size: 100%;
         }
      </style>
   </head>

   <body>
      <p>Exemples pour placer une ou plusieurs images en arrière-plan.</p>
   </body>
</html>

Les bordures en images

Comptant parmi les nouveautés à fort potentiel, border-image rehausse de belle manière les maigres possibilités actuellement allouées aux bordures : non seulement cette propriété accepte-t-elle enfin les images au sein des bordures d'un élément, mais elle permet également de jouer sur différents aspects de l'image tels que l'étirement ou la répétition. Bordures graphiques complexes, ombrages variés, onglets décorés ou encore arrière-plan de couleur dégradées sont à la portée de cette propriété qui n'a pas fini de faire parler d'elle.

Ainsi, la propriété border-image permet d'ajouter des images sur les bordures d'une boîte. Cette propriété est la notation raccourcie des propriétés border-image-source, border-image-slice, border-image-width, border-image-outset et border-image-repeat. L'utilisation de border-image ne modifie pas la taille de l'élément, la bordure peut alors apparaître à l'extérieur de la boîte.

Le principe d'application est assez simple :

Une image unique doit être utilisée pour définir les différents morceaux de la bordure. L'image doit être composée de neuf parties, qui définissent les quatre coins, les quatre parties étirables et le centre de la boîte.

Une image sert de bordure 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Dégradés de couleurs</title>
      <style>
         body { background-color: burlywood; }
         p { 
            border-image: url(border.png) 27 / 5 / 0 repeat stretch;  border-radius: 3px; box-shadow: 2px 2px 15px;       
            background-color: rgb(255, 255, 200); font-weight: bold; text-align: justify; padding: 20px; margin: 5px;            
         }
      </style>
   </head>

   <body>
      <p>Voici un exemple de bordure d'image qui permet de bien entourer le paragraphe de façon agréable.</p>
   </body>
</html>

Dans l'exemple qui vous est proposé ci-dessus, cette propriété border-image se distingue par plusieurs composantes :

  1. La source de l'image qui sert de bordure, ici border.png ;
  2. La découpe de l'image qui sert de bordure, ici une seule valeur de 27px image de bordure symétrique. Dans l'image qui sert de référence, un losange fait exactement 27 pixels de largeur ou de hauteur ;
  3. La largeur de la bordure souhaitée, ici 5px.
  4. Valeur de décalage vers l'extérieur. Nous désirons que l'image qui sert de bordure soit entièrement à l'intérieur de la boîte (valeur 0).
  5. Choisir le type de traitement sur les côtés de la boîte, ici une répétition du motif sur les côtés horizontaux et un étirement sur les côtés verticaux.
border-image-source

La propriété border-image-source permet de définir l'image utilisée pour la création de la bordure. Il faut en spécifier la source, d'une façon classique, comme pour background-image :

border-image-source: url(border.png);
border-image-slice

La propriété border-image-slice permet de définir les traits de découpe des parties de l'image. Cette règle accepte une, deux, trois ou quatre valeurs séparées par des espaces.

Dans le cas où vous spécifiez les quatre valeurs, il conviendra de les renseigner soit en pixels, soit en pourcentage ou sans unité ce qui correspond au pixel dans le sens habituel des aiguilles d'une montre : haut horizontal, puis droite vertical, bas horizontal et enfin gauche vertical. La présence du mot clé fill permet de spécifier la partie centrale de l'image comme étant l'arrière-plan de la boîte. Il est donc possible de gérer les bordures et le fond de la boîte en une seule image.
Une image sert de bordure 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset=UTF-8>
      <title>Une image pour bordure</title>
      <style>
         body { background-color: bisque; }
         p { 
            border-image-source: url(parchemin.png); border-width: 80px; border-image-slice: 83 100 115 83 fill;     
            font: italic 1.5em serif;
         }
      </style>
   </head>

   <body>
      <p>Exemple de paragraphe dont la boîte représente un parchemin.</p>
   </body>
</html>
border-image-width

La propriété border-image-width permet de définir la largeur ou la proportion de la bordure. Les valeurs possibles sont :

  • Une, deux, trois ou quatre valeurs qui définissent la largeur de chaque bordure dans l'ordre classique ;
  • nombre : correspond à la proportion de la taille de la bordure actuelle, définie avec border-width.
  • auto : la largeur des bordures est calculée pour s'adapter à la taille des parties de l'image définies avec border-image-slice.
  • La valeur par défaut est border-image-width: 1;. Il faut donc que border-width soit définie pour la bordure s'affiche.
Une image sert de bordure 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Dégradés de couleurs</title>
      <style>
         body { background-color: burlywood; }
         p { 
            border-image-source: url(border.png);  border-image-slice: 27;   border-image-width: 5;      
            border-radius: 3px; box-shadow: 2px 2px 15px; padding: 20px; margin: 5px;      
            background-color: rgb(255, 255, 200); font-weight: bold; text-align: justify;             
         }
      </style>
   </head>

   <body>
      <p>Voici un exemple de bordure d'image qui permet de bien entourer le paragraphe de façon agréable.</p>
   </body>
</html>
border-image-outset

La propriété border-image-outset permet de définir le décalage des éléments constituant la bordure, par rapport à la limite de bordure classique (vers l'extérieur). Les valeurs possibles sont :

  • Une, deux, trois ou quatre valeurs qui définissent le décalage de chaque bordure dans l'ordre classique ;
  • nombre : le décalage correspond à la proportion de la taille de la bordure actuelle, définie avec border-width.
  • La valeur par défaut est border-image-outset: 0; .
Une image sert de bordure 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Dégradés de couleurs</title>
      <style>
         body { background-color: bisque; }
         p { 
            border-image-source: url(border.png);  border-image-slice: 27;
            border-image-width: 5 10;  border-image-outset: 5 10;
            border-radius: 3px; padding: 5px; margin: 20px 30px;      
            background-color: orangered; font-weight: bold; text-align: justify;             
         }
      </style>
   </head>

   <body>
      <p>Voici un exemple de bordure d'image qui permet de bien entourer le paragraphe de façon agréable.</p>
   </body>
</html>
border-image-repeat

La propriété border-image-repeat permet de définir la méthode de répétition des éléments de l'image. Les coins ne sont pas affectés. Les valeurs possibles sont :

  • stretch : l'image est étirée pour remplir la bordure.
  • repeat : l'image est répétée pour remplir la bordure.
  • round : identique à repeat. En revanche, l'image peut être redimensionnée pour obtenir un nombre précis de répétition.
  • space : identique à repeat. En revanche, les images peuvent être espacées pour obtenir un nombre précis de répétition. Il ne se produit aucun redimensionnement.
  • Deux mots-clés peuvent être utilisés pour spécifier un comportement différent entre les côtés verticaux et horizontaux de la bordure.
  • La valeur par défaut est border-image-repeat: stretch; .
Une image sert de bordure 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Dégradés de couleurs</title>
      <style>
         body { background-color: burlywood; }
         p { 
            border-image-source: url(border.png);  border-image-slice: 27;   
            border-image-width: 6 18;  border-image-repeat: repeat stretch;
            border-radius: 3px; box-shadow: 2px 2px 15px; padding: 20px 60px; margin: 5px;      
            background-color: rgb(255, 255, 200); font-weight: bold; text-align: justify;             
         }
      </style>
   </head>

   <body>
      <p>Voici un exemple de bordure d'image qui permet de bien entourer le paragraphe de façon agréable.</p>
   </body>
</html>
border-image (notation raccourcie)

La notation raccourcie sur border-image permet de spécifier en une seule ligne les différents paramètres de création de la bordure où chaque règle est définie ainsi :

border-image: source slice / width / outset repeat;

Si nous reprenons l'exemple précédent, voici comment nous pouvons l'écrite avec la notation raccourcie :

border-image: url(border.png) 27 / 6 18 repeat stretch;

Afficher une couleur de fond

Tous les éléments HTML peuvent bénéficier d'une couleur de fond traitant de typographie et mise en place par la propriété background-color. Sa valeur n'est pas héritée mais les fonds étant par défaut transparents, les éléments imbriqués apparaîtrons de la même couleur que leur parent.

Comme nous venons de le voir dans le chapitre précédent, nous pouvons spécifier la couleur choisie soit par son nom, soit au travers de la notation hexadécimale ou encore utiliser les méthodes RGB et RGBa.

body { background-color: rgba(0, 0, 180, 0.2); }
p {  background-color: rgb(0, 0, 180);  color: rgb(0, 0, 180); }

Des dégradés de couleurs

L'utilisation des dégradés sur le web est, comme pour les ombres, une manière de donner du relief à un graphisme. Les dégradés, à condition qu'ils soient bien utilisés, sont quasiment non visibles pour l'utilisateur, mais son utilisation est nécessaire pour que les éléments d'une page ne paraissent plus plats. Ils sont très souvent employés pour la création de boutons, d'éléments de menu ou encore en arrière-plan d'un site, et souvent utilisés conjointement avec les ombres pour accentuer encore l'effet de lumière.

Après cette petite explication, commençons par comprendre ce que sont les dégradés. Dans la pratique, les dégradés CSS sont des images créées à la volée qui représentent une transition douce entre différentes couleurs. Pour l'instant, il n'en existe que deux types, les dégradés linéaires et les dégradés radiaux.

Les deux fonctions linear-gradient() et radial-gradient() nous permettent de créer ces dégradés, et comme le résultat est une image, ces fonctions sont utilisables avec les mêmes propriétés que celles qui acceptent des images, à savoir : background-image, background, list-style-image, list-style, border-image, content. Il existe également deux fonctions supplémentaires, repeating-linear-gradient() et repeating-radial-gradient() qui sont, comme leurs noms l'indiquent, des dégradés linéaires ou radiaux qui se répètent.
Dégradé linéaire

La fonction linear-gradient() de la propriété background-image permet de générer des arrière-plans de couleurs dégradées, d'une couleur à l'autre ou via des couleurs intermédiaires. Il est également possible de régler le démarrage et la fin de chaque couleur. La fonction linear-gradient() permet de créer un dégradé linéaire. Elle prend 3 valeurs, dont 2 sont obligatoires :

  1. Direction du dégradé optionnel : la direction du dégradé par défaut est to bottom C’est là où le dégradé va !.
  2. Couleur de départ.
  3. Couleur de fin.

Concernant l'utilisation des couleurs, les choix classiques sont possibles. Il est donc possible d'utiliser :

  • L'un des mots-clés du langage : red, green, darkgray, etc.
  • Un code hexadécimal : #38ff5f, #ccc, etc.
  • Une fonction de couleur avec ou sans transparence : rgb(255, 1, 28), rgba(0, 0, 0, 0.5), etc.
  • Le mot-clé tranparent : équivalent à rgba(0, 0, 0, 0).
Dégradés linéaires 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Dégradés de couleur</title>
      <style>
         body { background-image: linear-gradient(to right, yellow, red); }
         p { 
            border-radius: 0.4em; background-image: linear-gradient(yellow, red);            
            font-size: 1.2em; font-weight: bold; box-shadow: 2px 2px 10px; padding: 7px; margin: 5px;
         }
      </style>
   </head>

   <body>
      <p>Voici un exemple de dégradés de couleurs linéaires à la fois         
             sur le fond de la page principale ainsi que sur le fond du paragraphe.</p>
   </body>
</html>
Dans cet exemple, nous avons deux dégradés de couleurs linéaires. Dans les deux cas, nous proposons un dégradé linéaire du jaune vers le rouge, ces deux couleurs étant spécifiées dans la méthode linear-gradient(). L'orientation par défaut va toujours du haut vers le bas. Au niveau du dégradé de couleurs de la page web, nous avons prévu un dégradé qui part plutôt vers la droite. Dans ce cas là, vous devez débuter par le paramètre supplémentaire to right. Il existe bien entendu d'autres paramètres prédéfinies comme to left, to top, to bottom.
Choisir l'orientation du dégradé linéaire
  • Il est possible de préciser une direction en spécifiant une valeur en degré. Dans ce cas là, la direction qui sert de référence (0 degré) est un axe qui pointe vers le haut. Les valeurs positives sont suivant le sens horaire et non trigonométrique
    Angle de -45° 

    background-image: linear-gradient(-45deg, yellow, red);
    Il est possible de rajouter plusieurs couleurs intermédiaires : 

    body { background-image: linear-gradient(to right, yellow, red, yellow); }
p { 
      border-radius: 0.4em; background-image: linear-gradient(45deg, red, yellow, red);            
      font-size: 1.2em; font-weight: bold; box-shadow: 2px 2px 10px; padding: 7px; margin: 5px;
}
    Les color-stops littéralement les couleurs d'arrêt sont des points placés sur la ligne d'un dégradé qui nous permettent d'ajouter de nouvelles couleurs, et ainsi créer un dégradé composé de plus de deux couleurs. Ils sont utilisables aussi bien avec des dégradés linéaires que radiaux. Les color-stops sont obligatoirement définis dans l'ordre et une position peut être précisée en même temps que la définition de la couleur. Lorsqu'aucune position n'est précisée pour les color-stops, comme c'est le cas ici, les navigateurs se chargent de les calculer. Dans notre cas, la valeur yellow est calculée à 50%, puisque par défaut la première valeur rouge débute à 0% et la dernière valeur rouge à 100%.
  • Dans tous les cas, il est possible de spécifier une position en pourcentage ou en pixels. Cette valeur indique la dernière position de la couleur indiquée.
    Couleurs intermédiaires 

    background-image: linear-gradient(45deg, red -20%, yellow 25%, red 120%);
    Comme nous le découvrons au travers de cet exemple, il est bien entendu possible de spécifier des color-stops de départ et de fin différents des valeurs par défaut (0% et 100%). Dans ce cas, la couleur utilisée avant le premier color-stop devient le premier color-stop et celle utilisée après le dernier color-stop devient le dernier color-stop. La transition des couleurs s'effectue classiquement entre les deux valeurs. Chose pratique, les color-stops peuvent être définis en dehors de la boîte. Ils peuvent être supérieurs à 100% ou inférieurs à 0%. Ainsi, dans l'exemple précédent, le rouge se situe en dehors des limites de la boîte englobant le paragraphe, et le jaune apparaît plus rapidement. Du coup sur les extrêmes nous obtenons une teinte plutôt orangée.
  • Pour terminer, il est également possible de définir deux color-stops consécutifs avec la même valeur (ou presque). Dans ce cas, aucun transition douce de couleur n'est créée.
    Au contraire, le résultat est une limite franche : 

    <!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Dégradés de couleur</title>
      <style>
         body { background-image: linear-gradient(to left, yellow 50%, orange 50%); }
         p { 
            border-radius: 0.4em; background-image: linear-gradient(60deg, blue 25%, white 27%, white 70%, red 72%);            
            font-size: 1.2em; font-weight: bold; box-shadow: 2px 2px 10px; padding: 7px; margin: 5px;
         }
      </style>
   </head>

   <body>
      <p>Voici un exemple de dégradés de couleurs linéaires à la fois         
             sur le fond de la page principale ainsi que sur le fond du paragraphe.</p>
   </body>
</html>
Dégradé radial

Cette fois-ci, notre dégradé peut se propager dans plusieurs directions à l'aide de la fonction radial-gradient() associée à la propriété background-image. La fonction radial-gradient() permet de créer un dégradé radial. Elle prend 4 valeurs, dont 2 sont obligatoires :

  1. Centre du dégradé optionnel : le centre du dégradé par défaut est center. Il est possible de spécifier d'autres centres spécifiques, comme par exemple le bord haut gauche, au moyen de la syntaxe : at top left. Bien entendu, il existe les autres coins particuliers : at top right, at bottom left, at bottom right. Il est également possible de spécifier un endroit quelconque du centre de votre dégradé à l'aide de valeurs en pixel ou en pourcentage.
  2. Taille et forme optionnel : la taille et forme par défaut sont ellipse farthest-side. La forme peut être circle ou ellipse. La taille peut être exprimée classiquement, ou grâce aux mots-clés suivants par rapport au centre :
    • closest-corner : le dégradé s'étend jusqu'au coin le plus proche.
    • closest-side ou contain : le dégradé s'étend jusqu'au le coté le plus proche. Il sera donc entièrement contenu dans la balise contenante.
    • farthest-corner : le dégradé s'étend jusqu'au coin le plus éloigné.
    • farthest-side ou cover : le dégradé s'étend jusqu'au coté le plus éloigné. Il couvre donc toute la balise contenante.
  3. Couleur de départ.
  4. Couleur de fin.
Dégradé radial 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Dégradés de couleurs</title>
      <style>
         body { background-image: linear-gradient(to right, yellow, red, yellow); }
         p { 
            border-radius: 0.4em; background-image: radial-gradient(yellow 25%, red);            
            font-size: 1.2em; font-weight: bold; box-shadow: 2px 2px 10px; padding: 7px; margin: 5px;
         }
      </style>
   </head>

   <body>
      <p>Voici un exemple de dégradé radial de couleurs sur l'arrière-plan du paragraphe
             et un dégradé linéaire sur le fond de la page web.</p>
   </body>
</html>
Ici, en proposant uniquement deux couleurs, le dégradé radial par du centre de la boîte pour aller vers l'extérieur, du jaune vers le rouge. Comme la largeur et la hauteur du conteneur peuvent être différentes, l'apparence du dégradé radial à la forme d'une ellipse. Il est possible de spécifier la forme à l'aide de deux mots réservé ellipse valeur par défaut et circle.
Spécifier circle et rajouter une autre couleur jaune 

background-image: radial-gradient(circle, yellow, red, yellow);
Je place le centre du dégradé en haut à gauche 

background-image: radial-gradient(at top left, yellow 20%, red, yellow 80%);
Le dégradé s'étale régulièrement en forme d'ellipse du coin gauche vers le côté droit 

background-image: radial-gradient(farthest-side at top left , yellow, red, yellow);
Le dégradé s'étale régulièrement en forme de cercle du centre vers le côté le plus proche 

background-image: radial-gradient(closest-side circle, yellow, red, yellow);
Centre du dégradé en spécifiant un pourcentage pour les axes 

background-image: radial-gradient(closest-corner circle at 30% 50%, yellow 10%, red, yellow);
Répétition dans les dégradés

Les fonctions repeating-linear-gradient() et repeating-radial-gradient() permettent de créer des dégradés linéaires ou radiaux qui se répètent, afin de créer une sorte de motif. L'utilisation de ces fonctions est strictement identique aux fonctions raccourcies présentées précédemment, si ce n'est l'utilisation d'au moins un color-stop (compris entre 0 et 100%) est obligatoire.

Répétition des dégradés 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Dégradés de couleur</title>
      <style>
         body { background-image: repeating-linear-gradient(to left, #ccc, #eee 10%); }
         p { 
            border-radius: 0.4em; background-image: repeating-radial-gradient(circle, orange, yellow 10%);            
            font-size: 1.2em; font-weight: bold; box-shadow: 2px 2px 10px; padding: 7px; margin: 5px;
         }
      </style>
   </head>

   <body>
      <p>Voici un exemple de dégradés de couleurs linéaires à la fois         
             sur le fond de la page principale ainsi que sur le fond du paragraphe.</p>
   </body>
</html>

Il est possible de reproduire certains dégradés qui se répètent avec la syntaxe des dégradés classiques et en modifiant la taille de l'arrière-plan. Cela fonctionne uniquement pour les dégradés linéaires, et s'ils sont définis sans angle.

Répétition des dégradés 

<style>
     body { background-image: linear-gradient(to left, #ccc, #eee); }
     p { 
          border-radius: 0.4em; background-image: linear-gradient(to left, #ccc, #eee); background-size: 10%;            
          font-size: 1.2em; font-weight: bold; box-shadow: 2px 2px 10px inset; padding: 7px; margin: 5px;
     }
</style>
Arrière-plans multiples avec des images et des dégradés

Il est également possible d'utiliser plusieurs dégradés sur un même élément, via les arrière-plans multiples, ou même d'utiliser un dégradé et une image. Bien entendu, le dégradé du premier plan doit être transparent, au moins en partie, pour laisser apparaître le deuxième plan. Nous pouvons également prévoir un dégradé sur la bordure de l'image.

Arrière-plans multiples et dégradé répétitif sur la bordure 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Dégradés de couleur</title>
      <style>
         body { background-image: linear-gradient(to left, #ccc, #eee); }
         p { 
            background: linear-gradient(transparent, rgba(0, 100, 0, 0.7)), url(Mésange-noire.jpg) top center no-repeat;  
            border-image: repeating-linear-gradient(45deg, #ccc, #eee 5%) 5 / 5 / 3; background-size: 120%; 
            height: 200px; padding: 20px; box-shadow: 0 0 30px black inset; color: greenyellow;
            font: bold 2em serif; display: table-cell; vertical-align: bottom;
         }
      </style>
   </head>
   <body><p>La mésange noire</p></body>
</html>

Un texte mis en valeur

Les diverses versions de html ont peu à peu intégré des mises en forme du texte. Avant CSS, il était déjà possible de définir un choix de police, une taille, un style et quelques effets. Ces facultés limitées restent toutefois déconseillées : elles sortent du cadre fonctionnel du langage, de sa sémantique, et empiètent sur celui de la mise en forme. CSS, bien plus adapté aux choix de représentation des textes, propose d'autres fonctionnalités : gestion de la justification du texte, largeurs de graisse différentes, interlignage et interlettrage, surlignement, modification de la casse, etc. Quelsques efffets de style bien choisis permettent ainsi à un texte d'adopter une présentation esthétique, conférant un grand confort de lecture.

Rubriques

Les polices de caractères

Il est possible choisir sa police de caractères, mais attention cela ne va pas sans poser certains problèmes. En effet, les polices n'y sont qu'évoquées ; elles doivent être fournies par les ordinateurs de visualisation. En d'autres termes, pour qu'une police s'affiche correctement, il faut que tous les internautes l'aient. Si un internaute ne dispose pas de la police choisie, son navigateur prendra une police par défaut qui n'aura peut-être rien à voir avec ce que vous attendiez.

Déclaration d'une police : C'est la propriété font-family qui permet de contrôler la police affectée à un élément du site (qu'il s'agisse du document complet ou de l'une de ses parties).

body {   font-family: "Times New Roman", Times, serif;  }

Cette propriété se transmettant hiérarchiquement par l'héritage, elle vaudra également pour tous les descendants de l'élément <body>, c'est-à-dire à toute la page web. Il sera donc inutile de préciser une police pour chacun d'entre eux, sauf évidemment pour en changer ponctuellement.

Vous remarquez dans notre écriture que nous indiquons plusieurs polices, séparés par des virgules, par ordre de préférence. Si une police n'est pas disponible chez l'internaute, la suivante sera utilisée et ainsi de suite. Il est judicieux et important de toujours indiquer une police générique en dernier, dans le cas contraire, c'est une police par défaut qui s'affichera (qui dépend du navigateur utilisé - affichage différent). Par ailleurs, n'oubliez pas les guillemets pour les polices dont le nom contient des espaces.

Les familles de polices génériques

Toutes les polices sont classées par familles génériques, qui les regroupent selon leur empattement, leur chasse, ou leur style. Nous trouvons ainsi les familles sérif, sans sérif, monospace police à chasse fixe, cursive et fantasy - les trois premières étant les plus courantes sur le web, les dernières relèvent plus du gadget. Préciser plusieurs familles dans la déclaration font-family augmente la probabilité que le visiteur disposera au moins de l'une d'entre elles.

Les différentes familles des polices
  • Les empattements des caractères s'appellent sérif exemple : police Times. Un "i" majuscule sans sérif a l'allure d'un simple trait vertical. Avec sérifs, il arbore de petits traits horizontaux, selon la forme d'un "H" renversé.
  • Les sérifs, issus de l'imprimerie traditionnelle, ne conviennent pas toujours à une utilisation pour le web. Ils gênent notamment la lecture dans les petites tailles, où les empattements accentuent la pixellisation et son crénage effet d'escalier.
  • Les pôlices sans sérifs, dénués d'empattements, sont d'apparence plus simple et plus sobre. Leur confort de lecture sur l'écran les fait souvant privilégier dans les chartes graphiques pour le Web. Les plus fréquentes sont Verdana et Arial.
  • Les polices à chasse fixe, dite monospace, attribuent à chaque caractère une largeur constante, comme sur les machines à écrire les "m" des textes imprimés étant généralement plus large que leurs "l". Dans cette famille, nous prenons souvent Courier New pour l'affichage de code, de listings, etc.
Choix de la police de caractères 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Formatage du texte</title>
      <style>
         body { background: bisque; color: brown; font-size: 1.2em; } 
         p { 
            display: inline;  padding: 5px; margin: 5px;
            background: burlywood; border-radius: 2px; box-shadow: 0 0 5px; 
         }
         #serif { font-family: Times, serif;  }
         #sans-serif { font-family: Arial, sans-serif; }
         #monospace { font-family: "Courier New", monospace; }
      </style>
   </head>

   <body>
      <p id="serif">Times (Sérif)</p>
      <p id="sans-serif">Arial (Sans Sérif)</p>
      <p id="monospace">Courier New (Monospace)</p>
   </body>
</html>

Taille des polices de caractères

Pour modifier la taille du texte, nous utilisons la propriété CSS font-size, comme vous venez de le voir dans le code précédent. Cette propriété est héritée automatiquement : sa valeur sera donc transmise à tous les descendants de l'élément considéré. Mais comment spécifier une taille à un texte ? Plusieurs techniques sont proposées :

Les unités de taille fixe

Les unités de taille fixe ou unités absolues sont le pixel (1px : unité d'affichage élémentaire sur un écran dont la dimension dépend fortement de la résolution), le point (1pt vaut environ 0,35 mm), le pica (1pc vaut environ 4,22 mm), le centimètre (cm), le millimètre (mm) et le pouce (1in vaut environ 2,54 cm).

Il est fortement conseillé de limiter leur usage à des médias de sortie connue, aux propriétés déterminées. En clair, nous les éviterons sur l'écran d'ordinateur, chaque moniteur étant particulier (de par sa taille de diagonale, sa résolution, son nombre de couleurs, etc.). De telles unités sont toutefois parfaitement adaptées à une sortie sur papier. Evitez vous aussi d'utiliser ces unités fixes dans l'élaboration de votre site web et pour le calcul de vos dimensions et tailles de police. Pour conclure cette liste, le pixel est sans doute l'unité la plus utilisé. Il est malgré tout spécifié unité relative car sa taille dépend fortement de la plateforme et de l'écran utilisé, plus précisément de la résolution de l'ordinateur de l'internaute. Du coup, il n'est pas possible de lui donné une dimension précise, en millimètre par exemple. Par contre, sur un système donné, il restera une unité fixe partout dans le document, quelque soit la hiérarchie (l'imbrication) des éléments.
Choix de la taille de la police avec une valeur fixe 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Formatage du texte</title>
      <style>
         body { background: bisque; color: brown; } 
         section { font-size: 20px;  background: burlywood; border-radius: 2px; box-shadow: 2px 2px 3px;  }
         h1, p { padding: 3px; margin: 3px; }
      </style>
   </head>

   <body>
      <section>
         <header><h1>Mon titre de section</h1></header>
         <p>Un paragraphe dans la section</p>
      </section>
   </body>
</html>
Dans cet exemple, nous prévoyons de fixer la dimension de la police dans la section à 20px. Cette taille est légèrement plus grand que la taille par défaut, qui est très souvent de 14px. Cette valeur sert de référence pour tous les éléments constituant cette section. Le paragraphe qui se trouve à l'intérieur de cette section prend cette nouvelle valeur de référence pour la taille de la police. Le titre possède toujours une dimension relative proportionnelle à la taille du paragraphe. Ainsi, nous voyons un texte qui est plus grand à la fois pour le titre et pour le paragraphe par rapport aux valeurs proposées par défaut par le navigateur, ceci grâce à une seule écriture spécifiée dans la section.
Les unités de taille relative et pourcentages

Les unités relatives sont la largeur de M em, la hauteur d'x (ex), le pourcentage %. em est appelé cadratin, il correspond effectivement à la hauteur du caractère M majuscule.

  • 1em représente la taille du caractère M dans la police de référence.
  • 1ex correspond à la hauteur du caractère minuscule x, sans jambages, dans la police de référence.
  • Le pourcentage, s'il se prête bien aux textes et polices de caractères, ne leur est pas spécifique. Il se définit relativement à la taille de référence dans le conteneur de l'élément.
Pour ces trois unités, la taille de la police de référence se transmet par héritage : dans le cas d'éléments imbriqués, la police de référence change à chaque nouveau conteneur. Ainsi, définir une taille de référence de 2em dans un paragraphe puis une taille de 2em dans un de ses éléments enfants, nous attribuons finalement à ce dernier une taille de 2em par rapport à 2em, soit 4em ! Toutes les autres unités relatives se cumulent de la même façon. La spécification CSS3 définit une nouvelle unité pour les textes, le rem. Cette unité relative permet de baser la taille d'un texte sur la taille de l'élément racine (root en anglais) de la page, dans notre cas <html>, au lieu de se baser sur la taille du parent comme le fait em.
Choix de la taille de la police avec une valeur relative 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Formatage du texte</title>
      <style>
         body { background: bisque; color: brown; } 
         section { font-size: 20px;  background: burlywood; border-radius: 2px; box-shadow: 2px 2px 3px;  }
         h1, p { padding: 3px; margin: 3px; }
         p, span { font-size: 1.5em; } 
      </style>
   </head>

   <body>
      <section>
         <header><h1>Mon titre de section</h1></header>
         <p>Un paragraphe <span>dans la</span> section</p>
      </section>
   </body>
</html>
Cette fois-ci, les balises <p> et <span> reçoivent chacune une taille relative de texte de 1.5em. Bien entendu, cette taille relative dépend de la taille fixe proposée par la section. Ainsi, par rapport à l'exemple précédent, le paragraphe va être 1,5 fois plus grand que la taille de référence spécifiée dans la section. Vous remarquez que la taille du titre n'a pas changée puiqu'elle se sert de la même valeur de référence. Du coup, la taille du paragraphe possède pratiquement la même dimension que le titre (à remarquer que ce dernier est en gras). Dans le même principe, la balise <span> doit posséder un texte 1,5 fois plus grand que son parent, ici le paragraphe. Finalement, la taille de la police écrite à l'intérieur des balises <span> est trois fois plus grande que la valeur de référence. La taille en pixels est alors de 60.
Choix de la taille de la police avec une valeur relative 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Formatage du texte</title>
      <style>
         body { background: bisque; color: brown; } 
         section { font-size: 20px;  background: burlywood; border-radius: 2px; box-shadow: 2px 2px 3px;  }
         h1, p { padding: 3px; margin: 3px; }
         p, span { font-size: 75%; } 
      </style>
   </head>

   <body>
      <section>
         <header><h1>Mon titre de section</h1></header>
         <p>Un paragraphe <span>dans la</span> section</p>
      </section>
</body>
Enfin, pour ce dernier exemple, nous utilisons une taille relative, sous forme de pourcentage avec une valeur inférieure à 100% ce qui donne le scénario inverse par rapport à l'écriture précédente.
Tailles relatives prédéfinies

Comme pour les couleurs, CSS propose des mots-clés pour définir les tailles des polices. Malheureusement, il n'en existe que sept. Par ordre croissant :

  1. xx-small : minuscule ;
  2. x-small : très petit ;
  3. small : petit ;
  4. medium : moyen ;
  5. large : grand ;
  6. x-large : très grand ;
  7. xx-large : gigantesque.
Ces tailles sont laissées à l'appréciation de chaque navigateur. Il n'est donc pas garantit que l'affichage soit identique d'un poste à l'autre. Ce spectre limité et ces différences d'appréciation limitent grandement l'intérêt de cette technique pour le choix des tailles de polices.
Permettre l'agrandissement des polices

De nombreux utilisateurs souhaitent agrandir les polices. Pour certains, c'est même une nécessité cas des malvoyants et autres handicapés visuels. Les navigateurs offrent tous la possibilité d'afficher un site avec une taille de texte modifiée.

Malgré tout, de nombreux webmasters, visant l'uniformité sur toutes les plateformes, tentent d'imposer la taille de tous les éléments de leur mise en page images, arrière-plans, espacement, marges, taille des blocs et du texte. Cette démarche trahit un manque de respect et une inversion des priorités le rendu d'un site web doit être conforme aux attentes et souhaits de l'utilisateur, pas à ceux de son concepteur. En vérouillant ainsi la mise en page, l'auteur rend son site inutilisable ou désagréable, voire complètement dégradé si l'utilisateur augmente la taille de la police.

En réalité, un affichage correct n'implique d'imposer aucune dimension : seules les images et illustrations doivent avoir une taille spécifiée et figée pour s'afficher dans les meilleures conditions. Pour le reste, nous préfèreront des dimensions relatives cela fluidifie la navigation sur le site. Prenez donc l'habitude d'autoriser une certaine souplesse sur vos pages web. Sachez proposer plutôt qu'imposer, surtout au niveau de la taille du texte.

Styles et effets sur les caractères

CSS propose de nombreux styles typographiques. Nous distinguons les styles prévus pour les caractères couleur, italique, soulignement, etc.) et ceux portant sur les mots et les paragraphes (interlignage, justification, crénage, etc.. Bien entendu, ces différents styles sont déjà largement connus au travers de tous les traitements de texte que nous utilisons tous.

Définir et modifier la couleur de la police

La propriété CSS color définit la couleur de police (la propriété font-color n'existe pas). C'est une propriété héritée : sauf précision explicite contraire, tout élément reprendra la couleur de son élément parent. Revoyez le chapitre consacré à la couleur pour connaître les valeurs possibles de cette propriété : notation RGB, notation hexadécimale et mots-clés. Pour afficher les textes de citation en bleu, nous pourrions écrire :

blocquote {  color: blue;  }
La graisse

La propriété font-weight définit la graisse des caractères. Elle accepte les valeurs :

  • normal par défaut : graisse normale ;
  • bold : gras ;
  • lighter : moins gras que la référence ;
  • bolder : plus gras que la référence ;
  • 100, 200, ... 900 : chaque valeur définit un niveau de graisse différent. Ces valeurs ne sont malheureusement pas souvent prises en compte par les différents navigateurs.

La graisse d'un caractère dépend directement du type de police utilisé. D'autre part, une grande partie des polices ne reconnaîtrons que les valeurs bold et normal.

.gras {  font-weight: bold;  }
Les italiques et les obliques

La propriété font-style gère les italiques et les obliques. Elle admet les valeurs :

  • normal par défaut : police droite ;
  • italic : spécifie une police dite italique dans la base de données des polices du navigateur c'est le cas de toute police dont le nom comporte des mots Italic, Cursive, ou Kursiv. A défaut, se rabat sur une police étiquetée oblique ;
  • oblique : spécifie une police dite oblique dans la base de données des polices du navigateur c'est le cas de toute police dont le nom comporte des mots Oblique, Slanted, ou Incline. Rare sont les polices de caractères disposant d'une variante oblique.
.italique {  font-style: italic;  }
Caractères soulignés, surlignés, barrés, clignotants

La propriété text-decoration permet :

  • de souligner le texte (valeur underline) ;
  • de surligner le texte (valeur overline) ;
  • de barrer le texte (valeur line-through) ;
  • de faire clignoter le texte (valeur blink) ;

Nous pouvons cumuler toutes ces fonctionnalités de décoration du texte, en précisant plusieurs valeurs à la propriété text-decoration. Le code suivant produira ainsi un titre souligné et surligné :

h1 {  text-decoration: underline overline;  }

Nous recourrons très fréquemment à la propriété text-decoration pour modifier le soulignement des liens hypertextes. Ainsi, pour mettre en place des liens soulignés uniquement lors du survol par le pointeur de la souris, nous pourrons écrire :

a {  text-decoration: none;  }
a:hover {  text-decoration: underline;  }
La casse : minuscules et majuscules

La casse est la prise en compte des majuscules et des minuscules des caractères. Elle se traduit en CSS par la propriété text-transform qui admet quatre valeurs :

  • none par défaut : le texte n'est pas modifié ;
  • capitalize : seule la première lettre de chaque mot du texte sera affichée en majuscule ;
  • lowercase : tout le texte sera affiché en minuscules ;
  • uppercase : tout le texte sera affiché en majuscules ;
Héritage remise à zéro d'une valeur : La valeur none permet d'annuler un effet text-transform appliqué à un ancêtre de l'élément considéré. Cette propriété est en effet héritée par les descendants de tout élément sur lequel elle porte.

Seul l'affichage des caractères sera ainsi modifié, le texte du document source restant inchangé.

.majuscules {  text-transform: uppercase;  }
Petites majuscules

La propriété font-variant permet de définir si l'affichage doit être effectué en petites majuscules. Le mot clé est alors small-caps.

Les styles et effets sur les mots et les paragraphes

Interlignage de texte

L'interligne est l'espace séparant deux lignes consécutives d'un paragraphe (à ne pas confondre avec les marges d'un paragraphe, qui ne porte que sur son périmètre). Les paragraphes et autres éléments contenant du texte ont une valeur d'interligne par défaut qui dépend des navigateurs. Elle est d'environ 1,2em, soit un peu plus que la hauteur d'un caractère.

La propriété CSS mettant en place l'interligne s'appelle line-height. Elle admet pour valeurs : un nombre, un pourcentage, ou le mot-clé normal. Toutes les unités sont acceptées ; em est toutefois largement conseillé. L'exemple suivant génère un paragraphe en interligne double :

Interlignage double 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Styles sur les mots et paragraphes</title>
      <style>
         body { background-image: linear-gradient(to right, yellow, red, yellow); }
         p { 
            line-height: 2em;  font-size: 1.2em; font-weight: bold; box-shadow: 2px 2px 10px; padding: 7px; margin: 5px;
            border-radius: 0.4em; background-image: radial-gradient(farthest-corner at 30% 40%, yellow, red, yellow, red);                      
         }
      </style>
   </head>

   <body>
      <p>Changement de style sur les mots ou sur les paragraphes.</p>
   </body>
</html>
Le crénage

Le crénage ou interlettrage est la distance séparant deux caractères consécutifs. Toutes les balises disposent d'une valeur de crénage par défaut valeur nulle que nous pouvons modifier grâce à la propriété CSS letter-spacing une valeur négative ayant pour effet de resserer les caractères. Voici ce que nous obtenons en écartant légèrement les lettres du paragraphe d'une valeur de 0.4em.

p {  letter-spacing: 0.4em;  }
L'espace entre les mots

La propriété word-spacing règle l'espace séparant deux mots consécutifs. Elle se comporte comme letter-spacing et admet les mêmes valeurs, mais ne porte que sur les mots entiers.

p {  letter-spacing: 0.3em; word-spacing: 0.7em; }
Définir la justification du texte

Trois comportements vis-à-vis des marges sont possibles pour chaque paragraphe : alignement à gauche, alignement à droite, justification. Cette dernière possibilité, souvent utilisée dans les livres, se traduit par un alignement simultané sur les deux marges, en jouant automatiquement sur l'interlettrage et l'espace entre les mots.

La propriété CSS définissant l'alignement de texte est text-align. Elle admet les valeurs left alignement à gauche, right alignement à droite, center texte centré, justify texte justifié et normal comportement par défaut.

p {  letter-spacing: 0.3em; word-spacing: 0.7em; text-align: justify;  }
La notation raccourcie

Pour éviter l'accumulation de déclarations de police, le W3C a prévu une notation raccourcie des propriétés débutant par font.... Comme nous l'avons déjà évoqué à plusieurs reprises, il est possible de synthétiser les propriétés que nous venons de voir sur l'unique propriété font.

Écriture en utilisant les différentes propriétés 

p { font-family: Arial, sans-serif; font-style: italic; font-weight: bold; font-size: 1.2em; line-height: 2em; } 
p { font: italic bold 1.2em/2em Arial, sans-serif;  }  // écriture équivalente raccourcie
L'ordre est important : commencez par déclarer les styles de police (graisse, italique), enchaînez sur la taille et l'éventuelle interligne conclure avec la ou les familles de polices.

Les nouvelles propriétés sur la gestion des textes

Les nouveaux modules CCS3 étendent le nombre de propriétés liées à la gestion de la typographie. L'objectif premier étant d'avoir un plus grand contrôle concernant le rendu de la typographie elle-même, les lettres, les mots, les espaces blancs, les retours à la ligne, les alignements, les débordements et en règle générale, tout ce qui se rapporte aux textes.

Rubriques

Ombre portée sur le texte

La propriété text-shadow, comme nous nous en doutons offre la possibilité de créer une ombre portée sous le texte de contenu sur lequel elle est appliquée. La propriété text-shadow ajoute une ou plusieurs ombres sur le texte. Il est possible de spécifier les décalages de l'ombrage, la couleur et sa zone de flou. Ces effets s'appliquent dans l'ordre spécifié et peuvent ainsi se recouvrir, mais ne couvrirons jamais le texte lui-même. L'ombrage n'affecte pas la taille de la boîte de texte. Il est également possible d'ajouter plusieurs ombres simultanément en les séparant par une virgule. La première ombre s'applique alors juste sous le texte et les autres sont rendues en dessous, sans jamais superposer le texte.

Réglages sur les ombres portées

Une ombre est créée à partir de quatre paramètres trois longueurs et une couleur où les valeurs correspondent à :

  • Décalage horizontal obligatoire : une valeur positive décale l'ombre vers la droite, une couleur négative décale l'ombre vers la gauche ;
  • Décalage vertical obligatoire : une valeur positive décale l'ombre vers le bas, une couleur négative décale l'ombre vers le haut ;
  • Valeur de flou optionnel : une valeur de 0 donne une ombre nette, une valeur positive provoque un flou glaussien, les valeurs négatives sont interdites ;
  • Couleur optionnel : toutes les définitions des couleurs sont autorisées mot-clé, hexadécimal, fonctions avec ou sans alpha, la couleur peut aussi être écrite avant les trois autres paramètres.
Ombre portée sur le texte. 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Ombre portée sur le texte</title>
      <style>
         body { background-color: bisque; }
         p { 
            background-color: burlywood; color: rgba(32, 0, 0, 0.9);
            font: bold 2.2em Arial, sans-serif; text-shadow: 0 -1px 0 lightgray, 1px 1px 7px;
            box-shadow: 2px 2px 7px; padding: 7px; margin: 5px; border-radius: 0.4em;                            
         }
      </style>
   </head>

   <body>
      <p>Une ombre portée sur tout le texte du paragraphe.</p>
   </body>
</html>

Les propriétés de texte

Outre les propriétés connues de CSS2.1 expliquées dans le chapitre précédent, le CSS3 propose notamment de nouvelles méthodes pour contrôler les débordements au sein des blocs de textes. Voici un rapide aperçu de ces propriétés.

white-space = text-wrap + text-space-collapse

Présente dans la norme CSS2.1, la propriété white-space permet de préciser la façon dont les espaces présents dans le code source sont gérés. Les valeurs possibles sont :

  • normal : c'est la valeur par défaut. Elle permet un retour à la ligne classique, et annule les espaces multiples présents dans le code source.
  • pre : les multiples espaces sont affichés et des lignes sont créées uniquement si des sauts de lignes sont présents dans le code source. Sans sauts de lignes présents, le texte s'affichera sur une ligne unique.
  • nowrap : les multiples espaces et les retours à la ligne sont annulés. Le texte est alors écrit sur une seule ligne.
  • pre-wrap : c'est la combinaison des valeurs pre et normal. Les multiples espaces sont affichés, les retours à la ligne sont effectués s'ils sont présents dans le code, et des lignes sont créées classiquement si le texte est plus grand que son conteneur.
  • pre-line : équivaut à pre-wrap sauf que les multiples espaces sont annulés.
Nouvelles propriétés

En CSS3 deux nouvelles propriétés permettent d'affiner ce réglage : text-wrap et text-space-collapse :

  • text-wrap : permet de spécifier la façon dont les sauts de lignes sont gérés :
    • normal : les sauts de lignes sont effectués au niveau des points de ruptures classiques.
    • none : aucun saut de ligne n'est créé, le texte est écrit sur une ligne unique
    • avoid : aucun saut de ligne n'est créé, sauf si des points de ruptures autres que ceux classiques sont présents. Oui, c'est assez flou ...
  • text-space-collapse : permet de spécifier la façon dont les espaces présents dans le code source sont gérés :
    • collapse : les espaces blancs multiples et les tabulations sont regroupés en caractère espace blanc unique.
    • preserve : les espaces blancs multiples et les tabulations sont conservées, tout comme les sauts de lignes manuels.
    • preserve-breaks : les espaces blancs multiples et les tabulations sont regroupés en un caractère espace blanc unique, mais les sauts de lignes manuels sont conservés.
La propriété white-space fonctionne donc à présent comme le raccourci de ces deux propriétés, dont voici le tableau d'équivalence :
white-space text-wrap text-space-collapse
normal normal collapse
pre none preserve
nowrap none collapse
pre-wrap normal preserve
pre-line normal preserve-breaks
Cas d'utilisation

Voici les différents cas d'utilisation de white-space, sur un paragraphe avec retour à la ligne dans le code source. Notez bien les espaces présents en début et fin de paragraphe ainsi qu'à la suite du mot contrôler, cela a une influence sur le rendu final.

Gestion des espaces 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les modèles de boîte</title>
      <style>
         body { background-color: bisque; }
         p { 
            width: 200px; padding: 5px;  border: 1px solid brown;  box-shadow: 3px 3px 7px gray;
            background-color: burlywood;  color: brown;  white-space: normal;
         }
      </style>
   </head>

   <body>    
      <p>
         Ce module propose de nouvelles méthodes pour contrôler 
         les débordements au sein des blocs de textes.
      </p>
   </body>
</html>

text-overflow

La propriété text-overflow détermine la façon de traiter un texte lorsqu'il déborde de son parent, notamment lors de l'utilisation conjointe avec white-space. Le texte doit avoir une valeur d'overflow différente de visible. Les valeurs possibles sont les suivantes :

  • clip : c'est la valeur par défaut. Le texte est purement et simplement rogné aux limites de son parent. Le texte qui déborde est donc invisible.
  • ellipsis : le texte est également coupé, mais des points de suspension ( ... ) apparaissent, afin de signaler que le texte affiché n'est pas complètement visible.
Attention : text-overflow ne fonctionne que si les lignes dépassent vers la droite du conteneur, et non vers le bas. Il est donc impossible d'utiliser cette règle sur un bloc de plusieurs lignes pour que les points de suspension s'affichent dès que la hauteur de l'élément parent devient trop petite.
Le texte dépasse les capacités du bloc 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les modèles de boîte</title>
      <style>
         body { background-color: bisque; }
         p { 
            overflow: hidden;  text-overflow: ellipsis;  width: 210px;   height: 120px;  padding: 7px; 
            background-color: burlywood;  text-align: justify;   color: brown;   border: 1px solid brown;   box-shadow: 3px 3px 7px gray;
         }
      </style>
   </head>

   <body>    
      <p>
         Un simple paragraphe qui comporte du texte relativement long qui dépasse 
         les capacités de la boîte. Remarquez la présence de ce lien un peu long :
         <a href="" title="http://www.choixdusite.fr/photos/lesmeilleures/">
            http://www.choixdusite.fr/photos/lesmeilleures/
         </a>
      </p>
   </body>
</html>
Gardez bien à l'esprit que text-overflow à lui tout seul ne coupe rien ; il ne sert qu'à donner une indication des points de suspension, par exemple sur un texte déjà coupé (via overflow: hidden généralement).
overflow-wrap = word-wrap

La propriété overflow-wrap est strictement équivalente à la propriété CSS2.1 word-wrap. Elle permet de gérer la façon dont les mots trop longs sont affichés au sein de leur parent. Pour cela, nous disposons de deux valeurs.

  • normal : les mots trop longs peuvent déborder de leur conteneur si celui-ci est trop petit, sauf si overflow: hidden est spécifié.

  • break-word : un saut de ligne est effectué arbitrairement au milieu des mots trop longs. Cependant, aucun trait d'union n'est ajouté, la césure n'est pas prise en charge. 

    <!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les modèles de boîte</title>
      <style>
         body { background-color: bisque; }
         p { 
            overflow-wrap: break-word;  width: 210px;   padding: 7px; 
            background-color: burlywood;  color: brown;   border: 1px solid brown;   box-shadow: 3px 3px 7px gray;
         }
      </style>
   </head>

   <body>    
      <p>
         Voici un lien un peu long : <a href="">http://www.choixdusite.fr/photos/lesmeilleures/</a>
      </p>
   </body>
</html>
hyphens

C'est sans doute la règle la plus prometteuse concernant la gestion des textes. En effet, la propriété hyphens permet d'activer la césure automatique des mots en fin de ligne par l'ajout de traits d'union (dans la majorité des langues). Cette gestion intelligente de l'affichage des paragraphes permet une aide à la lecture non négligeable, notamment sur des textes justifiés. Cette règle accepte trois valeurs :

  • none : c'est la valeur par défaut. Pas de césure.
  • auto : la césure automatique est effectuée en fonction de la langue de la page.
  • manual : la césure est effectuée seulement si un trait d'union conditionnel, tel &shy;, est présent dans un mot.
Lorsque la césure est active, les mots trop longs sont également coupés afin d'éviter le débordement. La règle overflow-wrap (word-wrap) devient alors secondaire.

Plusieurs colonnes pour le texte

CSS 3 offre la possibilité de présenter un texte sur plusieurs colonnes, à l'instar des journaux papiers, via column et ses propriétés dérivées. Ces différentes propriétés peuvent être scindées en trois parties fonctionnelles :

Le premier groupe de propriétés définit le nombre et la taille des colonnes :
  • column-width : détermine la largeur optimale de nos colonnes.
  • column-count : fixe le nombre de colonnes à créer.
  • columns raccourci de column-count et column-width : nombre de colonnes et éventuellement largeur de chaque colonne.
  • column-min-width : largeur minimale de chaque colonne.
  • column-width-policy : le mode d'affichage des colonnes (valeurs flexible, strict ou inherit).
Le second groupe gère ce qu'il y a entre les colonnes :
  • column-gap : distance entre chaque colonne. Cet espace s'ajoute de part et d'autre de la limite de colonne. Ainsi deux colonnes de 145px de large avec un espace de 10px occupent une largeur de 145+10+145 soit 300px.
  • column-rule : ajoute une séparation visuelle entre les colonnes. L'utilisation est la même que celle des bordures : il faut absolument définir une couleur, un style et une taille séparés par des espaces. C'est la notation raccourcie des propriétés repectives column-rule-color, column-rule-style et column-rule-width. Cette séparation se place au centre de la marge définie avec column-gap et n'en augmente pas la taille.
Enfin, le dernier groupe permet de gérer plusieurs colonnes :
  • column-span : permet d'étendre un élément sur plusieurs colonnes. Les valeurs possibles sont none ou all. Lorsqu'un élément est étendu sur plusieurs colonnes, le contenu qui précède est automatiquement réparti entre les colonnes avant l'affichage de cet élément.
  • column-fill : gère la méthode de remplissage des colonnes. Les valeurs sont balance ou auto. Soit le contenu est réparti équitablement entre les colonnes, soit non. Cette propriété ne fonctionne qu'avec un média paginé comme pour l'impression d'un document.
  • column-break-befor, column-break-after, column-break-inside : ajoute un saut de colonne avant, après ou au sein de l'élément. Permet par exemple de positionner un titre toujours en haut d'une colonne.
Attention, column-width est la largeur optimale des colonnes ce qui signifie que le navigateur ne suis pas forcément cette règle. Par exemple, si la valeur de column-width n'est pas un multiple de la taille de l'élément, la valeur choisie est le mutiple inférieur. Dans les faits, un élément de 300px de large avec la règle column-width: 120px ; crée un élément de deux colonnes de 150px, au lieu de deux colonnes de 120px et d'un espace vide de 60px. La règle column-count: 2 ; produit donc le même résultat !
Gestion des colonnes

La propriété columns permet d'écrire l'une ou l'autre des propriétés. Ainsi, columns: 120px ; ou columns: 2 ; sont tout à fait valides. Attention, si les deux valeurs sont définies, column-count sera considéré comme le nombre maximal de colonnes à créer. Ainsi, en reprenant l'exemple précédent, columns: 100px 2 ; crée deux colonnes, bien que 100px permettrait d'en créer trois.

L'affichage de données en multicolonnes pose de réels soucis d'accessibilité sur écran. Par exemple, si les colonnes sont plus hautes que la hauteur visible par l'utilisateur, celui-ci, arrivé en bas d'une colonne, est obligé de remonter en haut pour continuer sa lecture. Notre conseil est de ne pas utiliser les colonnes sur de trop grandes hauteurs.
Le texte sur deux colonnes 

<!DOCTYPE html>
<html lang="fr"> 
   <head>
      <meta charset=UTF-8>
      <title>Multiple colonnes</title>
      <style>
         body { background-color: bisque; font-weight: bold; }
         p { 
            -webkit-column-count: 2; -webkit-column-gap: 30px; -webkit-column-rule: 1px dotted burlywood; 
             text-align: justify; color: brown; font-size: 1em; 
         }
         p::first-letter { float: left; font-size: 4.4em; margin: -11px 5px -11px 0; }
      </style>
   </head>

   <body>
      <p>
         La propriété columns permet d'écrire l'une ou l'autre des propriétés. Ainsi, columns: 120px ou columns: 2 sont 
         tout à fait valides. Attention, si les deux valeurs sont définies, column-count sera considéré comme le nombre
          maximal de colonnes à créer. Ainsi, en reprenant l'exemple précédent, columns: 100px 2 crée deux colonnes, 
          bien que 100px permettrait d'en créer trois. L'affichage de données en multicolonnes pose de réels soucis 
          d'accessibilité sur écran. Par exemple, si les colonnes sont plus hautes que la hauteur visible par l'utilisateur, 
          celui-ci, arrivé en bas d'une colonne, est obligé de remonter en haut pour continuer sa lecture. Notre conseil
          est de ne pas utiliser les colonnes sur de trop grandes hauteurs.
      </p>
   </body>
</html>

Les transformations

Et si j'inclinais ce bandeau de titre, ce serait pas mal non ? Vous vous êtes sûrement posé cette question, et vous vous êtes aussi sûrement rué vers votre logiciel de traitement d'images pour en produire le résultat, ou bien alors vous êtes un gourou de JavaScript et de Canvas. Ce temps là est révolu car tous les navigateurs implémentent correctement les transformations 2D. Et nous allons le voir, incliner un élément quelconque de la page est un jeu d'enfants. De plus, le fait d'utiliser CSS pour effectuer des modifications d'ordre graphique permet à nos pages de garder toute leur sémantique.

Rubriques

Propriété transform

La propriété transform permet de transformer un élément dans l'espace. Les transformations applicaples sont : le translation, la rotation, l'inclinaison et l'échelle. Nous allons détailler chacune de ces transformations et voir que nous pouvons bien entendu en utiliser plusieurs simultanément. Comme beaucoup de notation CSS, il existe une notation raccourcie permettant le cumul de plusieurs règles.

Par défaut, les éléments subissant une transformation se comportent comme s'ils étaient positionnés en position: relative ; car l'espace libéré par leur transformation n'est pas comblé et l'élément transformé se retrouve dans un calque superposé au reste de la page. Dans la version 2D, la propriété transform peut prendre les valeurs suivantes sous forme de fonctions avec leur paramètres.

translateX, translateY, translate

Les fonctions translate(), translateX() et translateY() effectuent une translation verticale, horizontale ou combinée. Cette transformation n'est vraiment utile qu'en association avec une autre transformation car le résultat obtenu est équivalent à un déplacement en position relative.

.transformation {  transform: translateX(150px);  }
.transformation {  transform: translateY(2em);  }
.transformation {  transform: translate(150px, 2em);  }
rotate

La fonction rotate() est l'une des transformations les plus attendues, elle permet une rotation dans le plan de la page dans le sens horaire. L'utilisation de l'unité deg est alors toute désignée ou en radian rad. La nouvelle unité turn semble intéressante mais son implémentation est encore très limitée.

.transformation {  transform: rotate(45deg);  }
skewX, skewY, skew

Les fonctions skewX() et skewY() correspondent à l'inclinaison de l'image horizontalement et verticalement. La fonction raccourcie skew() modifie ainsi la perspective de l'élément en tirant sur ses coins de manière à obtenir au final une forme parallélépipédique. La première valeur concerne l'axe des X, la seconde l'axe des Y.

.transformation {  transform: skewX(-25deg);  }
.transformation {  transform: skewY(12deg);  }
.transformation {  transform: skew(-25deg, 12deg);  }
scaleX, scaleY, scale

La fonction scale() agrandit ou réduit les dimensions d'un élément selon un ratio : une valeur inférieure à 1 aura pour conséquence de rapetisser l'élément, un chiffre supérieur à 1 va l'agrandir. Par contre, la place occupée par le flux demeure identique : si l'élément est agrandi, ses frères ne seront pas poussés en conséquence.

.transformation {  transform: scale(0.5);  } // réduction de l'élément de moitié
.transformation {  transform: scale(2, 0.5);  } // doubler l'élément suivant l'axe des X et le réduire de moitié suivant l'axe des Y
Notez que comme toutes les autres techniques de transformation, la fonction scale() peut être cumulée avec les propriétés de transitions afin de créer des effets lors du survol de la souris, par exemple. Petite astuce intéressante : en spécifiant une valeur -1 à l'un des axes - fonction scaleX() ou fonction scaleY() - l'élément sera retourné comme dans un miroir.
Quelques transformations sur un texte et sur une image 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les transformations</title>
      <style>
          body {  background: darkolivegreen; }
          h1 { -webkit-transform: rotate(-5deg) skewX(10deg); color: greenyellow; text-shadow: 2px 2px 5px black; }
          img { 
             -webkit-transform: translate(40px, -50px) rotate(-5deg) skewX(10deg) scale(0.7, -0.7); 
             border-radius: 10px; box-shadow: 5px 5px 40px; 
          } 
      </style>
   </head>

   <body>    
      <h1>Exemples de transformations</h1>
      <img src="Mésange-noire.jpg">
   </body>
</html>

transform-origin

Dans tous les exemples vus précédemment, la transformation avait pour origine le centre de l'élément transformé. Il est possible grâce à la propriété transform-origin de choisir un autre point de référence pour appliquer la transformation.

Les valeurs acceptée pour cette propriété sont :
  • un pourcentage,
  • une longueur,
  • left, center, right pour la valeur horizontale,
  • top, center, bottom pour la valeur verticale.
.transformation {  transform-origin: 25% 25%;  }
.transformation {  transform-origin: top left;  }

Les transformations 3D

La propriété transform a été étendue à la troisième dimension afin de transformer les éléments sur les trois axes, le nouvel axe Z étant dirigé vers l'utilisateur. De nouvelles propriétés ont été ainsi ajoutées pour régler les problèmes liés à la projection sur le plan d'un espace tridimensionnel.

Voyons les ajouts pour la propriété transform :
  • Translation :
    • translateZ(z) : translation sur l'axe Z, les valeurs négatives éloignent l'élément et les positives le rapprochent.
    • translate3d(x, y, z) : translation suivant le vecteur désigné par (x, y, z).
  • Rotation :
    • rotateX(x), rotateY(y), rotateZ(z) : rotations autour de l'axe spécifié dans le sens horaire.
    • rotate3d(x, y, z, angle) : rotation autour de l'axe défini par le vecteur (x, y, z) ramené à un vecteur unitaire.
  • Inclinaison :
    • Il n'y a pas d'inclinaison 3D.
  • Echelle :
    • scaleX(x), scaleY(y), scaleZ(z) : appliquent un facteur d'échelle sur l'axe spécifié.
    • scale3d(x, y, z) : applique un facteur d'échelle selon les trois axes.
  • Perspective :
    • perspective(n) : spécifie la perspective en pixels (voir propriété ci après).

Perspectives

La propriété perspective permet de définir la perpective en vue 3D. La définition de cette proprité est indispensable pour obtenir un rendu 3D. Une vue 3D peut se schématiser par une pyramide dont le sommet est situé au niveau de l'oeil de l'utilisateur et dont les arêtes intersectent les coins de la zone visible le viewport.

L'application de la propriété perspective permet donc de définir la distance schématique entre utilisateur et la scène 3D. Plus cette distance est grande, plus l'utilisateur est éloigné de la scène et donc moins l'effet 3D est important. A l'inverse, une valeur plus petite rapproche l'utilisateur de la scène. Avec des valeurs trop petites <100px, certains navigateurs ne font plus le rendu des éléments. Une valeur de 500px semble être un bon début pour se faire une idée des effets 3D engendrés par les transformations.
La scène

La propriété perspective peut s'appliquer à un objet parent, appelé couramment scène. Les objets enfants subissent cette perspective. Elle peut aussi être précisée comme une valeur de la propriété transform grâce à la fonction perspective(). Cette syntaxe particulière laisse la possibilité de définir une perspective différente pour des objets de la même scène.

Photo avec une perspective en 3D 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les transformations</title>
      <style>
          body {  background: darkolivegreen; }
          img { 
             -webkit-transform: perspective(1000px) rotateX(45deg) translate(20px, -50px) skewX(5deg);  
             border-radius: 10px; box-shadow: 0 20px 70px; 
          }
      </style>
   </head>

   <body>    
      <img src="Mésange-noire.jpg">
   </body>
</html>
perspective-origin

La propriété perspective-originr> permet de définir le centre de projection de la perspective, c'est-à-dire l'endroit où se rejoignent les lignes de fuites de la scène 3D. La valeur par défaut est 50% 50%, c'est-à-dire le milieu de l'élément sur lequel elle est appliquée. Il est possible de définir l'origine soit avec des distances, soit avec des mots-clés (top, bottom, ...), soit en pourcentage par rapport à la dimension de l'objet scène.

transform-style

La propriété transform-style porte assez mal son nom. Elle est cependant indispensable pour représenter une scène 3D composée de plusieurs éléments imbriqués. Elle permet d'indiquer si une transformation 3D est propagée aux enfants. Deux valeurs sont possibles pour cette propriété, flat à plat est la valeur par défaut et preserve-3d, qui permet cette propagation.

backface-visibility

La propriété backface-visibility dont le nom signifie visibilité de la face arrière permet de spécifier une transformation 3D. Par défaut, la valeur est visible (hidden sinon) et donc les deux faces de l'objet 3D seront représentés pas en même temps bien entendu !.

Transitions et animations

Jusqu'à présent, de nombreux essais ont été effectués pour dynamiser une page web et interagir avec l'utilisateur, grâce aux possibilités offertes par CSS2.1. Cela se limite principalement à l'utilisation des pseudo-classes :hover, :focus ou encore :active, l'exemple typique étant le changement de l'image d'arrière plan d'un lien au sein d'un menu. Combien d'intégrateurs en ont rêvé : animer les pages web uniquement à l'aide des styles CSS, sans apport de JavaScript. Grâce aux dernières évolution du langage CSS3, il est désormais possible de réaliser des transitions basiques dans les navigateurs récents.

Rubriques

Le principe de base d'une transition CSS3 est de permettre un passage en douceur de l'ancienne vers la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché :

Précédemment, ce genre de comportement n'était possible qu'avec l'usage de JavaScript. Ce nouveau module issu de CSS3 permet dorénavant de s'en affranchir au profit exclusif des feuilles de style. C'est exactement ce que propose les deux modules de CSS3 que nous allons parcourir : effectuer des transitions ou animer de manière plus complexe des propriétés entre deux états CSS. Libre à nous ensuite de déclencher ces transitions/animations avec des événements CSS, avec une temporisation ou par le biais de JavaScript.

Nous verrons tout d'abord comment utiliser les transitions pour passer d'un état à un autre, puis nous essaierons d'appréhender les propriétés d'animation qui, avec votre imagination, vous permettrons de vous affranchir des frameworks JavaScript ou encore du très répendu plugin Flash.

Les transitions

Une transition CSS est un ensemble de propriétés qui définissent une interpolation temporelle d'une ou plusieurs propriétés CSS entre deux états de celles-ci. Pour faire plus simple, une transition anime le changement d'état entre deux valeurs différentes d'une propriété CSS.

Disparition progressive de la photo 

<!DOCTYPE html>
<html lang="fr">   
   <head>
      <meta charset=UTF-8>
      <title>Les transitions</title>
      <style>
          body {  background: darkolivegreen; }
          img { opacity: 1; }
          img:hover { opacity: 0; transition: opacity 3s linear; }
      </style>
   </head>

   <body>    
      <img src="Mésange-noire.jpg" title="L'image disparait progressivement">
   </body>
</html>
Dans l'exemple ci-dessus, lors du survol d'une image, celle-ci disparaît progressivement. Pour cela, nous utilisons la propriété raccourcie transition qui modifie la propriété opacity en trois secondes grâce à une interpolation linéaire, mais nous allons voir cela en détail.
Règles minimales

Normalement, pour définir une nouvelle transition animée, il est nécessaire de préciser au minimum deux composantes :

  1. la (ou les ) propriété(s) à animer (transition-property) ;
  2. la durée de l'animation (transition-duration).
transition-property

La propriété transition-property permet de définir la propriété qui sera animée lors de la transition. Les valeurs possibles sont :

  • all valeur par défaut : toutes les propriétés animables toutes celles qui peuvent être définies par une valeur numérique.
  • none : aucune transition.
  • Une ou plusieurs propriétés animables séparées par une virgule.
transition-property: color, width ;
Attention, certaines implémentations limitent l'exécution d'une transition à des éléments dont l'unité ne change pas. Par exemple, il n'est pas possible d'animer une marge de 10% à 800px car les unités diffèrent. Il en est de même pour les valeurs fixées à auto, il existe cependant des astuces pour obtenir le résultat escompté. Citons par exemple l'utilisation des transformation 2D à l'aide de la valeur scale (échelle), ou encore la propriété max-height en lieu et place de height.
transition-duration

Cette propriété définit tout simplement la durée totale de la transition exprimé en secondes (s) ou en millisecondes (ms). La valeur par défaut est 0 seconde ce qui ne provoque aucune transition lors du changement d'état. Si plusieurs propriétés ont été définies à l'aide de transition-property, il est possible de préciser leurs valeurs en les séparant d'une virgule.

transition-duration: 150ms, 3s ;
transition-timing-function

Cette propriété définit la progression ou l'évolution de la vitesse de transition. Une fonction mathématique va permettre le calcul des différentes valeurs interpolées lors de la transition, c'est cette fonction que nous devons choisir pour notre transition.

Il existe des raccourcis vers des fonctions prédéfinies mais aussi des fonctions permettant de définir plus finement cette évolution. Deux évolution sont disponibles : l'interpolation par courbe de Bérier et l'interpolation par palier, bien que celle-ci soit encore peu déployée.
cubic-bezier

La fonction cubic-bezier(xP1, yP1, xP2, yP2) permet de définir une courbe de Bézier décrivant la portion de transition effectuée en fonction du temps écoulé. Cette courbe est décrite par quatre points :

  1. le 1er point est le point de départ.
  2. le 2ème point définit la direction de la courbe partant du 1er point.
  3. le 3ème point définit la direction de la courbe arrivant au 4ème point.
  4. le 4ème point est le point d'arrivée.
Nous pouvons représenter cette courbe et ses points la définissant dans un diagramme ayant pour ordonnée le pourcentage de transition effectuée (ramenée à 1) et en abscisse le temps écoulé, lui aussi ramené à 1.

Dans cet exemple, pour un temps écoulé de 30%, la transition est effectuée à 10% et à 50% du temps et la transition en est à 60%. Cela provoque donc un effet d'accélération de la transition après un départ lent. Inversement, à 65% du temps la transition est effectuée à 85%, nous avons donc un ralentissement de la transition vers la fin. Cette courbe dont la fonction est cubic-bezier(0.6, 0.1, 0.15, 0.7) se définit en CSS par les coordonnées dans le repère unitaire des points P1 et P2.

La spécification précise que les valeurs x doivent être comprises entre 0 et 1 cela paraît logique, nous ne savons pas encore remonter le temps... alors que les valeurs y sont libres possibilités d'avoir des valeurs négatives. Des mots-clés ont été prédéfinis pour représenter les courbes les plus couramment employées, les voici avec les valeurs de courbes de Bézier équivalentes :

  • linear valeur par défaut : vitesse constante sur toute la durée de l'animation ; 
    transition-timing-function: linear;
transition-timing-function: cubic-bezier(0, 0, 1.0, 1.0);
  • ease : rapide sur le début et ralenti sur la fin ; 
    transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  • ease-in : lent sur le début et accélère sur la fin ; 
    transition-timing-function: ease-in;
transition-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0);
  • ease-out : rapide sur le début et décélère sur la fin ; 
    transition-timing-function: ease-out;
transition-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
  • ease-in-out : le départ et la fin sont lents ; 
    transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
  • Il est bien entendu possible de définir nos propres courbes. Voici ce que nous pouvons changer sur l'exemple précédent : 
    img:hover { opacity: 0; transition: opacity 3s cubic-bezier(0, 1.0, 1.0, 1.0); }
steps

Pour terminer sur les fonctions de transition, il est également possible de définir l'ajustement d'une transition à l'aide d'une fonction par palier. Cette fonction nommée steps() permet de convertir une transition linéaire en paliers. La transition est alors découpée en n phases. Par exemple, la fonction steps(4) permet de générer trois états intermédiaires entre l'état initial et l'état final. Il n'y a aucune animation entre les états. Les mots-clés start et end peuvent être ajoutés en deuxième paramètre et nous indiquent si l'animation débute instantanément ou après le premier palier. Si ce deuxième paramètre est omis, c'est la valeur end qui est utilisée.

En reprenant l'exemple précédent, voici ce que nous pouvons écrire : 
img:hover { opacity: 0; transition: opacity 3s steps(4, start); }
transition-delay

Il reste une propriété simple relative aux transitions, il s'agit de la propriété transition-delay. Cette propriété permet un départ retardé de la transition. Si la valeur précisée est positive, alors le départ de la transition sera décalé d'autant. Si cette valeur est néative, l'animation de la transition débute immédiatement mais depuis l'état interpolé correspondant au delta de temps indiqué en valeur négative. La durée totale de l'animation est diminuée de cette valeur.

Par exemple, dans le cas d'une interpolation de distance sur une transition de quatre secondes avec transition-delay: -2s;, l'animation va débuter immédiatement mais au milieu de la transition et non pas du point de départ de celle-ci. L'animation totale dure alors deux secondes.
transition

Comme pour beaucoup de propriétés composées en CSS, il existe un raccourci qui permet de renseigner la plupart des valeurs avec une seule instruction. Il faut donc saisir les différentes valeurs séparées par un espace (la première valeur temporelle correspond à la durée, la deuxième au délai).

img:hover { opacity: 0; transition: opacity 5s ease-in-out 2s; }

Les animations

Nous venons de voir qu'il était possible de faire des transitions sur les éléments de nos pages web. Cela nous restreint tout de même à des animations simples, les transitions ayant comme limitation de n'avoir qu'un état de début et de fin entre lesquels l'animation a lieu. Le contrôle des transitions est lui aussi très limité : le déclenchement sans utilisation de JavaScript se limite presque exclusivement aux interactions de souris ou de focus. C'est donc surtout pour avoir un contrôle plus abouti que les animations CSS ont été proposée.

Définies comme une extension du module Transitions, les animations CSS apportent une dimension supplémentaire en introduisant le concept d'étapes et de nombre d'itérations. Avec les animations, il est en effet possible de définir autant d'états différents que nécessaires. Ces états sont appelés des keyframes qui se traduisent litttéralement par images clés mais dont la traduction états clés nous paraît plus appropriée. Il est également possible de préciser la répétition de l'animation ainsi que son état final et son délai de déclenchement.

@keyframes

C'est cette règle qui va permettre de définir les différentes étapes de l'animation. Les étapes de l'animation vont être identifiées par un pourcentage ou l'un des mots clés from qui équivaut à 0% et to qui équivaut à 100%. Pour chaque étape, comme lors d'une transition simple, nous allons définir les règles qui subissent une modification.

  • Il nous reste ensuite à donner un nom à cette @keyframes pour l'associer avec une animation. Voici l'exemple d'une règle définissant les étapes d'une transition classique. Dans l'exemple qui suit, nous définissons deux états clés permettant la transition entre l'opacité totale et la transparence totale. Cette animation n'est toutefois pas encore appliquée. 
    @-webkit-keyframes disparition {
    0%      { opacity: 1; }
    100%  { opacity: 0; }
}
  • Si la valeur de l'une des propriétés à interpoler n'est pas présente à une étape, l'interpolation sera faite entre les valeurs connues. L'exemple qui suit introduit deux phases de changement de couleur associées à un fondu régulier étalé sur la totalité de l'animation. 
    @-webkit-keyframes disparition {
   0%     { opacity: 1; background-color: red; }
   50%   { background-color: blue; }
   100% { opacity: 0; background-color: yellow; }
}
  • Il est également possible de définir un même bloc de définitions pour plusieurs états en séparant les valeurs de ces états par des virgules : 
    @-webkit-keyframes bouger {
   0%, 100%  { margin-top: 0; }
   50%    { margin-top: 100px; }
}
animation-name, animation-duration

Pour apliquer une animation à un élément, il suffit de lui définir la propriété animation-name en précisant le nom de la @keyframes à utiliser puis à lui indiquer une durée avec la règle animation-duration. La propriété animation-name peut prendre comme valeur un ou plusieurs noms d'animation ou bien encore la valeur none pour par exemple annuler un héritage dans le cas d'utilisation des pseudo-classes. La propriété animation-duration quant à elle n'accepte que des durées positives.

@-webkit-keyframes disparition {
    0%      { opacity: 1; }
    100%  { opacity: 0; }
}
img { -webkit-animation-name: disparition; -webkit-animation-duration: 3s; }
L'effet obtenu n'est pas très impressionnant. Contrairement aux transitions, une animation débute lors du changement de la page et non pas uniquement lors d'un changement d'état. Mis à part cette particularité, l'animation n'apporte ici pratiquement aucune amélioration par rapport à une transition. Mais ce n'est qu'un début, voyons ce que nous pouvons ajouter comme paramètres à notre animation pour la rendre plus intéressante.
animation-iteration-count

La propriété animation-iteration-count définit le nombre de répétition de l'animation. C'est une chose impossible à réaliser avec les transitions. Il existe même le mot-clé infinite qui permet de répéter l'animation sans fin.

@-webkit-keyframes disparition {
    0%      { opacity: 1; }
    100%  { opacity: 0; }
}
img { 
   -webkit-animation-name: disparition; 
   -webkit-animation-duration: 3s; 
   -webkit-animation-iteration-count: infinite;
}
C'est déjà plus intéressant ! En revanche, le retour à l'opacité 0 est instantané ce qui n'est pas du plus bel effet. Mais bien entendu, il existe une propriété prévue pour pallier ce problème.
animation-direction, animation-delay

La propriété animation-direction permet de définir si la répétition de l'animation se déroule normalement ou si elle alterne avec l'animation inverse. Les deux valeurs possibles pour cette propriété sont normal valeur par défaut et alternate.

@-webkit-keyframes disparition {
    0%      { opacity: 1; }
    100%  { opacity: 0; }
}
img { 
   -webkit-animation-name: disparition; 
   -webkit-animation-duration: 3s; 
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
}
Nos images s'animent bien dans un cycle sans fin en apparaissant puis disparaissant. Comme pour les transitions, il est également possible de définir un départ retardé de l'animation avec la propriété animation-delay qui prend comme valeur une durée. Si la valeur est positive, alors l'animation débutera après n secondes, si la valeur est négative, l'animation débutera instantanément mais à partir de la position qu'elle aurait du avoir après n secondes. 
@-webkit-keyframes disparition {
    0%      { opacity: 1; }
    100%  { opacity: 0; }
}
img { 
   -webkit-animation-name: disparition; 
   -webkit-animation-duration: 2s; 
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
   -webkit-animation-delay: 2s
}
animation-fill-mode

Par défaut, une animation ne modifie pas les propriétés sur lesquelles elle s'applique avant le début (durant animation-delay) et après la fin de celle-ci. La propriété animation-fille-mode permet de modifier ce comportement. Les valeurs possibles sont :

  • none : comportement par défaut.
  • backwards : applique les propriétés définies dans l'état 0% avant le début de l'animation, y compris le délai.
  • forwards : applique les propriétés définies dans l'état final de l'animation une fois l'animation terminée (ce peut être 100% ou 0% si la valeur de animation-direction est alternate).
  • both : combinaison de forwards et backwards.
Il est donc souvent judicieux d'utiliser le mot clé forwards pour laisser le design identique à l'état correspondant à l'animation terminée.
animation-timing-function

Cette propriété est totalement identique à celle décrite dans le chapitre sur les transitions, à ceci près que la fonction sélectionnée s'applique à chaque portion de l'animation et non à l'animation totale. Il est possible de définir individuellement la fonction d'animation pour chaque phase de l'animation.

Notons tout de même les mots-clés step-start et step-end qui sont des raccourcis pour les valeurs steps(1, start) et steps(1, end). Ils ont pour effet de ne pas effectuer de transition entre deux étapes. Un exemple amusant de cette propriété avec la fonction steps(), que nous n'avons pas détaillée au chapitre précédent, est de faire un dessin animé à l'aide d'une image sprite.
animation

les propriétés d'animation n'échappent pas à la règle, il existe une notation racourcie dont voici la syntaxe :

animation: nom durée accélération delai répétition direction;

Les unités de décalage et de durée secondes: s sont obligatoires même pour la valeur zéro afin de pouvoir faire la distinction entre les valeurs de temps et de répétition dans la notation raccourcie.

@-webkit-keyframes disparition {
    0%      { opacity: 1; }
    100%  { opacity: 0; }
}
img:hover { -webkit-animation: disparition 3s ease-in-out 2s infinite alternate; }