captain_torche Posté 9 Mai 2011 Posté 9 Mai 2011 Je suis en train de refondre mon site (En signature), et je me suis dit que je pouvais commencer à travailler sur de l'HTML5. 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.
Patrick Posté 9 Mai 2011 Posté 9 Mai 2011 Arf, point d'indifférence sur le Hub de ma part, de la simple ignorance et donc l'impossibilité de te conseiller. Bon boulot quand même
yuston Posté 9 Mai 2011 Posté 9 Mai 2011 Salut! Ignorance moi aussi, mais, sans vouloir lancer un débat sur le "pour ou contre l'utilisation du HTML5 actuellement", je pense qu'il n'y a pas vraiment d'erreur possible dans la mesure où les spécifications ne sont pas encore totalement définitives (récent abandon de la balise hgroup ou encore redéfinition de aside par exemple). Du coup, difficile de dire que ça c'est juste, et ça c'est faux. Sinon, y a bien longtemps je m'étais aussi interrogé sur le comment bien utiliser HTML 5 sur le Hub même ! Si cela peut t'aider... Pour ma part, j'ai laissé tombé le HTML5 sur les sites de production car trop flou, pas assez de documentation, et trop d'interprétation différente, je me contente d'exploiter quelques propriétés CSS3! En tous cas, je serai ravi de lire les interventions des connaisseurs/experts.
elembius Posté 10 Mai 2011 Posté 10 Mai 2011 pourrais pas t'aider non plus mes connaissances en html5 n'étant pas au top... par contre je lirais avec plaisirs les réponses des grands connaisseurs du html5...
Sventovit Posté 10 Mai 2011 Posté 10 Mai 2011 Hello (jai pu minscrire après avoir vaincu le captcha) jai pondu un article http://on-air.hiseo.fr/html5/semantic-html5/ sur le balisage sémantique qui pourra peut-être taider. En zieutant le code source de lexemple tu auras « mes » réponses. Une petite remarque concernant : <div id="page"> <body> est déjà un conteneur ça ne sert donc à rien. Pareil pour <div id="contenu_article">. Tu as déjà la balise <article>. Et, petite question, pourquoi mets-tu le titre en <header> ? AMHA la structure sémantique nest pas bonne, lobjectif étant de faire piger le plan hiérarchique de la page et de chacun des ses blocs pour lextraire. Là il ny en a pas.
Sventovit Posté 10 Mai 2011 Posté 10 Mai 2011 (modifié) argh ! mon message n’est pas passé. 30 minutes de perdues. Modifié 10 Mai 2011 par Sventovit
captain_torche Posté 10 Mai 2011 Auteur Posté 10 Mai 2011 Si, ton message était passé, mais il est passé par le filtre de liens pour les nouveaux : je l'ai activé. Le div id=page est pour pouvoir limiter la taille du site, ainsi que pour le centrer. Le contenu_article est pour une bidouille CSS, j'avais besoin d'une balise supplémentaire pour créer un effet. Quant au titre en header, c'est pas la logique de cette balise, justement ?
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant