Mettre la balise H1 a 2 endroits différents selon si c'est un écran de smartphone ou de PC

Grouik · 14 Mai 2025

Bonjour à tous ,

Le titre explique mon besoin. Je souhaite déplacer ma balise H1 pour un environnement de petit écran.

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

J'ai lu que ce n'était pas une bonne pratique, pourtant une seule balise ne s'affiche au final ?
Quelle autre solution puis je mettre en place ?

Je vous remercie grandement pour votre aide,

jp30 · 15 Mai 2025

Utiliser la propriété CSS Order pour changer la position d'affichage de ta balise

Grouik · 15 Mai 2025

Merci JP30 pour cette proposition,
Mais il me semble que la propriété Order ne permet de changer l'ordre qu'au sein d'un même conteneur. Or, nous souhaitons mettre la balise H1 dans une autre DIV.

Marie-Aude · 15 Mai 2025

Jouer sur les marges ?

rick38 · 16 Mai 2025

Si le texte est le même pour les 2 H1, ça ne doit pas poser de problème d'en cacher un...

En CSS ce que vous cherchez n'est pas possible, c'est la structure HTML responsive qui devrait être pensée différemment pour éviter ce problème.
Il y aurait bien la possibilité de le faire en JS mais ça n'est pas propre.

artoflog · 16 Mai 2025

je saiis pas si cest dans le sujet .mais a loeil je dirais media queries
https://forum.alsacreations.com/topic-27-91225-1-Balise-h1-adaptative.html a loeil
sinon ' javascriot is your friend

Grouik · 19 Mai 2025

Bonjour et merci à tous pour vos contributions,

@Marie-Aude
Je ne comprends pas ta proposition ... Je dois sortir la balise H1 d'une DIV pour la mettre dans une autre.

@rick38
Avant de poster ma demande, j'ai testé ma proposition qui est tout à fait fonctionnelle. Mon souci touche le référencement. J'ai lu je ne sais plus où, que mettre 2 fois la balise H1 dans une page HTML était le meilleur moyen de perdre gros en référencement. Comme mon code concerne toutes les pages produit d'un gros site de ecommerce Prestashop, je ne vais pas trop jouer, et j'aimerais trouver une autre solution. Peut-être quand tu dis que ce n'est pas possible, tu veux me faire comprendre qu'il ne faut pas le faire ?
Pourquoi cela ne serait pas propre en JS, car c'est effectivement la solution qui me semble la plus adaptée.

@artoflog
Avec les Media Query je n'ai pas trouvé le moyen de déplacer ma balise H1 dans une autre DIV.
Effectivement, je vais étudier le JS, mais selon rick38, cela n'est pas propre. Qu'en penses tu ?

Merci encore pour vos remarques constructives,

Ayounonyou · 19 Mai 2025

Grouik a dit:
Bonjour à tous ,

Le titre explique mon besoin. Je souhaite déplacer ma balise H1 pour un environnement de petit écran.

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 :
#name_outside { [USER=46533]@media[/USER] (min-width: 767px) { display: none; }et l'autre
#name_inside { [USER=46533]@media[/USER] (max-width: 767px) { display: none; } }J'ai lu que ce n'était pas une bonne pratique, pourtant une seule balise ne s'affiche au final ?
Quelle autre solution puis je mettre en place ?

Je vous remercie grandement pour votre aide,

Salut

Alors oui, techniquement il n’y a qu’un seul H1 visible à la fois… mais Google lit tout, y compris ce qui est caché avec display: none. Du coup, avoir deux balises H1 sur une même page, même si une seule est affichée à la fois, reste déconseillé pour le SEO.

Place ton H1 à un seul endroit dans ton HTML, mais change sa position/visibilité/ordre d’affichage en fonction de l’écran avec du CSS. Par exemple, tu peux :

<h1 id="main-title">Ton super titre</h1>

Puis apres dans ton css
#main-title {
/* styles généraux */
font-size: 2rem;
}

