5039 sujets

Sémantique web et HTML

Bonjour à tous,

Le sujet est assez vague j'en conviens!
Je cherche à découper cette maquette : upload/5352-maquette.png

On a donc du classique : un logo et un menu principal en haut.
Une colonne de gauche avec : Un menu secondaire et un nuage de tags.
Le contenu principal : un texte d'introduction sur le site, puis une actualité et enfin une liste des événements à venir.
Et pour finir un dernier menu secondaire en pied de page.

Je ne sais pas comment découper au mieux le tout en balises html5 "sémantiques"...

Voici la structure actuelle que j'ai écrite :
Est-ce que ça vous parait correct ?
Mes interrogations principales portent sur l'usage des "section" et "article" et éventuellement sur le nuage de tags...
<header>
    <h1><img src="logo.png" alt="Le logo"/></h1>
    <nav>
        <ul>
            <li><a href="">thème 1</a></li>
            <li><a href="">thème 2</a></li>
            <li><a href="">thème 3</a></li>
            <li><a href="">thème 4</a></li>
            <li><a href="">thème 5</a></li>
            <li><a href="">thème 6</a></li>
        </ul>
    </nav>
</header>
<div>
     <aside>
        <nav>
            <ul>
                <li><a href="">actualités</a></li>
                <li><a href="">agenda</a></li>
                <li><a href="">contact</a></li>
                <li><a href="">recherche</a></li>
                <li><a href="">newsletter</a></li>
            </ul>
            <ul>
                <li><a href="" style="font-size:120%">nuage</a></li>
                <li><a href="" style="font-size:80%">nuage</a></li>
                <li><a href="" style="font-size:180%">nuage</a></li>
                <li><a href="" style="font-size:60%">...</a></li>
            </ul>
        </nav>
    </aside>
      <section>
        <article>
            <p>
                Lorem ipsum, Sectams crescere in lotus antverpia! One must hurt the cow in order to <a href="">trap the lover</a> of important stigma.<br>Yo-ho-ho, yer not robing me without a desolation! Ferengis resist with nuclear flux!
            </p>
        </article>
        <hr  />
        <div>
            <article>
                <h2>Une actualité !</h2>
                <h3>sous-titre, sous-titre, sous-titre!</h3>
                <p>Menss ridetis in clemens cirpi!Audax, festus pess virtualiter prensionem de azureus, flavum  decor.Apolloniates, <a href="">historia</a>, et devatio.Secundus candidatus velox promissios amor  est.<br> Superbus, peritus resistentias tandem resuscitabo de festus, flavum fluctui.Volare rare ducunt ad fidelis candidatus.</p>
            </article>
            <section>
                <h2>Les Prochains évènements</h2>
                <ul>
                    <li>
                        <h3>évènement 1</h3>
                        Du 13 au 16 octobre à tombouctou
                    </li>
                    <li>...</li>
                </ul>
            </section>
        </div>
    </section>
</div>
<footer>
    <nav>
        <ul>
            <li><a href="">lien 1</a></li>
            <li><a href="">...</a></li>
        </ul>
    </nav>
</footer>


Merci d'avance pour votre aide !!

N'hésitez pas si vous avez besoin de précisions !

Cordialement,
Salut,

Ça me semble pas mal. Tu peux remplacer ta div entre header et footer par la balise main.

Sinon, les articles et les sections créent un nouveau contexte de formatage, tu peux les débuter par des h1.
Attention, <main></main>, en tout cas, n'est pas supporté par IE toutes vesions (Edge, je ne sais pas, because Windows 7). Au moins un main { display: block } (IE11) est nécessaire.
Administrateur
Hello et bonne année,

La "sémantique" me semble correcte, même si je n'aurais pas (plus) utilisé d'éléments de liste dans <nav>. Il n'y a plus d'intérêt à présent que <nav> remplit le boulot.

Manumanu a écrit :
Sinon, les articles et les sections créent un nouveau contexte de formatage, tu peux les débuter par des h1.

Non. Je pense que tu confonds le contexte de formatage (BFC) avec les "articles sectionnants".
<article> et <section> ne créent pas de BFC, par contre ils sont des articles sectionnants (d'après les spécifications - mais c'est un peu flou - , <nav> devrait également débuter par un titre de section).

Bonne journée Smiley smile
@Raphael: Merci pour cette précision terminologique. Smiley smile Pour les listes dans nav, il n'y a effectivement pas d'impératif et la doc spécifie qu'on peut y mettre à peu près n'importe quoi ; mais ils présentent quand même l'exemple d'un menu avec une liste traditionnelle. Est-ce que tu penses qu'il s'agisse d'une pratique à réviser ? Pour ma part, je trouve que ça permet plus de souplesse technique pour le CSS du menu, notamment quand il s'agit de rendre celui-ci responsive avec une version mobile.
Modifié par Manumanu (01 Jan 2016 - 16:56)
Administrateur
Manumanu a écrit :
Est-ce que tu penses qu'il s'agisse d'une pratique à réviser ?

Je pense surtout que ce n'est plus aussi automatique que précédemment Smiley smile
Quand j'ai un menu "simple", <nav> fait amplement le boulot, une liste intermédiaire est devenue totalement superflue.
Dans le cas d'un menu complexe ou déroulant avec des sous-menus, une liste fait tout aussi bien l'affaire que d'autres types d'éléments (des <div> par exemple avec les rôle ARIA correspondants, par exemple).
Bonjour

Je comprend une syntaxe valide ( par rapport à un parseur et une feuille de règle dtd) et un rendu correcte ( apprècié par l'oeil de l'intégrateur web ) . Mais que signifie le mot sémantique ? Des informations ( meta data ), des fonctionnalités , un mode d 'utilisation restreint apporté par une balise HTML ( ou le nom de ses attributs ou la valeur de ces attributs ? ) . nav et ul donne des informations sur la structure de la page pas sur le contenu du message textuel que contiennent chaque liens .

<nav><----> <div class="nav"> <----> <div data-layout="nav" >

upload/48731-alsasemant.jpg
Cordialement
Modifié par 75lionel (02 Jan 2016 - 18:59)
Bonsoir à tous,

Et merci pour vos réponses rapides ! (même pendant les fêtes Smiley smile )
Je manque malheureusement de temps et je n'ai pas pu regarder précisément tout celà...
Je n'arrive pas à être au front et au back à la fois !

Je reviendrais donner suite à ce sujet très bientôt j'espère !

Merci encore,

Cordialement,