Contenu/structure/mise en page
Les attributs génériques
Avant même de décrire notre première balise, ouvrons une petite parenthèse.
La plupart des attributs définis par le langage HTML s'utilisent dans une balise spécifique. Mais il y a des attributs particuliers qui peuvent se retrouver dans presque toutes les balises que nous allons voir. Il s'agit des attributs génériques. Voici les 4 principaux :
id : identifie de façon unique l'élément dans lequel il se trouve.class : donne une saveur à un élément pour y appliquer une certaine mise en forme.style : donne une mise en forme spécifique à une balise.title : définit un titre à un élément XHTML. Le title s'affiche au passage de la souris.
La plupart de ces attributs vont servir à donner un sens à notre contenu, donc nous aider lors de l'ajout de la mise en forme des éléments.
Découpage sémantique
- Avant de commencer à composer une page Web, il faut faire le découpage sémantique de son contenu.
- C'est à dire se demander quel est le sens de chacun des éléments de contenu
- Où sont les paragraphes?
- Quel est le titre?
- Quels sont les sous-titres, les intertitres et les titres de section?
- Y a-t-il des éléments ayant un sens particulier : acronyme, définition, adresse, citation, liste ...
Structure de contenu
- Il y a plusieurs types de balises de contenu en fonction de la façon dont elles se comportent avec leur contenu.
- Nous verrons les balises de type en-ligne (in-line) et de type bloc (block).
- Une balise de type en-ligne s'intégrera dans un bloc de texte sans nécessairement changer la mise en page.
span, strong, em...
- Une balise de type bloc ajoutera un saut de ligne avant et après son contenu.
div, p, h1, h2, ul...
- On ne peut pas mettre une balise bloc dans une balise en-ligne, mais le contraire est possible.
Les balises span et div
- Les balises neutres
span (en-ligne) et div (bloc) sont parmi les plus utilisées.
- On dit qu'elles sont neutres parce qu'elle n'ajoutent aucun sens à l'élément qu'elles représentent.
- Bien qu'elles n'entraînent pas de changement visuel par elles-mêmes, elles peuvent être conjuguées avec le CSS pour produire un effet.
- La balise
div étant de type bloc, elle ajoute un saut de ligne avant et après son contenu.
Mise en contenu
- Bien que l'on puisse faire la majeure partie d'une mise en forme d'une page Web à l'aide des balises neutre
span et div, on utilisera certaines balises spécifiques.
- Ces balises sémantiques ajoutent une certaine mise en forme de base, mais il ne faut pas s'en préoccuper puisque l'on pourra la modifier plus tard à l'aide des CSS.
Balises de mise en contenu
p : Sert à définir un paragraphe
- Par défaut, elle ajoute un espace avant et après le contenu qu'elle définit
h1 à h6 : Sert à définir un titre (h pour header)
- Le chiffre indique le niveau du titre.
- Par exemple, le titre d'un ouvrage mis en page Web aura la balise
h1; les chapitres, la balise h2; les sections des chapitres, la balise h3; et les intertitres, la balise h4
- On doit utiliser le chiffre pour déterminer le sens du contenu, pas sa taille.
- Il existe d'autres balises de contenu, mais nous nous contenterons de celles-ci pour l'instant