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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><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><!--//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="/linux-tutorial/">Tutoriel Linux</a> </li><li> <a href="/strings/">Cordes</a> </li><li> <a href="/physics-formulas/">Formules De Physique</a> </li><li> <a href="/java-collections/">Collections Java</a> </li><li> <a href="/software-engineering/">Génie Logiciel</a> </li><li> <a href="/spring-cloud-tutorial/">Tutoriel Spring Cloud</a> </li><li> <a href="/algorithms-misc/">Algorithmes-Divers</a> </li><li> <a href="/java-instant-class/">Classe Instantanée Java</a> </li><li> <a href="/jdbc/">Jdbc</a> </li><li> <a href="/cricket/">Criquet</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Exemple de cas de test JUnit en Java</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Exemple de cas de test JUnit en Java avec tutoriel Java, fonctionnalités, historique, variables, objets, programmes, opérateurs, concept oops, tableau, chaîne, carte, mathématiques, méthodes, exemples, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/junit-test-case-example-java"> <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="/how-check-open-ports-linux">Comment vérifier les ports ouverts sous Linux</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-eval-function">Fonction JavaScript eval()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/neet/">Neet</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/lbs-newtons-converter-free-online-converter">Convertisseur de livres en newtons – Convertisseur en ligne gratuit</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-color-does-red">Quelle couleur donnent le rouge et le blanc lorsqu’ils sont mélangés ?</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="/static-function-java">fonction statique en Java</a>
</li><li><a href="/bash-sleep">dormir</a>
</li><li><a href="/who-invented-school">comment l'école a été inventée</a>
</li><li><a href="/java-string-replaceall">java remplacer toute la chaîne</a>
</li><li><a href="/how-find-out-my-monitor-size">comment puis-je connaître la taille de mon moniteur</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="//uk.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>