Comment écrivez-vous votre code (X)HTML ?

Expliquez vos choix de syntaxe HTML

Le 2012-11-10 11:15:19, par Bovino, Rédacteur

Il existe deux types de normes pour écrire le code (X)HTML : le HTML (HTML 4 ou HTML5) et le xhtml (xhtml 1 ou HTML5).
Notez que HTML5 accepte aussi bien le standard HTML que xhtml.
La différence entre les deux réside dans le fait que xhtml se doit d'être conforme aux spécifications XML.

Différences principales entre les deux versions.

En xhtml, les balises et attributs doivent être en minuscules.

Si la portion de code suivante

Code :

1
2
3
4
5
6
<DIV ID="elementDIV">
    <UL CLASS="liste">
        <LI></LI>
        <LI></LI>
    </UL>
</DIV>

est valide en HTML, elle ne le sera pas en xhtml, pour lequel il faudra écrire

Code :

1
2
3
4
5
6
<div id="elementDIV">
    <ul class="liste">
        <li></li>
        <li></li>
    </ul>
</div>

En xhtml, les valeurs d'attributs doivent être entourées de quotes.

De la même manière,

Code :

1
2
3
4
5
6
<DIV ID=elementDIV>
    <UL CLASS=liste>
        <LI></LI>
        <LI></LI>
    </UL>
</DIV>

est valide en HTML, pas en xhtml.

En xhtml, tout attribut doit avoir une valeur.

Le code suivant

Code :

1
2
3
4
5
<SELECT>
    <OPTION VALUE=1>1</OPTION>
    <OPTION VALUE=2 CHECKED>2</OPTION>
    <OPTION VALUE=3>3</OPTION>    
</SELECT>

est valide en HTML mais devra être écrit en xhtml

Code :

1
2
3
4
5
<select>
    <option value="1">1</option>
    <option value="2" checked="checked">2</option>
    <option value="3">3</option>
</select>

En xhtml, toute balise doit être fermée.

Si en HTML, certaines balises n'ont pas besoin d'être fermées, xhtml impose que toute balise le soit (y compris les balises dites autofermantes).
Le code suivant est valide en HTML :

Code :

1
2
3
4
5
6
7
8
<P><IMG>
<DIV>
    <UL>
        <LI>Liste 1
        <LI>Liste 2
        <LI>Liste 3
    </UL>
</DIV>

mais devra s'écrire en xhtml

Code :

1
2
3
4
5
6
7
8
<p><img /></p>
<div>
    <ul>
        <li>Liste 1</li>
        <li>Liste 2</li>
        <li>Liste 3</li>
    </ul>
</div>

Notez que les différences ne sont pas liées à la structure du document mais juste à la façon d'écrire le balisage.
De même, pour autant que le doctype soit correctement renseigné, les deux syntaxes sont supposées produire le même rendu, c'est-à-dire que les navigateurs n'interprèteront pas le code à leur façon comme ils le font si le code n'est pas valide.

Si la syntaxe HTML permet d'éluder des parties jugées inutiles ou induites, le xhtml permet quant à lui d'avoir une syntaxe plus rigoureuse et donc d'éviter de potentielles erreurs de relecture du code.

Et vous ?
Quelle syntaxe privilégiez-vous ?
Pourquoi ce choix ?
Quels sont selon vous les avantages et inconvénients de chaque syntaxe ?
Avez-vous par le passé évolué d'une syntaxe à l'autre ou êtes-vous resté sur vos choix initiaux ? Pourquoi ?

N'hésitez pas bien sûr d'apporter vos compléments d'informations concernant les deux syntaxes !

Discussion forum

6 commentaires

Torgar
Rédacteur

Quelle syntaxe privilégiez-vous ?
J'ai toujours privilégié la syntaxe HTML conforme XML.

Pourquoi ce choix ?
Disons que ce choix c'est imposé de lui même. J'ai appris directement cette syntaxe en autodidacte il y a plus de six ans maintenant, donc je ne me suis même pas posé de question et mes cours m'ont confirmer dans mon choix.

Quels sont selon vous les avantages et inconvénients de chaque syntaxe ?
Tous n'est qu'une question de rigueur. La liberté qu'offre l'HTML permet des développements peut-être plus rapide et n'impose pas une grande rigueur. Alors qu'en XHTML, il faut bien respecter la syntaxe sinon les erreurs sont légions lors de la validation.

Un des inconvénients de l'HTML c'est que dans Notepad++, les balises non fermées ne sont pas bien gérées lors des replis de code. Mais bon, ceci est un problème indépendant du langage mais plus de l'éditeur.