/* Grand écran */
@media (min-width: 768px) {
#main-title {
position: absolute;
top: 20px;
left: 20px;
}
}

/* Mobile */
@media (max-width: 767px) {
#main-title {
position: relative;
margin-top: 60px;
}
}

Tu peux aussi jouer avec order si tu es en flex, ou simplement cacher/montrer des conteneurs, mais le H1 reste unique.

Grouik · 19 Mai 2025

Ayounonyou a dit:
Salut

Alors oui, techniquement il n’y a qu’un seul H1 visible à la fois… mais Google lit tout, y compris ce qui est caché avec display: none. Du coup, avoir deux balises H1 sur une même page, même si une seule est affichée à la fois, reste déconseillé pour le SEO.

Place ton H1 à un seul endroit dans ton HTML, mais change sa position/visibilité/ordre d’affichage en fonction de l’écran avec du CSS. Par exemple, tu peux :

<h1 id="main-title">Ton super titre</h1>

Puis apres dans ton css
#main-title {
/* styles généraux */
font-size: 2rem;
}

/* Grand écran */
@media (min-width: 768px) {
#main-title {
position: absolute;
top: 20px;
left: 20px;
}
}

/* Mobile */
@media (max-width: 767px) {
#main-title {
position: relative;
margin-top: 60px;
}
}

Tu peux aussi jouer avec order si tu es en flex, ou simplement cacher/montrer des conteneurs, mais le H1 reste unique.

Bonjour Ayounonyou,

