web-dev-qa-db-fra.com

Annonce personnalisée au-dessus du contenu du site Web. Format sémantique standard approprié recherché

Jusqu'à récemment, mon site Web suivait les normes sémantiques appropriées avec les balises H1 avant les balises H2 et H3.

Maintenant, sur mon site, on m'a demandé de mettre une annonce de festival pour le propriétaire en haut de la page avant tout contenu de page.

La publicité elle-même contient une balise DIV et contient une balise H3 pour un titre, des paragraphes de texte et une image, mais la publicité n’a aucun rapport avec le site.

Le codage approximatif de la publicité ressemble à ceci:

<div><h3>Advertisement title</h3><p>Advertisement detailed text information</p></div>

Et le codage du site sous forme brute, à l’exception de la section head des balises html et body, ressemble à ceci:

<h1>Title of page</h1><h2>Subtitle</h2><p>Main page content</p>

Mais lorsque j'ajoute l'annonce en haut de la page, à la demande du propriétaire, l'exemple de code sur ma page ressemble à ceci:

<div><h3>Advertisement title</h3><p>Advertisement detailed text information</p></div>
<h1>Title of page</h1><h2>Subtitle</h2><p>Main page content</p>

Cela enfreint les normes car H3 précède H1 et H2.

Comment pourrais-je le mieux résoudre ce problème de manière standard tout en mettant l'accent sur la publicité? Je pensais remplacer l'étiquette H3 par une étiquette P, mais je ne sais pas si cela suffit pour répondre aux normes telles que celles de Google (ou de tout autre moteur de recherche) en matière de qualité.

htmladvertisingheading
2
Mike

Une option consiste à placer l'annonce à la fin de votre code HTML (probablement juste avant </body>]) et à la positionner en haut avec CSS.

Quelque chose dans le sens de

#advertisement {
    position: absolute;
    top: 0;
    height: 120px;
}
body {
    padding-top: 120px;
}

Il faudra probablement plus que cela, mais cela devrait vous donner une idée.

1
Cai

Utilisez CSS, copiez la classe que vous appliquez actuellement à H3, puis reproduisez-la dans une classe personnalisée et appliquez-la à la publicité dans un

ou tout autre élément différent d'un titre.

0
Andrés Navarro

Mon conseil est d’opter pour la solution que CAI vous a proposée et de ne pas perdre votre en-tête. Vous pouvez stocker l’annonce dans chaque élément de bloc qui vous passe par la tête. Cela pourrait être em cela pourrait être p il pourrait être n'importe quoi, et le positionner avec CSS donne un sens parfait.

0
knif3r