Vous êtes ici > CSS Débutant | Premiers pas en CSS | Balises HTML de base

Pour comprendre le fonctionnement du langage CSS, il est nécessaire d'avoir quelques notions en 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 HTML fondamentales à connaître pour comprendre la structure d'une feuille de style.

Balises 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
<strong></strong> :
met en gras
<em></em> :
met en exergue
<sup></sup> :
met en Xexposant
<sub></sub> :
met en Xindice

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

Quelques nouveautés HTML5

<header></header> :
en-tête
<section></section> :
section (dingue non ?)
<article></article> :
sous-section pour un article (de blog par exemple)
<nav></nav> :
bloc de navigation
<aside></aside> :
encart
<figure></figure> :
images et/ou vidéos
<footer></footer> :
pied-de-page

Attention avant de vous lancer tout de go dans le HTML5 ! Quelques précautions sont à prendre, notamment vis-à-vis des versions d'Internet Explorer antérieures à 9. Je vous recommande la lecture de cette excellente introduction au HTML5.

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... La seule chose sûre, c'est qu'il faut impérativement mettre un doctype (voir plus bas) sous peine de graves déconvenues.

Coder en HTML ou en XHTML revient au même, tant que vous n'exploitez pas de XML.

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

  • Toutes les balises doivent être fermées. Les non-fermantes devront donc comporter un slash avant la fermeture de la balise (exemple : <br />)
  • Toutes les balises doivent être écrites en minuscules
  • Tous les attributs doivent être entre guillemets
  • Les balises doivent être correctement imbriquées (ceci est valable dans tous les cas de toute façon).

Par exemple :

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

D'autre part il ne faut pas utiliser de balises ou d'attributs obsolètes ou dépréciés. C'est dans votre intérêt, car ces éléments sont appelées à ne plus être interprétées par les navigateurs.

D'une façon générale, ils 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

  • <center></center> (pour centrer)
  • <font></font> (pour les polices de caractères)
  • <strike></strike> (pour barrer du texte)
  • <s></s> (pour souligner du texte)
  • <applet></applet> (pour les applets java)
  • align
  • bgcolor
  • noshade
  • text
  • vlink

Doctype à déclarer en début de document html

(X)HTML 5

Même si le HTML 5 n'est pas implémenté par les navigateurs anciens, et même si vous n'utilisez pas les éléments HTML propres à HTML 5 vous pouvez mettre ce doctype :

<!DOCTYPE html>

Sinon, vous pouvez utiliser ceux qui suivent, mais il faut vraiment aimer se faire du mal...

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