Créer une page Web visuellement attrayante et bien structurée implique souvent l'utilisation de lignes horizontales. Ces lignes peuvent aider à séparer les différentes sections de contenu, permettant ainsi aux utilisateurs de lire et de comprendre plus facilement les informations présentées. Dans ce guide, nous explorerons deux méthodes efficaces pour ajouter des lignes horizontales en HTML : en utilisant le>
balise et propriétés CSS.
Différentes approches pour ajouter une ligne horizontale en HTML
1. Utilisation
étiqueter:
Le La règle horizontale t à (
)est utilisé pour insérer des lignes horizontales dans le document HTML pour séparer les sections du document. Il s’agit d’une balise vide ou non appariée, ce qui signifie que la balise de fermeture n’est pas nécessaire.
Exemple: Cet exemple décrit le
balise pour ajouter la ligne horizontale.HTML
Titre de la ligne horizontale> tête> <body> <h2>Ligne horizontale utilisant divers attributssh2><hr width='100%' size='2'> <hr width='100%' size='2' color='blue' noshade> <hr width='100%;' color='red' size='5'>corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html.webp' alt="Ligne horizontale HTML utilisant la balise hr"><p>Sortir</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-extend-multiple-classes">une classe peut-elle étendre plusieurs classes</a>
</blockquote> <h3> <b> <strong>2. Utilisation des propriétés CSS :</strong> </b> </h3><p dir='ltr'><span>Dans cette approche, nous utiliserons le</span> <i> <em>style de bordure</em> </i> <span>Propriété</span> <i> <em> </em> </i> <span>pour créer la ligne horizontale. On peut soit utiliser le</span> <i> <em>bordure supérieure</em> </i> <span>propriété qui spécifie le style de la bordure supérieure ou du</span> <i> <em>Bordure du bas</em> </i> <span>propriété, qui peut définir le style de la bordure inférieure d’un élément. Les deux propriétés peuvent être utilisées pour ajouter la ligne horizontale.</span></p> <p dir='ltr'> <b> <strong>Exemple:</strong> </b> <span>Cet exemple décrit le tracé de la ligne horizontale à l'aide de la</span> <i> <em>style de bordure</em> </i> <span>Propriété.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Ligne horizontale utilisant les propriétés CSStitle><style>.horizontal_line { largeur : 90 % ; hauteur : 5px ; bordure supérieure : 5 px en pointillé noir ; hauteur de ligne : 80 % ; } .line { border-bottom : 5px rouge uni ; marge supérieure : 5 px ; largeur : 90 % ; } style> tête> <body> <h2>Ligne horizontale utilisant CSS Propertiesh2><h3>ligne horizontale pointilléeh3><div>div><h3>Ligne horizontale simpleh3><div>div> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html-2.webp' alt="ligne horizontale utilisant un exemple de sortie CSS"><p>Sortir</p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Catégorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/c-conversion-programs/">Programmes De Conversion C</a> </li><li> <a href="/advance-java/">Avancer Java</a> </li><li> <a href="/http-headers/">En-Têtes Http</a> </li><li> <a href="/misc/">Divers</a> </li><li> <a href="/python-numpy-random/">Python Numpy-Aléatoire</a> </li><li> <a href="/svn-tutorial/">Tutoriel Svn</a> </li><li> <a href="/chrome/">Chrome</a> </li><li> <a href="/java-arrays/">Tableaux Java</a> </li><li> <a href="/hashtable/">Table De Hachage</a> </li><li> <a href="/microsoft-azure-tutorial/">Tutoriel Microsoft Azure</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Ankita Lokhande</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Ankita Lokhande : Biographie, Âge avec Mère Teresa, Narendra Modi, Mahatma Gandhi, Amitabh Bachchan, Humayun, Mangal Pandey Biographie etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/ankita-lokhande"> <i class="fa fa-external-link"></i> Lire La Suite</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Des Articles Intéressants</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/ultimate-guide-scorpio-compatibility-131200">Guide ultime de la compatibilité avec le Scorpion : chaque signe, noté</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/kruskals-algorithm">L'algorithme de Kruskal</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-open-url-new-tab-using-javascript">Comment ouvrir une URL dans un nouvel onglet en utilisant JavaScript ?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/combinatorial/">Combinatoire</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/union-c">Union en C</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Articles Populaires</h2>
<div class="content">
<ul class="list"> <li><a href="/javascript-if-else">javascript si instruction</a>
</li><li><a href="/how-find-java-version-linux">vérifier la version Java sous Linux</a>
</li><li><a href="/convert-java-object-json">convertir un objet Java en json</a>
</li><li><a href="/how-sort-list-java">Java trier une liste</a>
</li><li><a href="/supervised-machine-learning">apprentissage automatique supervisé</a>
</li><li><a href="/java-string-replace">remplacer la chaîne en java</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Tous Les Droits Sont Réservés | <a href="//sk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>