Est-il acceptable de répéter la même balise h1 pour les navigateurs de bureau et mobiles sur un site responsive?
J'ai un site Web avec une page dont le contenu principal est une vidéo. Il utilise une présentation dynamique qui nécessite que la balise <h1> (avec le même texte) soit utilisée à deux endroits différents: un pour les navigateurs de bureau et un pour les navigateurs mobiles.
Je vais devoir masquer la version mobile de la balise <h1> pour les navigateurs de bureau, ainsi que la balise desktop <h1> pour les versions mobiles.
Cela posera-t-il des problèmes de référencement ou autres?
Ou si je fais du deuxième en-tête une simple balise <div> ou <p> au lieu d'une balise <h1> et que j'applique CSS en conséquence, cela serait-il acceptable?
L'utilisation de plusieurs balises H1 est valide en HTML 5, tant que chacune d'entre elles se trouve dans un élément <section> (à l'exception du premier H1 de la page). qui n’a pas besoin d’un wrapper spécifique).
Pour le référencement, Google a confirmé que plusieurs balises H1 conviennent.
Cependant, vous devriez revoir votre mise en page réactive, car exiger un H1 à deux endroits différents me semble étrange. Il est presque certainement possible de réaliser deux présentations différentes avec le même code HTML aux mêmes endroits. Peut-être posez-vous une question sur le dépassement de capacité avec votre scénario spécifique, vous aurez forcément une bonne réponse.
L'utilisation de plusieurs balises H1 est valide en HTML 5, à condition que chacune se trouve à l'intérieur d'un élément (à l'exception du premier H1 de la page qui n'a pas besoin d'un wrapper spécifique).