Les standards web (II)
Après avoir définie ce qu’était les standards,leur utilité et leurs avantages dans l’article « Les standards web (I) » nous aborderons ici la syntaxe d’un document XHTML et l’utilisation du balisage sémantique.
Les 10 règles de la synthaxe XHTML
- Commencez votre page XHTML par l’indication du DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">- Indiquez l’espace de noms appropriés immédiatement après le DOCTYPE
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="fr">- Déclarez le type de contenu « Content-Type » dans une balise « meta »
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">- Tous les noms d’éléments et d’attributs sont écrits en minuscule
- Toutes les valeurs d’attributs sont entre apostrophes simples ou doubles
- Tous les attributs ont une valeur
- Toutes les balises sont refermées y compris les balises vides
<br />
- Pas de tirets doubles à l’intérieur d’un commentaire
- Les caractères inférieur (« < ») sont codés "<" et les caractères esperluète (&) sont codés &
- Utiliser les balises à des fins sémantique et non de présentation
Le balisage sémantique
Utiliser les balises pour structurer vos documents
Dans l’idéal, le XHTML devrait uniquement servir à la structure interne du document. La présentation est réservée aux feuilles de styles CSS. Un document bien structuré sera exploitable dans plusieurs agents d’affichage même si le CSS est désactivé.
Il faut oublier toutes les balises de présentation de type <font>, <b>, <i> et utiliser les balises en fonction de leur signification pour structurer son contenu.
Exemple:
<h1>Titre</h1>
<p>introduction</p>
<h2>Sous-titre</h2>
<p>texte</p>
Utiliser les balises pour leur sens (sémantique) et non pour le rendu quel peuvent vous apporter
Exemple:
<h1> signifie titre d’ordre 1 et non affichage du texte en gros
<li> signifie liste et non texte précédé d’une puce
<blockquote> signifie citation et non indenter le texte
Si aucune balise ne vous convient, utilisez les balises <span> et <div>
Évitez la surcharge de balises
… utilisez <span>, <div> et "id", "class"
Des pages légères économisent la bande passante et facilite la maintenance du code, vous avez donc tout intérêt à éviter l’excès de balises.
Les balises <span>, <div> permettent d’écrire du XHTML compact et d’appliquer CSS de façons approprié.
<span> définie du contenu au fil du texte
<div> définie du contenu au niveau bloc
« id » affecte un nom unique à un élément qui ne peut être utilisé qu’une seule fois dans la page.
« class » affecte un nom qui peut être utilisé sur plusieurs éléments différents et à plusieurs reprises dans la page.
Mes sources
- « Design Web : utilisez les standards » – Jeffrey Zeldman – Eyrolles
Pas de commentaire
S'abonner aux commentaires via RSS
(URL de trackback)