Sémantique HTML: quitter un Hx

16725
,

Salut,

En HTML on ouvre des headings avec Les H1, H2 ect...

Ma question est simple: Comment quiter un Hx en fin de paragraphe pour revenir au Hx parent?

Exemple:

<h1> J accuse</h1>
    <p> La drogue c est mal</p>
    <h2>Acool</h2>
    <p>un pamphlet vindicatif</p>
    <!-- je souhaite quiter le h2 pour ecrire à nouveau dans le <h1> -->

Un < hr > ? Le MDN n'est pas très explixcite sur le sujet. Avez vous d'autre source sur le sujet?
Merci à vous.

4 Réponse

180097
,

"retourner dans le h1"

<h1> c'est uniquement une balise, tu l'ouvres et la ferme là ou tu as envie.
On utilise simplement de <h1> à <h6> pour une question de sémantique, une lecture plus efficace du HTML et des intentions de celui qui l'a écris, et ici les <h> permettre de savoir l'ordre d'importance des différents titres.

Tu as donc déjà quitter le <h1> et aussi le <h2> une fois la balise fermé, tu peux en ouvrir une nouvelle si tu souhaites écrire un nouveau contenu en <h1>.

Tu as indenté après ton <h1> mais tu n'en avais pas besoin.
L'utilité d'indenté c'est pour montré qu'est-ce qu'est dans quoi, par exemple si tout ton code commençait par <div>, saut à la ligne, tu indentes tout le reste, puis à la fin tu reviens au niveau de ta première div et tu fini par la fermer avec </div>

J'espère que ça te semble clair, je pense que c'est juste un soucis de compréhension que tu as pu avoir ^^

17162
,

Bonsoir.
Vu que tu as lu sur la doc de MDN, tu sembles avoir loupé quelque chose :

On essaye également d'avoir un seul titre de niveau 1 sur une page.
Il est préférable d'éviter d'utiliser plus d'un élément <h1> sur une même page. Voir Définir_des_sections_en_HTML5 in Structures et sections d'un document HTML5 pour plus d'informations.

Sur MDN, ils ont fait un genre d'indentation en escalier afin de donner une meilleure visualisation de l'utilité de des différents titres et de leur ordre.
Dans son indentation normale, il n'y a aucun décalage entre les différents titres.

16725
,

Merci pour vos réponses

Je pense que je me suis mal exprimé dans l’énoncée de ma question.

Je précise que j'ai une très bonne expérience en HTML/CSS. Ma question ne porte donc pas sur l'indentation ou comment utiliser les Hx dans une page. J'utilise ce genre de chose dans mon quotidien.

Par ailleurs l'indentation de mon code porte aussi à confusion. Je m'en excuse.

Ma question est véritablement sur la sémantique et l’interprétation des robots & impact SEO: La sémantique pur et dur, version relou.

Ma question est la suivante:

Quand on a une structure sémantique suivante

H1
    blabla
        h2
            blabla
        h2
            blabla
                h3
                    blabla
                    je souhaite quitter l'indentation sémantique; le chapitrage de mon texte.
                    Faire comprendre au SEO que la fin de ce chapitre et arrivé. Ajouter un h3 "conclusion" ne répond pas à la question.

        je veux revenir au h2 parent, sans ajouter un <h3>conclusion</h3> Ici,  l'indentation est là pour vous faire comprendre la structure sémantique uniquement.

Comment faire comprendre au "SEO" qu'on arrête de rédiger du texte dans le h3 et qu'on repasse dans le "contexte" du h2.

Il y a forcement une solution, sinon il est impossible de signifier la fin d'un Hx sans ajouter un Hx+1.

Exemple: je ne veux pas ajouter un H2 "conclusion"; je veux simplement ajouter un simple < p >...< / p > qui vient après H2 MAIS dont le contexte sémantique appartient au H1 parent.

Comment qu'on fait? < h r >?

La question n'est pas simple, je le sais bien. Je cherche depuis pas mal de temps.
J'aimerai ajouter que la sémantique est la base du SEO. Sans ce genre de prise de tête, comment être pertinent en "audit" ou même dans la "conception" de l'outil de rédaction ( le CMS genre Wordpress au hasard). C'est sur ce genre de chose qu'on gagne en rendez-vous client: On maitrise le sujet.

Si vous n'avez pas de réponse, merci de répondre "je ne sais pas". Cela permettra de rendre le sujet "chaud".

Merci à vous tous

180097
,

Haha, effectivement je n'avais pas du tout compris ta question ainsi !
Je n'ai pas beaucoup d'expérience pour t'aider, surtout pas en SEO, mais en regardant pas mal sur ce qu'il se dit sur certains Discord, peut-être que ce lien pourra t'aider, ça parle justement de la structure du code, dans ce cas la solution pourrait peut-être être d'employer <section> qui montrerait bien les séparations.

LIEN : https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document

En espérant que ça te soit utile !