Merci pour ta réponse. Je dois placer la balise H1 dans une autre DIV, avec ta méthode je ne vois pas comment faire.
Sur un grand écran j'ai 2 colonnes. La colonne de gauche (DIV) où il y a une photo, celle du milieu où il y a la balise H1 et dessous une longue description dans la même DIV.
Sur un petit écran la 1ère colonne se met en 1er, et dessous la 2ème. Il faut scroller un max pour voir le titre de la page.
Je souhaite que ma balise H1 et uniquement cette balise (pas toute la DIV qui contient pleins d'autres choses) se retrouve dans cette 1ère DIV sur les petits écrans.
Merci encore pour ta contribution.

cthierry · 19 Mai 2025

1/ Avoir une URL serait plus parlant pour se faire une idée de la demande.
2/ Compte tenu de ta dernière réponse, un passage par JS sera la seule solution, car le CSS order, qui est une bonne idée, ne fera pas ce que tu souhaites.
3/ Il semble que tu ne gères pas, ou ne respectes pas bien le responsive pour que ce genre de problème apparaisse.

Grouik · 19 Mai 2025

Bonjour Cthierry,
Merci pour ta réponse.

1- Il s'agit de la page produit d'un site de ecommerce Prestashop par exemple : https://demo.prestashop.com/#/en/front
Clique sur un produit de façon à arriver sur une page produit avec le panier. Tu constateras que lorsque tu passes sur le format du plus petit écran la balise H1 se trouve sous la photo, et je trouve ça vraiment dommage ... Toutes les versions de Prestashop sont concernées.

2- Effectivement j'ai l'impression que le JS soit la solution la plus propre.

3- Le responsive semble être correctement géré.

Alors oui je pourrai mettre la balise H1 au-dessus de la photo pour les grands écrans, elle se retrouverait ainsi également au-dessus pour les petits écrans. Mais cette présentation me parait bien équilibrée pour les grands écrans mais pas pour les petits.

Merci encore pour ta suggestion

artoflog · 19 Mai 2025

cest impossible dans le scema dune page html bourin a lanciene (= ce que google veut voir 2 h1
m
lr shema de baseapres tu peux mettre 5000 h1 si tu veux mais ca sert a kesdal
faut revenir toujours toujours toujours au shema html de 1920; apres tu peux faire tout ce que tu veux avec du css et du javascript
si ca te plait fait un sapin de noel avec des guilandes qui brillent.le tout gene re avec une intelligence artificielle speciale noel
et affiche a laide de nlink sur un percalculateur . mais au final il faut une page html bourin avec des regles de 1925 a donner a google et pas 2 h1. 1 optimisee pas avec un roman cest deja bien:.y a un nombtre de caracteres max cest plus interressant a compre plutot que den mettre 2 ( cest une idee ecuse et moi de newbi

Grouik · 19 Mai 2025

Merci Artoflog pour ces précieux conseils d'une limpidité troublante !
Je photocopie une taupe, enfile un suppositoire au lapin frisé de Chine, et je tente le Tiramisu. Kamoulox !
Merci encore pour ta contribution, ça m'a détendu

cthierry · 19 Mai 2025

Dans ce cas, pour ton template produit, tu peux gérer deux affichages en fonction de la résolution de l'écran, un avec l'image à gauche, le titre et la description à droite, l'autre avec le titre en premier, l'image en dessous et la description ensuite. Et le tout géré avec une condition, genre un truc comme cela (c'est un exemple

) :

Code:

{if $is_mobile}
  {include file='product-mobile.tpl'}
{else}
  {include file='product-desktop.tpl'}
{/if}

Ayounonyou · 20 Mai 2025

Grouik a dit:
Bonjour Ayounonyou,

Merci pour ta réponse. Je dois placer la balise H1 dans une autre DIV, avec ta méthode je ne vois pas comment faire.
Sur un grand écran j'ai 2 colonnes. La colonne de gauche (DIV) où il y a une photo, celle du milieu où il y a la balise H1 et dessous une longue description dans la même DIV.
Sur un petit écran la 1ère colonne se met en 1er, et dessous la 2ème. Il faut scroller un max pour voir le titre de la page.
Je souhaite que ma balise H1 et uniquement cette balise (pas toute la DIV qui contient pleins d'autres choses) se retrouve dans cette 1ère DIV sur les petits écrans.
Merci encore pour ta contribution.

Essayes de garder un seul H1 dans le HTML, par exemple dans la colonne centre (contenu principal) et ensuite de le dupliquer visuellement sur mobile dans la colonne image, sans le dupliquer dans le HTML. Attention de bien sauvegarder une version que tu jugera bonne avant de faire des tests

Dans le HTML par exemple:

<div class="layout">
<div class="col-left">

<div id="h1-placeholder"></div>
<img src="image.jpg" alt="">
</div>

<div class="col-center">
<h1 id="main-title">Titre de la page</h1>
<p>Contenu long...</p>
</div>
</div>

Et le CSS par exemple:

/* Desktop : H1 visible à sa place */
@media (min-width: 768px) {
#main-title {
display: block;
position: static;
}

#h1-placeholder {
display: none;
}
}

/* Mobile : on déplace visuellement le H1 dans la colonne gauche */

@media (max-width: 767px) {
#main-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
font-size: 1.5rem;
z-index: 10;
}

#h1-placeholder {
height: 60px; /* Réserve un espace pour que le H1 ne chevauche rien */
}
}

Sinon, tu peux peut etre essayer de rendre le H1 juste fixe sur mobile dans le css :

@media (max-width: 767px) {
#main-title {
position: sticky;
top: 0;
background: white;
padding: 10px;
z-index: 1000;
}
}

Grouik · 20 Mai 2025

Bonjour,
Merci pour ces précieuses recommandations, je sens que l'on touche au but, je n'avais pas imaginé ces solutions.
Je vous fait un retour.

Grouik · 22 Mai 2025

J'ai commencé par mettre en place la proposition de Ayounonyou et puis je ne suis pas arrivé au résultat escompté.
Au final j'ai opté pour la solution de Cthierry avec un tpl par taille d'écran.
Merci encore pour vos suggestions !
++

artoflog · 23 Mai 2025

cest de l'usine a gaz tout ca. seul celui qui a écrit son code comprend ce machin
désolé.peut etre que ca fonctionne sur un malentendu