5568 sujets

Sémantique web et HTML

Petit débat pour une sémantique idéale.

Bon pour commencer, bonjour à tous. Si je suis nouveau sur ce forum, certains d'entre vous m'ont certainement croisé en d'autres lieux. Smiley cligne Je profite de mon arrivée pour lancer ce sujet :

Je suis en train de programmer un système de blog avec certaines contraintes (que je m'auto-impose évidemment).

1) Dans la présentation, j'exclus TOUT recours aux images. Pas de background-image donc, pas de coin arrondis pourris etc... La présentation, ce sera UNIQUEMENT CSS et rien d'autre. Les images seront là en tant que contenu et c'est tout.
2) Je veux un XHTML parfait, c'est à dire SEMANTIQUEMENT parfait. En clair, je ne veux AUCUN div qui apparait pour telle ou telle raison en dehors de la sémantique.
3) Pour la structure du blog en lui-même, je reste sur quelque chose s'extrêmement classique. Une page, un header, un menu à gauche qui accueille les plugins, un content à droite et un footer en bas.


|------------------------------------|
|                            fr - en |
| TITRE                              |
|                            search  |
|------------------------------------|
| Calendrier  |                      |
|             |                      |
| Categories  |    CONTENU           |
|             |                      |
| Infos texte |                      |
|------------------------------------|
|               FOOTER               |
|------------------------------------|


Très classique donc.

Voilà ce que je ferais :

Pour la page globale, un div
Pour le header en haut : un div contenant
Une liste pour les langues <ul><li></li>...</ul>
Pour le titre, un H1
Pour la barre de recherche : un fieldset contenant un input texte et un submit cote à cote.

Pour la colonne des plugins, un div contenant :
Calendrier : un div contenant :
- Pour le titre du calendrier, un H2
- Pour le calendrier lui-même, une table

Categories : un div contenant :
- Pour le titre des catégorie, un H2
- Pour les categories elles-mêmes, une liste <ul><li></li>...</ul>

Infos : un div contenant :
- Pour le titre de la box d'info, un H2
- Pour la box d'infos, un div

Pour la colonne du contenu, un div

Pour le footer, un div


Le but est d'avoir une page où CHAQUE balise XHTML a du sens sur le plan sématique.

Avec mes contraintes, cela vous semble bon ou vous verriez une modification ? Smiley biggol
Modifié par Hermes le Messager (20 Jun 2009 - 23:56)
Bonjour et bienvenue sur ce forum,

Hermes le Messager a écrit :
2) Je veux un XHTML parfait, c'est à dire SEMANTIQUEMENT parfait. En clair, je ne veux AUCUN div qui apparait pour telle ou telle raison en dehors de la sémantique.

Les éléments DIV n'ont aucune existence sur le «plan sémantique». Donc si tu ne veux aucun élément qui ne soit pas un contenu et qui ne corresponde pas à un balisage sémantique, tu peux bannir purement simplement les éléments DIV de ta page. Même chose pour les SPAN. Seule exception: si tu utilises un DIV ou un SPAN pour indiquer un changement de langue de traitement:
<html lang="fr">
    ...
    Bla bla contenu en français
    ...
    <div lang="en">
        Blah blah some content in English.
    </div>
    ...
</html>


Hermes le Messager a écrit :
Pour la page globale, un div

C'est pas sémantique, à bannir.

Hermes le Messager a écrit :
Pour le header en haut : un div (...)

Idem.

Hermes le Messager a écrit :
Pour la barre de recherche : un fieldset

Le fieldset est à priori inutile.

Hermes le Messager a écrit :
Pour la colonne des plugins, un div (...)
Pas sémantique, à bannir.

[quote=Hermes le Messager]Calendrier : un div (...)

Idem.

Etc.

Hermes le Messager a écrit :
Le but est d'avoir une page où CHAQUE balise XHTML a du sens sur le plan sémantique.

Perdu. Smiley smile

Hermes le Messager a écrit :
Avec mes contraintes, cela vous semble bon ou vous verriez une modification ? Smiley biggol

