5568 sujets

Sémantique web et HTML

Pages :
Bonjour,

cela fait plusieurs mois que je créé mes sites en HTML5 et CSS3, mais j'éprouve quelques fois des interrogations dans le choix des balises à utiliser.

Plus particulièrement concernant les balises <article> et <section>. Ces balises ont toutes deux une valeur sémantique donc leur utilisation n'est pas anodine, et a une signification (à l'inverse de <div> qui n'a aucune valeur sémantique...).

La documentation n'est pas très explicite car les exemples concernant ces balises sont souvent par rapport à un blog, contenant des articles... donc la balise <article> est souvent la plus adaptée
(DIXIT: The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content).
Avez-vous une connaissance éclairée à ce sujet ??

Je vois souvent des sites utiliser <section> à tout va en croyant que cela est le remplaçant de <div>. Mais si j'ai bien compris la documentation cela est faux. En HTML5 on continue d'utiliser <div>, cela est même préconisé lorsque l'on doit créer un bloc conteneur à des fins de stylisme (style CSS) et qui n'a aucune valeur sémantique. (DIXIT: The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.)
Le choix de <section> n'est donc pas anodin. Il devrait logiquement recevoir à chaque fois un titre <h1> => <section><h1>Titre</h1></section> même si cela ne retourne pas une erreur mais un undefined content.
Avez-vous également une connaissance éclairée à ce sujet ??

Ces interrogations sont probablement liées au fait que le langage est toujours en développement, donc pour nous les utilisateurs finaux, des questions subsistent...

Merci de partager vos connaissances à ce sujet Smiley cligne , ou si vous avez des liens intéressants à partager également.

Pour les intéressés du sujet, je vous recommande le site (après Alsacreations.com bien sûr...) http://html5doctor.com (en anglais mais tout le monde parle anglais bien sûr...)

Codalement Smiley cligne

