Donner un sens au contenu

Général
p٭

Paragraphe

h1...h6٭
Titre
small Petit texte légal
sub Indice
sup Exposant
em Ajoute de l'emphase
strong Ajoute de la force
dfn Définition
abbr Abbréviation
cite Référence
q Citation courte
blockquote٭ Citation longue
address٭
Adresse
b Gras
i Italique
Révision
del Texte supprimé
ins Texte ajouté
s Texte erroné
Programmation
pre٭
Texte préformaté
code Code informatique
samp Exemple de résultat
var Variable

٭ Les balises accompagnées d'un astérisque sont des balises de type bloc. Les autres sont enligne.

Il faut garder à l'esprit que, peu importe la mise en forme par défaut de ces balises, il sera possible de la modifier à loisir avec le CSS.

Classes et identificateurs

Afin de donner un sens aux éléments qui se trouvent dans notre page, on a quelquefois la chance d'utiliser des balises appropriées. Mais souvent, celles-ci ne suffisent pas ou ne sont pas assez précises pour l'utilisation que l'on veut en faire.

class : Si l'élément peut revenir plusieurs fois dans la page.

Nous pouvons à ce moment-là ajouter à une balise quelconque une classe qui pourra en préciser le sens.

Par exemple, comme il n'existe pas de balise pub pour identifier une publicité dans une page, nous devrons nous résoudre à ajouter une classe "pub" à une balise img /.

Ex.: img class="pub" .../

Lorsqu'un élément est déjà accompagné d'une classe, il est possible d'en ajouter une autre DANS l'attribut class en les séparant par un espace.

Ex.: div class="article actualite".../div

id : Si l'élément ne peut paraître qu'une seule fois dans la page.

Certains éléments d'interface ont une grande importance, et ne sont présents qu'une seule fois par page.

Par exemple, contrairement aux articles ou aux publicités, l'en-tête, le pied de la page et le logo du site sont toujours seuls dans une page.

Pour identifier ces éléments importants de l'interface, on utilisera un autre attribut : le id. Dans une page, le même id ne peut revenir qu'une seule fois sous peine de rendre la page invalide ou d'avoir des résultats visuels inattendus.

Ex.: img id="logo" .../

Rien n'empêche de combiner la class et le id.

Ex.: div class="header" id="entetepage".../div

Notez qu'il est impossible et inutile de combiner plusieurs id comme on peut le faire avec une classe.

Les noms des classes et des id doivent être significatifs, et les normes de nomenclature vues précédemment s'appliquent ici aussi : seulement des lettres,des chiffres, des tirets ou des caractères de soulignement; doit commencer par une lettre.

Rappelons que, bien que l'utilité d'ajouter des significations aux éléments de la page peut sembler bien abstraite, nous allons concrétiser le tout plus tard en liant une mise en forme à chacun de ces sens.