Vous êtes ici > CSS Débutant | Premiers pas en CSS | Balises (x)html de base

Pour comprendre le fonctionnement du langage CSS, il est nécessaire d'avoir quelques notions en (x)html. Le html est un langage simple, fait de balises (du genre <tag>) qui ont toutes une fonction et un sens. C'est ce qu'on appelle la sémantique.

Respecter la sémantique, c'est améliorer l'accessibilité... et aussi le référencement. Cela dit, on ne perdra jamais de vue que l'humain passe avant les robots ! On fait un site pour des utilisateurs, pas pour le plaisir de se retrouver en tête de requêtes sur google.

Voici donc les quelques balises (x)html fondamentales à connaître pour comprendre la structure d'une feuille de style.

Balises (x)html de base

Sommaire

Balises les plus courantes

Document

<html></html> :
document html
<body></body> :
corps du document

Titres

<h1></h1> :
titre 1er niveau
<h2></h2> :
titre 2ème niveau
<h3></h3> :
titre 3ème niveau (... et ainsi de suite jusqu'à 6)

Éléments de texte

<p></p> :
paragraphe
<ul></ul> :
liste à puce
<ol></ol> :
liste numérotée
<li></li> :
élement d'une liste
<a href=""></a> :
lien hypertexte
<blockquote></blockquote> :
bloc de citation

Tableau

<table></table> :
tableau
<tr></tr> :
ligne du tableau
<th></th> :
cellule de légende de ligne ou de colonne
<td></td> :
cellule du tableau (colonne)

Structure et habillage

<div></div> :
définition de blocs, regroupement d'élements de type block
<span></span> :
habillage d'éléments de manière inline

Haut

html ou xhtml ? - Les Types de Documents (DocType)

Pour ceux qui se poseraient la question, la réponse est : c'est comme vous voulez...

Coder en html 4.01 ou en xhtml 1.0 revient au même, tant que vous n'exploitez pas de xml. Pas la peine de vouloir à tout prix coder en xhtml 1.0 parce que le zéro d'à côté vous l'a dit. Ces deux déclinaisons sortent du même moule : le html 4.

Mais si vous choisissez le xhtml 1.0, il vous faudra être plus attentif aux détails pour avoir un code valide :

Par exemple :

<p><img src="image.png" alt="" /></p>
<p><strong>Balises imbriquées</strong></p>

Le plus important est de faire le choix d'une DTD stricte plutôt que transitionnelle et d'en respecter les contraintes, c'est à dire de ne pas utiliser des balises ou attributs obsolètes ou dépréciés. C'est dans votre intérêt, car ces balises sont appelées à ne plus être interprétées par les navigateurs.

D'une façon générale, ces éléments sont dépréciés car ils sont remplaçables par des équivalents CSS.

Quelques balises et attributs dépréciés à ne pas utiliser

DTD strictes à déclarer en début de document html

html 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
xhtml 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Haut

Lectures complémentaires (et indispensables)

suivant suivant

Haut

Contact : pascale at mammouthland.net

Creative Commons License.

En cas de reproduction (partielle ou totale) de cet article, prière de faire un lien vers la page originale : http://css.mammouthland.net/balises-html.php