PHPeur
Un article contient un texte qui se suffit à lui-même (billet d'un blog, article sur un journal en ligne, etc). Sur mon site, les commentaires sont des articles dans une section de l'article global.

Les articles peuvent avoir des sections et les sections des articles, l'important est que ça soit organisé logiquement.
C'est une partie d'un contenu (sur mon site un article) qui DOIT commencer par un titre (h1, h2, etc).

P.S. : c'est là que je me rends compte que j'aurais peut-être du créer 2 sections dans mes articles au lieu d'une : attachments et comments.
Modifié par Patidou (08 Mar 2011 - 13:21)
Ok donc une structure logique donne :

<div id="conteneur">
<section id="contenu">
<h1>Titre</h1>
<article>
<p>Blah blah blah</p>
</article>
</section>
</div>

La div conteneur est conservé pour placé l'ensemble dans la page ??
Ben je ne sais pas quel genre de site tu veux créer. Si on parle d'un site d'actualité (page article) :


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Titre de l'article – Titre du site</title>
</head>

<body>
<div id="page">
	<header>
		<h1>Titre du site</h1>
	</header>
	<article role="main">
		<header>
			<h2>Titre de l'article</h2>
			<p>Publié le <time datetime="2011-03-08T13:28:14+02:00" pubdate="pubdate">8 mars 2011</time>, par <b>PHPeur</b></p>
		</header>
		Blablabla (contenu).
		Blablabla
		Blablabla
		Blablabla
		Blablabla
		<section>
			<h3>Commentaires</h3>
			<article class="comment">
				<header>
					<h4>Publié par <b>pseudo</b>, <time datetime="2011-03-08T13:28:14+02:00" pubdate="pubdate">8 mars 2011</time></h4>
				</header>
				LOL
			</article>
			<article class="comment">
				<header>
					<h4>Publié par <b>pseudo2</b>, <time datetime="2011-03-08T13:28:14+02:00" pubdate="pubdate">8 mars 2011</time></h4>
				</header>
				C'est nul
			</article>
		</section>
		<footer>
		Flux rss des commentaires
		</footer>
	</article>
	<aside>
		Navigation sur le site
	</aside>
	<footer>
		Copyright, infos sur la société
	</footer>
</div>

</body>
</html>




Modifié par Patidou (08 Mar 2011 - 13:43)
Merci çà m'éclaire.
Si je prends l'exemple d'une page d'accueil d'un site vitrine, qui présente la société par exemple. On ne parle plus d'articles au propre sens du terme, mais le contenu est assimilé à des articles ?
Je verrais bien quelque chose comme ça:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Notre société</title>
</head>

<body>
<div id="page">
	<header>
		<h1>Notre société</h1>
		<p><strong>Slogan</strong></p>
	</header>
	<article>
		<header>
			<h2>Nos services &amp; vos avantages</h2>
		</header>
		<section>
			<h3>Services</h3>
			<section>
				<h4>Service 1</h4>
				blablablablabla
			</section>
			<section>
				<h4>Service 2</h4>
				blablablablabla
			</section>
		</section>
		<section>
			<h3>Avantages</h3>
			<section>
				<h4>Avantage 1</h4>
				blablablablabla
			</section>
			<section>
				<h4>Avantage 2</h4>
				blablablablabla
			</section>
		</section>
		<footer>
			Contactez-nous pour plus d'info au <a href="tel:+00331000000">00 33 1 00 00 00 00</a>
		</footer>
	</article>
	<aside>
		Navigation sur le site
	</aside>
	<footer>
		<small>Copyright, infos sur la société, dernière mise à jour&nbsp;: <time datetime="2011-03-08T13:28:14+02:00">8 mars 2011</time></small>

	</footer>
</div>

</body>
</html>

Modifié par Patidou (08 Mar 2011 - 14:22)
ok je cerne.
Jusqu'à présent j'inversais section et article, dans ton exemple j'aurai inversé les deux Smiley cligne
J'aime beaucoup la structure propre et sémantique du HTML5.

Merci beaucoup Patidou Smiley cligne

Au fait "Patidou" c'est une référence au légume ou c'est un surnom tout simplement ? Smiley cligne
PHPeur a écrit :
ok je cerne.
Jusqu'à présent j'inversais section et article, dans ton exemple j'aurai inversé les deux Smiley cligne


L'important est des déterminer ce qui fait un contenu à lui tout seul et de l'englober dans un article. Sur la home d'un site d'actualité, il y aurait plein de petits articles par exemple. Smiley cligne

PHPeur a écrit :
Au fait &quot;Patidou&quot; c'est une référence au légume ou c'est un surnom tout simplement ? Smiley cligne


Les deux. Smiley lol Une copine qui m'avait donné ce surnom à l'époque (mon prénom c'est Patrick).
J'ai enlevé l'attribut pubdate sur le time dans le footer, il ne peut être utilisé que pour renseigné la date de publication d'un article, hors il se trouvait en dehors… Smiley cligne
Patidou a écrit :
C'est une partie d'un contenu (sur mon site un article) qui DOIT commencer par un titre (h1, h2, etc).

Non, ça doit pas. Smiley smile Du moins quand j'ai vérifié dans la spec, ça devait pas nécessairement commencer par un titre, ou contenir un titre.

Après, si certains outils qui dressent le plan du document affichent «titre manquant» plutôt que «section anonyme» ou autre appellation plus neutre, c'est leur choix.

PS: http://gsnedders.html5.org/outliner/ m'a l'air tout bugué, tiens.
Modifié par fvsch (08 Mar 2011 - 21:20)
Ben si çà devrait on va dire...
Il est recommandé de le faire mais ce n'est pas une obligation.
C'est ce que précise Rémy Sharp dans son dernier livre "Introduction à HTML5".

L'outil http://gsnedders.html5.org/outliner/ affichent le plan du document et donc les parties n'ayant pas de titres mais qui devraient. Mais cela n'est en aucun cas comme une erreur.

C'est recommandé pour la sémantique du document mais ce n'est pas une obligation.

Codalement Smiley cligne
fvsch a écrit :

Non, ça doit pas. Smiley smile Du moins quand j'ai vérifié dans la spec, ça devait pas nécessairement commencer par un titre, ou contenir un titre.

Bon, je vais laisser comme ça pour mon thème alors. Merci. Smiley smile
Modifié par Patidou (09 Mar 2011 - 12:04)
Patidou, je ne comprend pas ton utilisation de la balise <article> pour structurer une page de site static.

N'est-ce pas une balise conçue spécifiquement pour la syndication ?

a écrit :
"The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication"

(spec html5)

Merci pour ta réponse Smiley smile
La syndication est donnée en exemple pour bien comprendre le concept, mais je crois que sur une page d'accueil c'est aussi utilisable. Smiley smile
Carine P a écrit :
N'est-ce pas une balise conçue spécifiquement pour la syndication ?

Non. D'ailleurs le HTML n'est pas un format de syndication.
Comme le dit Patidou, la syndication est donnée en exemple (la spec dit «un contenu qui peut être distribué ou réutilisé séparément, par exemple dans un fil de syndication»).
Ok, du coup on est d'accord que pour le contenu principal d'une page classique, on utilise l'élément <section>. Smiley smile

Autre interrogation : le fil d'ariane se trouve souvent au niveau de la colonne principale. J'entoure donc celle-ci d'un <div> pour le style, mais en quoi est-ce utile d'entourer mon contenu principal (<h1>,<h2>,<p>) d'une balise <section> ?
Les titres induisent déjà la section.

<div id="colMain">
  <p id="breadcrumbs">
    <a href="#">Accueil</a>
    > Présentation
  </p>
  <h1>Présentation</h1>
  <h2>La société</h2>
  <p>
    Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad.
    Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam
  </p>
</div>


ou


<div id="colMain">
  <p id="breadcrumbs">
    <a href="#">Accueil</a>
    > Présentation
  </p>
  <section>
    <h1>Présentation</h1>
    <h2>La société</h2>
    <p>
      Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad.
      Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam
    </p>
  </section>
</div>


Merci Smiley smile !
Pages :