Avez-vous par le passé évolué d'une syntaxe à l'autre ou êtes-vous resté sur vos choix initiaux ? Pourquoi ?
Je pense avoir déjà répondu mais pour être sûr, non je n'ai pas évolué, hormis le passage à la sémantique de l'HTML 5 mais toujours en conformité avec l'XML.

le 13/11/2012 à 9:53
Bonjour,
pour moi, ouvrir et fermer les balises, c'est une question de "politesse".
C'est comme dire "bonjour" en entrant, et "au revoir" en sortant.

C'est aussi (et surtout) une question de rigueur et de logique.

Pierre Desproges disait : "Une porte doit être ouverte, ou bleue."

Ca n'a pas de rapport, mais bon.

Plus sérieusement, l'informatique est basée sur une logique binaire : 0 ou 1, noir ou blanc, ouvert ou fermé.

Une syntaxe "laxiste" n'est qu'une incitation au chaos et à la confusion.
Il suffit de voir sur les forums DVP tous les messages "Ca (ne) marche pas ! je (ne) comprends pas ! "...
N.B. Là aussi le "ne" n'est pas nécessaire pour comprendre la phrase...
Il est juste obligatoire en "bon français".

Et surtout, cela suppose qu'on va laisser le navigateur décider où doivent être fermées les balises/instructions.
Si on commence à "accepter", "autoriser", "valider" n'importe quoi, on va juste réinventer Internet Explorer...

En conclusion, j'estime qu'une langue, qu'elle soit vivante ou informatique, se doit d'aller vers l'"enrichissement", et pas vers l'"apauvrissement" du language.

le 13/11/2012 à 10:30

Muchos

Membre expert

Attention : il y a une petite erreur dans le premier exemple xhtml :

Code html :

1
2
3
4
5
 
   <ul class="liste"> 
        <li></li> 
        <li></li> 
    </li>

Pour ma part, j'ai choisi xhtml strict pour débuter il y a bientôt deux ans. Puis html5 est devenu utilisable en production, amenant son lot de fonctionnalités, sa meilleure sémantique, sa simplicité.
À la base, je suis très "W3C". Je code donc toujours mon html5 dans l'esprit de xhtml . Néanmoins, je me réfère aussi de plus au travail du Whatwg. Dès lors, ce genre de code ne me choque plus (ni le validateur w3c) :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
  
<!-- liste --> 
<ul> 
	<li><a href="#en">et</a> 
	<li><a href="#rouge">noir</a> 
</ul> 
  
<!-- definition --> 
<dl> 
	<dt>2012 
	<dd>Fin du monde 
</dl>

Et même l'usage insoupçonné (pour moi) de FIGURE !

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  
<!-- table illustrative d'un contenu --> 
<figure> 
	<figcaption>Les gains du jeu de rôle DVP ™</figcaption> 
  
	<table> 
		<colgroup><col /><col /> 
		<thead> 
			<tr> 
				<th scope="col">Action 
				<th scope="col">Gain 
			</tr> 
		</thead> 
		<tbody> 
			<tr> 
				<th scope="row">Discussion résolue 
				<td>1 XP 
			</tr> 
		</tbody> 
	</table> 
</figure>

le 13/11/2012 à 5:09

andry.aime
Rédacteur/Modérateur

Bonjour,

Quelle syntaxe privilégiez-vous ?
J'ai toujours privilégié la syntaxe xhtml
Pourquoi ce choix ?
Il est plus facile pour moi de vérifier la structure de la page avec les éditeurs de texte comme notepad++ ou un IDE.
Mais pas mal de framework MVC que j'utilise me génère du code un peu mixte html/xhtml.
Je débute depuis peu en html5 mais j'utilise toujours la notation xhtml.

<li></li>
<li></li>

Je crois qu'en xhtml, si une balise doit contenir un noeud, soit elle devrait être auto-fermante.

A+.

le 13/11/2012 à 6:25

Bovino

Rédacteur

Envoyé par Muchos

Attention : il y a une petite erreur dans le premier exemple xhtml :

Code html :

1
2
3
4
5
 
   <ul class="liste"> 
        <li></li> 
        <li></li> 
    </li>

C'est corrigé !

le 13/11/2012 à 9:27

v1cent
Membre éclairé

Quelle syntaxe privilégiez-vous ?
xhtml

Pourquoi ce choix ?

Cf. message de mon prédécesseur, qui dit ça mieux que moi

Avez-vous par le passé évolué d'une syntaxe à l'autre ou êtes-vous resté sur vos choix initiaux ? Pourquoi ?
Évolué de html vers xhtml, parce qu'à mes balbutiements, xhtml n'existait pas (ou en tout cas n'était pas connu du grand public)

le 13/11/2012 à 13:26

Poster une réponse