J'ai déjà travaillé sur une structure, mais je ne suis pas certain de sa pertinence et j'aurais besoin de vos lumières. J'ai essayé de suivre au maximum les recommandations de HTML5Doctor.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre</title>
</head>
<body>
<div id="page">
<nav id="menu_principal">
<ul>
<li><a href="./">Accueil</a></li>
<li><a href="inscription.html">Inscription</a></li>
<li>
<a href="derniers-reves.html">Derniers rêves</a>
<ul>
<li><a href="user/reve.html">Titre du rêve</a></li>
</ul>
</li>
<li><a href="membres.html">Liste des membres</a></li>
<li><a href="admin/index.php">Administration</a></li>
</ul>
</nav>
<article id="reve">
<header>
<h1>Titre du rêve</h1>
<p>Rêvé le <time datetime="2011-01-01">1<sup>er</sup> janvier 2011</time> - User avait XX ans</p>
</header>
<div id="contenu_article">
<p>Contenu du rêve</p>
<aside>
<p>Détails à propos du rêve</p>
</aside>
<nav>
<ul>
<li class="precedent"><a href="user/reve.html" title="Rêve précédent">Titre du rêve</a></li>
<li class="suivant"><a href="user/reve.html" title="Rêve suivant">Titre du rêve</a></li>
</ul>
</nav>
<section id="commentaires">
<header>
<h2>Commentaires</h2>
</header>
<article id="commentaire_1">
<header>
<img class="avatar" src="./img/avatar_user.jpg">
<h3><a href="user/">User</a>, le <time pubdate="2011-01-01 00:00:00">1<sup>er</sup> Janvier 2011 à 00h00</time></h3>
</header>
<p>
Texte du commentaire
</p>
</article>
</section>
</div>
</article>
<aside id="menu_reve">
<div id="avatar">
<img src="./img/avatar_user.jpg" height="130">
<a href="user/" class="pseudo">User</a>XX ans
</div>
<div id="calendrier">
<h2><a href="user/2010-12.html" title="décembre 2010"><</a> <a href="user/2011-01.html">janvier 2011</a> <a href="user/2011-02.html" title="février 2011">></a></h2>
<!-- tableau du calendrier -->
</div>
<nav>
<h2>derniers rêves</h2>
<ul>
<li><a href="user/reve.html">Titre du rêve</a></li>
</ul>
</nav>
</aside>
</div>
</body>
</html>Je pense avoir fait au mieux, mais quelques doutes subsistent, principalement quant à l'imbrication de certaines balises.
1. J'ai utilisé la balise <aside> en plusieurs endroits. L'utilisation la plus pertinente me semble être le texte juste en-dessous du texte principal, facultative, qui explique le contexte. Je l'ai également utilisée pour le menu secondaire, qui présente l'utilisateur, et qui liste ses dernières entrées. Est-elle pertinente dans ce contexte ?
2. La gestion des commentaires est similaire à celle qu'a utilisée le site HTML5Doctor dans un exemple (<section> dans l'<article>, puis chaque commentaire est égal à un nouvel <article>). Cette organisation vous semble t'elle pertinente ?
3. J'utilise la balise <nav> en trois points : le menu principal, les liens "précédent" et "suivant", ainsi que dans le menu spécifique à l'utilisateur. Est-ce bien justifié dans tous les cas ?
4. Faudrait-il utiliser la balise <section> dans le menu secondaire, ou garder les <div>s (vides de sens sémantique) tels quels ?
5. Si vous voyez d'autres erreurs (ou horreurs) sémantiques (Notamment dans l'utilisation des titres), n'hésitez pas à me les signaler.
Merci d'avance !
PS : J'avais originellement posté ce message sur alsacreations, pensant que le fait qu'il soit fréquenté par plus d'intégrateurs m'apporterait une réponse rapide, mais apparemment le sujet ne soulève que de l'indifférence.
Haut