Je suggère la modification suivante: revoir la notion de sémantique en HTML, et ne pas se prendre la tête inutilement sur le balisage destiné à la mise en page (typiquement les DIV et SPAN, à l'occasion un TABLE de mise en page quand c'est vraiment nécessaire). Smiley smile
Modifié par Florent V. (21 Jun 2009 - 15:42)
Je précise pour finir que limiter au maximum le nombre de DIV utilisé est un exercice de style intéressant. Pour une pratique un peu plus réaliste et concrète, on aura intérêt à ne pas se fixer de limites trop strictes; limiter le nombre de DIV reste intéressant pour garder un code HTML lisible, mais si à l'occasion on doit rajouter un élément DIV, ou réorganiser l'imbrication de différents blocs pour parvenir à la mise en page souhaitée... eh bien c'est parfaitement normal. Smiley cligne
Florent V. a écrit :
Bonjour et bienvenue sur ce forum,


Les éléments DIV n'ont aucune existence sur le «plan sémantique». Donc si tu ne veux aucun élément qui ne soit pas un contenu et qui ne corresponde pas à un balisage sémantique, tu peux bannir purement simplement les éléments DIV de ta page. Même chose pour les SPAN.


Et oui je le sais bien. Smiley cligne

Je sous-entendais évidemment : le nombre minimum de balises comme tu l'as deviné.

En HTML 5 des balises comme header ou footer sont prévues par exemple. Smiley cligne

En attendant, mon but est d'arriver au résultat nécessitant le moins de balises possible en gardant le maximum de sens dès que c'est possible.
Le fieldset est pratique par exemple car je veux mes deux input dans un cadre, c'est sémantiquement la solution la plus juste. Rien n'est parfait sauf en faisant du XML et en définissant chaque balise soi-même dès que nécessaire. Smiley cligne

Donc je reformule ma question :

Avez-vous des suggestions quant à la possibilité avec la structure que je propose en limitant au max le nombre de balise et en utilisant chaque fois que cela est possible la balise la plus "juste" ou la moins "fausse". Smiley lol
Ah et pour ce qui est du CSS voire du JS, on verra plus tard. Je ne veux pas me limiter au départ (enfin "m'augmenter" au départ lol). Donc, faisons comme si les problèmes de mise en page liés aux navigateurs étaient innexistants. Smiley lol
Hello,

Hermes le Messager a écrit :
Le fieldset est pratique par exemple car je veux mes deux input dans un cadre, c'est sémantiquement la solution la plus juste.
Je me trompe ou tu es en train de parler de sémantique à propos d'un rendu visuel ? Smiley langue
En parlant de sémantique... Une outre chose a voir, intéressant, c'est l'ordre dans lequel tu mets l'information de ta page.
Sans .css, ta page, aura du sens?
qu'est-ce qu'il faut mettre d'abord? la navigation? le header? le contenu?

