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="//spiritscaution.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="/yaml-tutorial/">Tutoriel Yaml</a> </li><li> <a href="/css-properties/">Propriétés Css</a> </li><li> <a href="/data-mining/">Exploration De Données</a> </li><li> <a href="/algorithms-greedy-algorithms/">Algorithmes-Algorithmes Gourmands</a> </li><li> <a href="/linux-tutorial/">Tutoriel Linux</a> </li><li> <a href="/google/">Google</a> </li><li> <a href="/python-numpy-indexing/">Indexation Numpy Python</a> </li><li> <a href="/css-misc/">Css-Divers</a> </li><li> <a href="/c-strings-programs/">Programmes De Chaînes C</a> </li><li> <a href="/splunk-tutorial/">Tutoriel Splunk</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="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Comment télécharger une vidéo YouTube dans VLC Media Player</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Comment télécharger une vidéo YouTube dans VLC Media Player avec blog, qu'est-ce que Quora, qu'est-ce que Yandex, page de contact, moteur de recherche Duckduckgo, journal des moteurs de recherche, Facebook, Google Chrome, Firefox, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-download-youtube-video-vlc-media-player"> <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="/quick-sort-vs-merge-sort">Tri rapide ou tri par fusion</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/star-cast-avengers">Casting vedette d'Avengers : L'ère d'Ultron</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-while-loop">Boucle while C++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/numpy-dot-python">numpy.dot() en Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-microkernel">Différence entre le micro-noyau et le noyau monolithique</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="/npm-clear-cache">cache npm vider</a>
</li><li><a href="/java-convert-int-string">java int dans la chaîne</a>
</li><li><a href="/numpy-standard-deviation">écart type numpy</a>
</li><li><a href="/how-call-javascript-function-html">appeler la fonction javascript depuis HTML</a>
</li><li><a href="/java-integer-parseint-method">int analyseur</a>
</li><li><a href="/difference-between-list">liste vs ensemble en java</a>
</li><li><a href="/hover-css">CSS en survol</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="//hr.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>
</body>
</html>