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 Donner une note à l'article (4.5)

Article lu   fois.

L'auteur

Site personnel

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

Liste de mes articles :
Principe des feuilles de style CSS - Commentez Donner une note à l'article (5)
Balises (X)HTML de base - 1 commentaire Donner une note à l'article (4.5)
Feuille de style CSS de base - Commentez Donner une note à l'article (3.5)
Mettre en forme un texte en CSS - Commentez Donner une note à l'article (4)
Gérer les marges en CSS - 5 commentaires Donner une note à l'article (4.5)
Résoudre les problèmes de marges en CSS - Commentez Donner une note à l'article (4)
Sélecteurs class et id - 3 commentaires Donner une note à l'article (5)
Mise en page full CSS - 4 commentaires Donner une note à l'article (4.5)
Bordures en CSS - 2 commentaires Donner une note à l'article (4.5)
Image de fond en CSS - 3 commentaires Donner une note à l'article (4.5)
Effets Rollover à l'aide de :hover - 2 commentaires Donner une note à l'article (4.5)
Aligner une image et du texte à l'aide de la propriété float - 1 commentaire Donner une note à l'article (4)
Listes à puces en image - 2 commentaires Donner une note à l'article (5)
Citations et retraits - Commentez Donner une note à l'article (4.5)
Concevez des boutons graphiques avec du CSS - 11 commentaires Donner une note à l'article (4.5)
Positionnez des images aux quatre coins d'une page web - 16 commentaires Donner une note à l'article (5)
Appliquez un effet de zoom sur une image avec les CSS - 1 commentaire Donner une note à l'article (4.5)
Zoomer une image façon thumbnail en CSS - 3 commentaires Donner une note à l'article (4.5)
Tableaux à bordures fines avec les CSS - 1 commentaire Donner une note à l'article (5)
  

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