Il y a une page que trouve très bien faite a ce niveau
http://www.stuffandnonsense.co.uk/
Ils parlent, même, de donner de noms "sémantiques" aux div tels que "branding", "navigation_main", bla, bla...
Même, il a de gens qui disent que donner noms (mais ce n'est pas ton cas) "sémantiques" aux images utilisées, type "banniere", "arriere_plan"...

@Florent V.
Je ne suis tout à fait d'accord avec toi
a écrit :
Les éléments DIV n'ont aucune existence sur le «plan sémantique».

Précisément les div sont faites pour signaler un bloc de contenu qui appartient au même sujet (une section, quoi)
voici ma référence

@Hermes le Messager
De toute façon, je crois que ton objectif est très intéressant.
Heyoan a écrit :
Hello,

Je me trompe ou tu es en train de parler de sémantique à propos d'un rendu visuel ? Smiley langue


Oui bon... Je prévois certaines choses quand même évidemment (mais le moins possible)
ChickenExecutor a écrit :
En parlant de sémantique... Une outre chose a voir, intéressant, c'est l'ordre dans lequel tu mets l'information de ta page.
Sans .css, ta page, aura du sens?
qu'est-ce qu'il faut mettre d'abord? la navigation? le header? le contenu?


A vous de me le dire. Smiley lol

a écrit :

Il y a une page que trouve très bien faite a ce niveau
http://www.stuffandnonsense.co.uk/
Ils parlent, même, de donner de noms "sémantiques" aux div tels que "branding", "navigation_main", bla, bla...
Même, il a de gens qui disent que donner noms (mais ce n'est pas ton cas) "sémantiques" aux images utilisées, type "banniere", "arriere_plan"...


Oui je connais le lien. Bon je me suis pas présenté non plus. Je suis très loin d'être un débutant. Smiley cligne C'est juste pour le fun et parce que j'ai envie de faire quelque chose d'extrême, enfin le plus possible, donc pas d'images du tout (sauf contenu), CSS à donf en essayant d'exploiter toutes les possibilités genre border-radius, text-shadow etc... et en faisant le moins de compromis possible sur la structure du document.

a écrit :

@Florent V.
Je ne suis tout à fait d'accord avec toi
Les éléments DIV n'ont aucune existence sur le «plan sémantique».

Précisément les div sont faites pour signaler un bloc de contenu qui appartient au même sujet (une section, quoi)
voici ma référence


Non, mais il a pas tord là. Le div et le span sont utilisés de manière générique un peu pour tout et en particulier pour remplacer les tables mais le problème est presque le même. On fout des div partout comme auparavant on foutait des tables partout. Il faudra attendre html5/xhtml2 pour avoir des balises comme header, footer etc...

a écrit :

@Hermes le Messager
De toute façon, je crois que ton objectif est très intéressant.


Mais j'espère bien. Smiley lol
Re,

Sur le fieldset pour faire un cadre: un FIELDSET sert à associer l'intitulé du LEGEND associé aux LABEL contenus dans le FIELDSET. Si ce n'est pas l'utilisation envisagée, ne pas utiliser de FIELDSET. Si on a besoin d'un cadre malgré tout, utiliser un DIV. Ou tout bêtement l'élément FORM lui-même.

Sur la valeur sémantique d'un DIV: c'est un conteneur générique (au même titre que SPAN). Cf. la spécification HTML 4 (plutôt qu'une source qui en donne une interprétation potentiellement fausse ou simplificatrice). Smiley cligne

Sur les conteneurs sémantiques de HTML 5: c'est très bien, mais gardons à l'esprit que leur utilité concrète n'est pas démontrée. Ces conteneurs restent trop génériques pour que leur exploitation par les lecteurs d'écran, les moteurs d'indexation et autres outils soit évidente et tout à fait prévisible. (Filigrane: la sémantique ce n'est pas «bien» dans l'absolu.)
Humm, en fait après mure réflexion, il faudrait donc effectivement supprimer au maximum les divs. Smiley lol

On aurait alors :

Pour la partie Header :
Un <ul><li></li>...</ul> pour la liste des langues

Un <form> contenant un fieldset contenant : input text et un input submit pour la recherche.
Le fieldset correspond mieux après pas mal de recherches. C'est un champ d'éléments de formulaire qu'on regroupe.
L'idéal aurait été de ne rien mettre, mais form ne peut pas contenir directement d'input. Smiley cligne

PS : je ne fais pas de titre puisque title défini déjà le titre de la page. Smiley lol

Pour la partie plugins:
Un h2 pour le titre du calendrier
Une table pour le calendrier.
Un form avec fieldset et inputs.. pour les boutons de recherche du calendrier.

Un h2 pour le titre des catégories
Un <ul><li></li>...</ul> pour la liste des catégories

Un h2 pour le titre des infos.
Un div pour les infos

Pour la partie content:
Un div.

pour la partie footer:
Un div

Les trois div que je garde, je ne vois pas comment les supprimer vu qu'ils vont être rempli dynamiquement et que je dois quand même pouvoir "nommer" les parties dynamiques.

Alors Florent V ? Ca te semble bon, ou faudrait encore dégraisser ?
Modifié par Hermes le Messager (23 Jun 2009 - 10:59)
En clair, on aurait ca :


<body>

<h1 id="title_blog">- HermesBlog -</h1>

<ul id="langs">
	<li>English</li>
	<li>French</li>
	<li>German</li>
</ul>

<form id="search" action="index.php" method="post">
	<fieldset>
		<input type="text" name="text_search" />
		<input type="submit" name="submit_search" value="Search" />
	</fieldset>
</form>

<h2 id="title_calendar">.: Calendar :.</h2>
<form id="search_calendar" action="index.php" method="post">
	<fieldset>
		<select name="days">
		<option value="1">1</option>
		<option value="20">20</option>
		</select>
		
		<select name="months">
		<option value="1">Jan</option>
		<option value="2">Feb</option>
		</select>
		
		<select name="years">
		<option value="2009">2009</option>
		<option value="2010">2010</option>
		</select>
		
		<input type="submit" name="submit_calendar" value="Ok" />
	</fieldset>
</form>

<h2 id="title_categories">.: Categories :.</h2>
<ul id="categories">
	<li>categorie 1</li>
	<li>categorie 2</li>
	<li>categorie 3</li>
	<li>categorie 4</li>
</ul>

<h2 id="title_infos">.: Infos :.</h2>
<div id="infos">
	<p>
		infos content<br />
		infos content<br />
		infos content
	</p>
</div>

<div id="content">
	<p>
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content<br />
		content
	</p>
</div>

<div id="about">
About...
</div>

</body>
Hermes le Messager a écrit :
il faudrait donc effectivement supprimer au maximum les divs.

Pour un exercice de style, pourquoi pas. Dans une approche un peu pragmatique et intelligente, non, certainement pas. (Et comme cet exercice de style-là ne m'intéresse guère... Smiley cligne )

Hermes le Messager a écrit :
Un <ul><li></li>...</ul> pour la liste des langues

Pourquoi pas. Un simple paragraphe peut suffire aussi.

Hermes le Messager a écrit :
Un <form> contenant un fieldset contenant : input text et un input submit pour la recherche.

Le fieldset est en trop. Il ne gène pas, mais ça revient à utiliser un DIV pour de la mise en forme (ce qui est très bien).

Hermes le Messager a écrit :
L'idéal aurait été de ne rien mettre, mais form ne peut pas contenir directement d'input.

Faire du (X)HTML Transitional ou bien du HTML 5. Ou bien utiliser un paragraphe, ou un DIV.

Hermes le Messager a écrit :
Les trois div que je garde, je ne vois pas comment les supprimer vu qu'ils vont être rempli dynamiquement et que je dois quand même pouvoir "nommer" les parties dynamiques.

Il n'y a pas lieu de chercher à les supprimer (sauf, encore une fois, en tant qu'exercice pour voir). Si j'étais à ta place, et pour être un peu pragmatique, j'utiliserais un nombre plus important de DIV pour fournir un support à la mise en page prévue et également à des évolutions futures.

Hermes le Messager a écrit :
ou faudrait encore dégraisser ?

Libre à toi de chercher à enlever des DIV. Comme je le disais, je ne partage pas cette préoccupation. Smiley smile
Florent V. a écrit :

Pour un exercice de style, pourquoi pas. Dans une approche un peu pragmatique et intelligente, non, certainement pas. (Et comme cet exercice de style-là ne m'intéresse guère... Smiley cligne )


En fait, j'aime bien me livrer à ce genre d'exercice justement. Ce que j'essaye de faire, c'est de séparer réellement complêtement le contenu et la présentation.
Pour ce qui est du contenu on veut quelque chose de parfaitement accessible justement et à l'heure actuelle, en attendant HTML5 et XHTML2, on a quand même un problème : A cause des soucis de mise page, on multiplie les div/span etc... Smiley cligne

L'idée dans le cas présent, c'est de ne garder QUE les balises qui ont du sens sur le plan sémamtique et de soigner la structure du document, et de s'appuyer uniquement sur les navigateurs récents donc IE8, Firefox 3+, Opera 9.6+, Safari et midori (webkil) en utilisant non plus une profusion de div et de span pour la présentation mais uniquement le DOM + CSS pour générer les éléments de présentation en les séparant totalement de la structure.

Je ne sais pas si je me suis bien fait comprendre. Smiley lol
Bonjour : Par exemple un bloc titre <h1> déclaré en caractères 400% avec une marge basse de 5% agrémenté une image d'arrière plan X.jpg… un padding vertical, des marges suivies d'un bloc texte <p> qui raconte toute ton histoire, lui même agrémenté d'un arrière plan et de marges adéquates. Ça le fait sans div car une div est un bloc neutre, si tu veux simplifier autant voir du coté indispensable. Tout élément est modifiable grâce aux CSS.
Sujet clos
Aller à