Article ou section

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 ?

<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>

Modifié par Rodolphe (02 Nov 2023 - 14:11)

Bonjour,

Je dirais que les tags <section> peuvent sans crainte être remplacés par des tags <article>.

Sur les divs comportant la classe "texte-presentation" on peut passer à <header>.

Tout à fait Niuxe.

Pour Aristooo : il existe des outils pour vérifier la validité de la page, et même pour vérifier sa hiérarchie des éléments : W3C Validator.

Merci pour vos réponses. Je vais suivre vos conseils et mieux respecter l'ordre des balises h ainsi que remplacer toutes les sections en article. J'ai également lu sur un autre forum posant une question équivalente que certaines personnes pensaient a mettre une grande balise article puis à mettre des sections à l'intérieur. Qu'en pensez vous dans mon cas ?

En ce qui concerne le site dont j'assure le support technique il y a chaque mois une Newsletter bilingue qui fait le résumé des informations du mois dans le domaine de l'égyptologie.
Cette Newsletter est constituée d'articles différents, un pour chaque sujet sur le modèle suivant

<article>
    <header>...</header>
    <section lang="fr">...</section>
    <section lang="en">...</section>
    <footer>...</footer>
</article>

Exemple la Newsletter d'octobre 2023 https://tests.osirisnet.net/news/n_10_23.htm?fr

Dans ce cas, il m'a semblé que cette structure s'imposait, mais il peut en être différemment dans d'autres cas.
Modifié par PapyJP (04 Nov 2023 - 11:14)

Pour être un peu plus clair : chaque ensemble de tags pouvant se suffire à lui-même comme un ensemble cohérent, même hors du contexte global de la page, peut-être définit par un tag <article>.

Bref, ce qui fait la spécificité du tag <article> c'est qu'il est un ensemble autonome, à priori réutilisable tel quel sur une autre page.

Aristooo a écrit :
J'ai également lu sur un autre forum posant une question équivalente que certaines personnes pensaient a mettre une grande balise article puis à mettre des sections à l'intérieur. Qu'en pensez vous dans mon cas ?

Sur le forum de Grafikart à ce que j'ai pu voir.
Oui, la réponse de Popotte est pertinente.