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.

N'hésitez pas à nous faire part de votre avis sur cet article : 1 commentaire

Article lu fois.

L'auteur

Pascale Lambert

L'article

Publié le 23 juin 2010 - Mis à jour le 24 novembre 2010

Version PDF Version hors-ligne

ePub, Azw et Mobi

I. Balises (X)HTML de base▲

I-A. 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> : élément 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.

I-B. 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 :

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.

Par exemple :

Sélectionnez

<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

<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.

DTD strictes à déclarer en début de document HTML :

HTML 4.01

Sélectionnez

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0

Sélectionnez

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

I-C. Lectures complémentaires▲

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 23/06/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.