Déplacer balise H1 en fonction de la taille de l'écran

Bonjour,

Le titre explique mon besoin. Je souhaite placer ma balise H1 dans une DIV pour un écran de bureau et la mettre dans une autre DIV pour un écran de smartphone.

J'ai imaginé l'outrage suivant : placer 2 balises H1 sur ma page dont l'une est cachée selon la taille de l'écran.

L'une avec l'ID name_outside :
Code:

#name_outside {
[USER=46533]@media[/USER] (min-width: 767px) {
display: none;
}

et l'autre
Code:

#name_inside {
[USER=46533]@media[/USER] (max-width: 767px) {
display: none;
}
}

Cela fonctionne au poil mais j'ai lu que ce n'était pas une bonne pratique SEO. Pourtant une seule balise ne s'affiche au final ?
Quelle autre solution puis je mettre en place ?

Je vous remercie grandement pour votre aide,

Grouiiik

Bonjour,

Grouik33 a écrit :
Quelle autre solution puis je mettre en place ?

Ne pas utiliser de balise div du tout !

Sinon, bah, du javascript.

Amicalement,

Bonjour Parsimonhi,
Je te remercie pour ta réponse.
Comme je n'ai pas envi de déstructurer toute la page (page produit de Prestashop), je vais étudier les possibilités en javascript. Merci pour cette piste.

++

salut
pas besoin de div (ni de js) tu déplace ton h1 avec les mediaquerries

Hello,

Pour la déplacer physiquement dans le DOM, les media queries seront inefficaces (en tout cas je ne vois pas comment).

Effectivement la solution JS me semble être une bonne piste.

Il existait à l'époque une spécification CSS en brouillon qui s'appelait "Regions" et qui permettait de réaliser ce que tu souhaites, mais elle a été abandonnée. EDIT : en fait le brouillon existe encore mais les navigateurs ont cessé de l'implémenter : https://caniuse.com/css-regions

Bonne nouvelle : quelqu'un s'était amusé à créer un Polyfill (une simulation) qui fait le job. Tu peux le voir sur ce Codepen : https://codepen.io/raphaelgoetter/pen/aNrrNO

EDIT 2 : Peut-être que Anchor Positioning pourrait y parvenir mais il faudra sans doute bidouiller un peu (et le support navigateur n'est pas génial). Un exemple : https://codepen.io/raphaelgoetter/pen/raBjPZJ
Modifié par Raphael (15 May 2025 - 17:10)

Merci pour toutes ces contributions !
Je vais étudier tout ça au microscope.