Quelle est la sémantique de <div> et <span> ?

Bonjour à vous tous,

Toujours en formation sur des tutoriels HTML et CSS, je viens de constater que deux balises HTML n'ont pas de sémantique alors que toutes les autres en ont une. Une balise sémantique donne un sens aux éléments qu'elle contient. Et j'ai bien compris que la sémantique des balises sert aussi à une meilleure accessibilité des contenus pour les personnes aveugles ou mal voyantes nécessitant des logiciels de lecture de site web. Ainsi, la balise <p> indique qu'elle va contenir du paragraphe. La balise <a> indique qu'elle va contenir un lien, a étant l'initiale de ancorage (ancrage en français). La balise <hr> indique qu'elle va contenir une ligne horizontale (hr signifiant horizontale rule). Et ainsi de suite. Mais pourquoi avoir nommé DIV une balise qui est destinée à délimiter une zone qui contiendra quelque chose d'autre ? Et pourquoi avoir nommé SPAN une balise qui contiendra toute sorte de chose dans du texte (de la couleur, de la graisse, de l'inclinaison de caractère, une grosseur de caractère, etc.) ?

Pour moi, DIV est le diminutif de division mais peut être que cela signifie autre chose. Quand à SPAN (to span = couvrir et span = envergure) quel rapport avec une éventuelle mise en forme d'un bout de texte ? Les concepteurs du HTML ont-ils choisi ces mots par hasard, comme j'aurai pu les appeler PAL pour DIV et PATATE pour SPAN ? Ou bien y a-t-il une véritable explication quand au choix de ces mots ? Et pourquoi pas avoir donné une vrai sémantique à ces deux balises ? Par exemple AREA pour DIV et OTHER pour SPAN ?

Bonjour,

En effet, il y a des balises "génériques" et la sémantique n'est pas toujours très intuitive;

Disons que div correspond à une plage du document, non limitée dans ses dimensions, alors que span correspond au maximum à une ligne et souvent beaucoup moins.
div délimite une zone qui peut contenir tout ce que tu veux.
span est dédié à du texte et sa dimension est en général celle du texte, un peu comme quand tu sélectionnes un mot avec la souris. Il est pratique pour donner une mise en forme css à tel ou tel élément textuel.

Bref, la structure canonique:

Code:

---

1 2 3 4 5

<div> <span class="first">un texte</span> <br /> <span class="second">un autre texte</span> </div>

---

reste pratique pour organiser un document.

Citation:

---

Envoyé par javatwister

Bonjour,

Disons que div correspond à une plage du document, non limitée dans ses dimensions, alors que span correspond au maximum à une ligne et souvent beaucoup moins.
div délimite une zone qui peut contenir tout ce que tu veux.
span est dédié à du texte et sa dimension est en général celle du texte, un peu comme quand tu sélectionnes un mot avec la souris. Il est pratique pour donner une mise en forme css à tel ou tel élément textuel.

---

Merci pour ta réponse qui m'apporte plus de précisions. Tes descriptions des balises <span> et <div> sont précises et clairs, surtout celle de <span> dont je comprends mieux son utilisation. Mais pourquoi les concepteurs du HTML n'ont pas plutôt appelé cette balise <text> ou <txt>. Cela me semble plus approprié pour indiquer que c'est une balise intervenant dans une sélection de texte. J'aurai aimé savoir à quoi ils pensaient quand ils ont fait leur choix.

Par contre, dans ton exemple de code, j'ai remarqué que tu as utilisé directement la balise <span> dans une balise <div>. Ce n'est pas obligatoire que <span> soit utilisée dans la balise <p> ?

Citation:

---

Envoyé par Obi Juan Kenobi

j'ai remarqué que tu as utilisé directement la balise <span> dans une balise <div>. Ce n'est pas obligatoire que <span> soit utilisée dans la balise <p> ?

---

Non non, la logique des "éléments anonymes" c'est "un span dans un div";

litteralement parlant, span (en anglais) signifie envergure/espace ... je ne sais pas si ca aide....

Oui, c'est ça; on peut le traduire par "plage", "intervalle"... Et finalement, on aurait pu l'appeler "range", aussi bien!
Mais comme c'est un élément inline, il vaut mieux considérer que c'est un "textContainer";

Citation:

---

Envoyé par Obi Juan Kenobi

Mais pourquoi les concepteurs du HTML n'ont pas plutôt appelé cette balise <text> ou <txt>. Cela me semble plus approprié pour indiquer que c'est une balise intervenant dans une sélection de texte. J'aurai aimé savoir à quoi ils pensaient quand ils ont fait leur choix.

---

Pas à grand chose de sémantique en tout cas, dans les premières versions d'HTML, les balises étaient surtout fonctionnelles car en l'absence de css, c'est elles qui assuraient la mise en page (Des balises comme <CENTER></CENTER> ou <MULTICOL></MULTICOL> en sont un parfait exemple) et l'aspect du texte (<FONT></FONT> ou <BLINK></BLINK>). De ce temps ont perduré les balises <span> et <div> du fait de leur neutralité: <div> groupe, <span> délimite une étendue d'éléments inline (pas forcément du texte). Elles sont effectivement purement structurantes.

La préoccupation sémantique, n'a fait son apparition que plus tard notamment avec xhtml 1.0. La volonté est de se rapprocher du XML (donc d'un découpage sémantique) et au même moment l'arrivée de css2 a permis de délester le html de toute la partie mise en page. Ces deux balises étaient alors (et le sont toujours) d'autant plus utiles que le nombre de balises étaient faible en comparaison de ce que propose html 5. Ce n'est pas pour rien qu'au même moment ont émergé les microformats.

Bonjour,

Citation:

---

Envoyé par Obi Juan Kenob

Mais pourquoi les concepteurs du HTML n'ont pas plutôt appelé cette balise <text> ou <txt>.

---

Est-ce que cela aurait eu plus de sens

Citation:

---

J'aurai aimé savoir à quoi ils pensaient quand ils ont fait leur choix.

---

Le mieux serait de leurs demander :mrgreen:


Bon !!! Tout d'abord il est peut-être bon de rappeler que l'élément <span> n'est apparu qu'avec HTML4, il n'était pas présent sur les versions précédentes.

Pour moi le mot SPAN est à prendre au sens « étendue » pour être cohérent avec les attributs des cellules des <table> rowspan et colspan.
C'est un élément, « inline », neutre, tout comme les DIV qui ne servent qu'au cosmétique après l'introduction du CSS, comme dit par RegExpMan ;)


Ressources :

• HTML 3.2 Reference Specification ;
• HTML 4.01 Specification ;
• HTML Living Standard, la dernière.