Création site Web 100% Gratuit

Chez nous, vous ne payez que nos abonnements de maintenance, la création de votre site est offerte.
*Offre valable jusqu’à fin novembre 2022

Le guide en 2 minutes de l’élément ligne horizontale du HTML

Août 6, 2022

article de blog

Pourquoi faire une ligne horizontale en HTML

Disons que vous voulez marquer un changement de scène dans une pièce de théâtre, une nouvelle section d’un essai ou la conclusion d’un article. Dans tous ces cas, vous pouvez créer une ligne horizontale pour marquer visuellement ce changement.
Regardez cet exemple sur The Atlantic qui marque la fin de l’article et le début de la biographie de l’auteur.

Maintenant que nous avons compris l’intérêt d’une ligne horizontale, voyons comment en créer une en HTML.

Comment faire une ligne horizontale en HTML

Pour créer une ligne horizontale en HTML, utilisez l’élément « hr ». Vous pouvez placer l’élément « hr » – qui signifie « règle horizontale » – où vous voulez pour créer une ligne horizontale sur une page Web. Comme l’élément img, l’élément « hr » est un « élément vide » car il n’a pas de balise de fermeture.

Pour créer une ligne horizontale par défaut, je vais ajouter la balise « hr » entre deux éléments de paragraphe.

L’élément « hr » était auparavant non sémantique, vous pouviez donc le styliser en utilisant les attributs suivants .

Attributs dépréciés
Objectif

color= »… »
Définit la couleur de la ligne horizontale.

width= »… »
Définit la largeur de la ligne horizontale.

size= »… »
Définit la hauteur de la ligne horizontale.

align= »… »
Définit l’alignement de la ligne horizontale.

noshade
Définit la ligne horizontale comme étant solide, sans ombrage.

Cependant, dans HTML5, l’élément « hr » est devenu sémantique. Le HTML sémantique est en fait un code HTML qui dit ce qu’il fait. C’est mieux pour l’accessibilité du Web, car les navigateurs, les technologies d’aide à la lecture et d’autres systèmes automatisés seront capables de reconnaître une rupture thématique. Cela signifie également que les attributs ci-dessus ont été dépréciés.
Pour styliser l’élément « hr », vous devez désormais utiliser le CSS. Voyons comment modifier la couleur, la largeur et la position d’une ligne horizontale à l’aide du CSS ci-dessous.

Couleur des lignes horizontales HTML

Vous pouvez utiliser la propriété CSS background-color pour définir la couleur de l’élément ligne horizontale. Mais d’abord, vous devez spécifier la hauteur de l’élément « hr ». Vous devez également définir la propriété border-width sur 0. Sinon, la ligne horizontale grise par défaut apparaîtra empilée sur la ligne colorée plus épaisse que vous créez.
Voici un exemple :
oNZEeJE .

Largeur des lignes horizontales HTML

Vous pouvez utiliser la propriété CSS width pour définir la largeur de l’élément ligne horizontale. Vous pouvez définir cette propriété avec des pourcentages ou des valeurs de longueur (px, pt, em et rem, entre autres).

Largeur de la ligne horizontale HTML .

Alignement des lignes horizontales du HTML

Vous pouvez utiliser la propriété CSS margin pour modifier la position de l’élément ligne horizontale. Par exemple, si je veux que la ligne soit alignée à gauche plutôt que centrée, je peux définir la propriété margin-left sur 0. Je dois également définir la largeur de l’élément « hr ».
Voici un exemple de ligne horizontale stylisée à l’aide des propriétés width et margin :
abJqLQa .

Une astuce HTML simple

Connaître les bases du langage HTML peut s’avérer extrêmement utile pour les spécialistes du marketing numérique. Cela peut vous éviter de dépendre d’un webmaster ou d’un développeur web indépendant pour de simples mises à jour de votre site Web ou de votre newsletter, comme la création d’une ligne horizontale sur la page.
Note de l’éditeur : ce billet a été publié à l’origine en juillet 2011 et a été mis à jour pour plus d’exhaustivité.

29 des meilleurs outils SEO pour auditer et surveiller votre site Web en 2022

L’objectif du marketing est de générer du trafic et des prospects qualifiés via le site Web de l’entreprise. C’est pourquoi, en tant que spécialistes du marketing, nous devons comprendre exactement ce que nous pouvons …

Besoin de plus de visiteurs sur votre site Web ? Revenez à l’essentiel

Lorsque vous entendez le terme « SEO » ou « optimisation pour les moteurs de recherche », pour qui pensez-vous que cela implique que vous devriez optimiser votre site ? Eh bien, je vais vous donner un indice : ce n’est pas pour les moteurs …

Demander l’indexation Google pour être trouvé plus rapidement

Lors de l’indexation, les moteurs de recherche comme Google enregistrent les pages web dans leur répertoire. Seul ce qui se trouve dans ce répertoire est affiché aux utilisateurs dans dans la recherche Google. …

Votre site 100% Gratuit

Profitez de votre création de site gratuite 👍
* Offre limitée jusqu’à fin Novembre

Vous souhaitez poster un commentaire ?

0 commentaires