5568 sujets

Sémantique web et HTML

Bonjour,
Je suis à la conception d'un nouveau site. J'en profite donc pour utiliser HTML5 à fond! C'est assé nouveau pour moi, je n'ais jamais fait de site complet en html5, seulement quelques éléments.

Donc voilà, je cherche sur le web et je n'arrive pas à déterminer une structure définitive en ce qui concerne les balises section et article... Elles sont souvent inversé d'une démo à l'autre. Qu'elle structure est la bonne, article dans section, ou section dans article?

Voilà ce que j'ai:
<div id="global">
    <header>
        <h1><img src="../interface/XCEL_Prouve-tes-talents.png" alt="Xcel | Prouve tes talents!"></h1>
    </header>
        <nav class="gradient-black border-top border-bottom2">
            <ul>
                <li><a>Xcel sport</a></li><!--
                --><li><a>Xcel chasse</a></li><!--
                --><li>Accessoires
                	<ul class="subMenu accessoires">
                    	<li>Supports et fixations</li><!--
                        --><li>Mémoires</li><!--
                        --><li>Alimentation</li><!--
                        --><li>Installations et protections</li><!--
                        --><li>Autres</li>
                   	</ul>
                </li><!--
                --><li>Support
                	<ul class="subMenu support">
                        <li>Mise à jours</li><!--
                        --><li>FAQ</li><!--
                        --><li>Manuels</li><!--
                        --><li>Catalogue</li>
                    </ul>
                </li>
            </ul>
        </nav>
    <div id="content">
    <section class="border">
        <article>
        	<h1>Titre 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna enim, congue vitae pulvinar quis, aliquam sit amet metus. Praesent sit amet est sit amet orci vulputate venenatis eget iaculis augue. Aenean a faucibus mauris. Suspendisse gravida, neque at tempor pharetra, quam libero dignissim nisi, in lacinia nisi mauris ut nunc. Cras laoreet, nisl aliquam mattis ultricies, tellus quam cursus ante, sed interdum purus metus at justo. Aenean posuere scelerisque magna, at posuere lacus dapibus eget. Duis egestas posuere mollis. Proin condimentum nibh nec eros mattis gravida. Ut eu lectus ac ligula tincidunt sodales ut quis nulla. Aenean velit tortor, rutrum fringilla volutpat id, interdum sit amet nibh. Curabitur vitae lectus tortor. Nulla lacus arcu, adipiscing eu posuere ac, porta a nisl. In eu tortor nisi, vitae adipiscing erat.</p>
            <p>Phasellus sit amet velit elit, nec pharetra orci. Phasellus pulvinar, nisi accumsan sodales commodo, ipsum nisl posuere lectus, sit amet euismod purus mauris a nibh. Curabitur at dolor a sapien ultricies ultricies quis vitae dolor. Nam sit amet mauris sit amet nisi mattis hendrerit at eget eros. Vestibulum tempor porta ultrices. Morbi pellentesque massa sed sem viverra vel faucibus nisi commodo. Morbi dignissim mauris sit amet velit volutpat non condimentum ligula egestas. Vestibulum tristique risus ipsum, eleifend egestas justo. Duis egestas ante sed velit semper in venenatis ante pellentesque.</p>
        </article>
    </section>
    <aside>
    	<a><img src="../images/YouTube.png" alt="YouTube"></a>
    </aside>
  </div>
    <footer class="gradient-white border-top">
        <nav>
            <ul>
                <li><a>English</a></li><!--
                --><li><a>Contact</a></li>
            </ul>
        </nav>
    </footer>
</div>
<footer>
	<p class="copyright">© 2013 XCEL</p>
</footer>

La div="container" pourrait-elle être remplacé par "section"?
Modifié par juliesunset (23 Apr 2013 - 18:35)
juliesunset a écrit :

La div="container" pourrait-elle être remplacé par "section" ?


Tu n'as pas de div nommée ou de classe "container" !?

Sémantiquement il est préférable de découper une section en articles.
mais ces balises sont très permissives on peut en faire un peu n'importe quoi.
Modifié par Nikolian (25 Apr 2013 - 22:45)
Nikolian a écrit :
Tu n'as pas de div nommée ou de classe &quot;container&quot; !?
Oups! je me suis trompé, ce n'est pas "container", mais "content".

Nikolian a écrit :
Sémantiquement il est préférable de découper une section en articles.
mais ces balises sont très permissives on peut en faire un peu n'importe quoi.
Merci pour ta réponse
Nikolian a écrit :

Sémantiquement il est préférable de découper une section en articles.
mais ces balises sont très permissives on peut en faire un peu n'importe quoi.


En fait, un <article> représente un contenu qui se suffit à lui-même, par exemple qui pourrait se retrouver dans un flux rss/atom (billets de blog, commentaires, etc). On peut mettre des articles dans un <section> mais il faut que ça soit adapté (exemple: les commentaires des billets sur mon blog).

Le code de Julie est correct, à la limite on pourrait utiliser la nouvelle balise <main> pour englober le tout (mais faut mettre à jour les scripts et css pour la faire reconnaître aux vieux navigateurs).
Modifié par Patidou (30 Apr 2013 - 13:59)
Oh merci! je ne connaissait pas la balise <main>! Il est vrai qu'elle convient tout à fait, j'ai donc remplacé ma <div id="content"> par <main> et ais fait les ajustements dans mon css pour la compatibilité avec iE9 et plus. À l'heure actuelle j'ignore si ma page fonctionne sous iE8, mais c'est un autre sujet.

Merci pour les exemples, je commence à saisir le fonctionnement. Je vais voir quand je vais avoir du contenue pour le site, parce que pour l'instant je n'en ais pas...
Patidou a écrit :

En fait, un <article> représente un contenu qui se suffit à lui-même


Oui <section> aussi d'ailleurs, mais il est plus correcte sémantiquement d'imbriquer des articles dans une section que l'inverse, comme dans un journal où nous avons les sections "Sports", "Politique" ou "Economique" avec chacune leurs articles.
Evidemment, pas besoin de faire des sections s'il n'y en a pas.


<section id="Politique">
 <article>
  <h1>Les verts perdent !</h1>
 </article>
 <article>
  <h1>Une nouvelle loi</h1>
 </article>
</section>

<section id="Sport">
 <article>
  <h1>Les verts gagnent !</h1>
 </article>
 <article>
  <h1>Erreur d'arbitrage</h1>
 </article>
</section>