Comment écrivez-vous votre code (X)HTML ?
Expliquez vos choix de syntaxe HTML

Les rubriques (actu, forums, tutos) de Développez
Tags
Réseaux sociaux


 Discussion forum

Le , par Bovino, Responsable Développement Web


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 !


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de Muchos Muchos
http://www.developpez.com
Expert Confirmé
le 13/11/2012 5:09
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>
Avatar de andry.aime andry.aime
http://www.developpez.com
Rédacteur/Modérateur
le 13/11/2012 6:25
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+.
Avatar de Bovino Bovino
http://www.developpez.com
Responsable Développement Web
le 13/11/2012 9:27
Citation Envoyé par Muchos  Voir le message
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é !

Avatar de Torgar Torgar
http://www.developpez.com
Rédacteur/Modérateur
le 13/11/2012 9:53
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.
Avatar de jreaux62 jreaux62
http://www.developpez.com
Rédacteur/Modérateur
le 13/11/2012 10:30
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.
Avatar de v1cent v1cent
http://www.developpez.com
Membre expérimenté
le 13/11/2012 13:26
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)
Offres d'emploi IT
Développeur Web
Freelance
Maison édition - Auvergne - Aurillac (15000)
Parue le 16/07/2014
Concepteur/ Développeur JAVA (H/F)
CDI
Atos Technology Services - Centre - Tours (37000)
Parue le 06/07/2014
Concepteur développeur j2ee h/f
CDI
Sogeti - Régions - Ouest - Pays de la Loire - Nantes (44000)
Parue le 11/07/2014

Voir plus d'offres Voir la carte des offres IT
 
 
 
 
Partenaires

PlanetHoster
Ikoula