Décrivez ici votre problème ou ce que vous cherchez à faire.

        <section class="presentation">
            <figure>
                <a href="assets/accueil/collatz.jpeg">
                    <img src="assets/accueil/collatz.jpeg" alt="Lothar Collatz">
                </a>
                <figcaption>Lothar Collatz, mai 1990</figcaption>
            </figure>

            <div class="texte-presentation">
                <h2>Origines et énoncés de la conjecture </h2>
                <p>
                   texte sur l'histoire de la conjecture de Syracuse
                </p>
            </div>
        </section>

        <section class="presentation">
            <div class="texte-presentation">
                <h2>Énoncé de la conjecture</h2>
                <p>
                    txt présentant le problème et son énoncé
                </p>
            </div>

            <figure>
                <a href="assets/accueil/valeurs.png" target="_blank" rel="noopener noreferrer">
                    <img src="assets/accueil/valeurs.png"
                         alt="Application de Syracuse successives pour N = 27">
                </a>
                <figcaption>Application de Syracuse successives pour \(N=27\)</figcaption>
            </figure>
        </section>

        <section class="presentation">
            <figure>
                <a href="assets/accueil/28.png" target="_blank" rel="noopener noreferrer">
                    <img src="assets/accueil/28.png" alt="Représentation graphique de la suite de Syracuse pour N = 28">
                </a>
                <figcaption>Représentation graphique de la suite de Syracuse pour \(N=28\)</figcaption>
            </figure>

            <div class="texte-presentation">
                <h2>La suite de Syracuse</h2>
                <p>
                    txt sur la suite de Syracuse
                </p>
            </div>
        </section>

        <section class="presentation">
            <div class="texte-presentation">
                <h2>La suite compressée de Syracuse</h2>
                <p>
                   Txt sur la suite compressée de Syracuse
                </p>
            </div>

            <figure>
                <a href="assets/accueil/28compressee.png" target="_blank" rel="noopener noreferrer">
                    <img src="assets/accueil/28compressee.png"
                         alt="Représentation graphique de la suite compressée de Syracuse pour N = 28">
                </a>
                <figcaption>Représentation graphique de la suite compressée de Syracuse pour \(N=28\)</figcaption>
            </figure>
        </section>

Ce que je veux
Bonjour,
Je code un site qui parle de la conjecture de Syracuse et j'utilise des sections pour fragmenter mon code. J'essaie donc d'avoir le rendu le plus sémantiquement correct possible. Or, bien qu'ayant lu des tonnes d'exemple et d'explication sur la différence entre article et section, je n'arrive pas à appliquer dans mon cas précis. Mes questions sont donc les suivantes :

  • La section de classe "presentation" doit-elle être remplacée par une balise article
  • Dans la section de classe "presentation" se trouve une div "txt-presentation", dois-je remplacer la balise div par une balise section, article, ou laisser comme ça ?

1 réponse


Hello :)

Alors en gros la balise article c'est la partie de la page qui contient le contenu (des posts, blogs, messages, commentaires, etc...)

La section représente un groupe de composants

Pour la bonne pratique, alors tes balises sections sont bien placées, mainteantn il faut placer toutes ces balises dans une grande balise article:

<article>
        <section class="presentation">
            <figure>
                <a href="assets/accueil/collatz.jpeg">
                    <img src="assets/accueil/collatz.jpeg" alt="Lothar Collatz">
                </a>
                <figcaption>Lothar Collatz, mai 1990</figcaption>
            </figure>

            <div class="texte-presentation">
                <h2>Origines et énoncés de la conjecture </h2>
                <p>
                   texte sur l'histoire de la conjecture de Syracuse
                </p>
            </div>
        </section>

        <section class="presentation">
            <div class="texte-presentation">
                <h2>Énoncé de la conjecture</h2>
                <p>
                    txt présentant le problème et son énoncé
                </p>
            </div>

            <figure>
                <a href="assets/accueil/valeurs.png" target="_blank" rel="noopener noreferrer">
                    <img src="assets/accueil/valeurs.png"
                         alt="Application de Syracuse successives pour N = 27">
                </a>
                <figcaption>Application de Syracuse successives pour \(N=27\)</figcaption>
            </figure>
        </section>

        <section class="presentation">
            <figure>
                <a href="assets/accueil/28.png" target="_blank" rel="noopener noreferrer">
                    <img src="assets/accueil/28.png" alt="Représentation graphique de la suite de Syracuse pour N = 28">
                </a>
                <figcaption>Représentation graphique de la suite de Syracuse pour \(N=28\)</figcaption>
            </figure>

            <div class="texte-presentation">
                <h2>La suite de Syracuse</h2>
                <p>
                    txt sur la suite de Syracuse
                </p>
            </div>
        </section>

        <section class="presentation">
            <div class="texte-presentation">
                <h2>La suite compressée de Syracuse</h2>
                <p>
                   Txt sur la suite compressée de Syracuse
                </p>
            </div>

            <figure>
                <a href="assets/accueil/28compressee.png" target="_blank" rel="noopener noreferrer">
                    <img src="assets/accueil/28compressee.png"
                         alt="Représentation graphique de la suite compressée de Syracuse pour N = 28">
                </a>
                <figcaption>Représentation graphique de la suite compressée de Syracuse pour \(N=28\)</figcaption>
            </figure>
        </section>
</article>

Le HTML va comprendre que ce qui est dans la balise article c'est la partie de page qui contient le contenu de la page, les information, dans cet article il y a des sections isolent les composants individuels