Bij het creëren van een visueel aantrekkelijke en goed gestructureerde webpagina wordt vaak gebruik gemaakt van horizontale lijnen. Deze regels kunnen helpen verschillende delen van de inhoud van elkaar te scheiden, waardoor het voor gebruikers gemakkelijker wordt om de gepresenteerde informatie te lezen en te begrijpen. In deze handleiding verkennen we twee effectieve methoden om horizontale lijnen in HTML toe te voegen: met behulp van de>
tag- en CSS-eigenschappen.
Verschillende benaderingen om horizontale lijnen toe te voegen in HTML
1. Gebruiken
label:
De Horizontale regel T bij (
)wordt gebruikt om horizontale lijnen in het HTML-document in te voegen om secties van het document van elkaar te scheiden. Het is een lege of ongepaarde tag, wat betekent dat er geen afsluitende tag nodig is.
Voorbeeld: Dit voorbeeld beschrijft de
tag om de horizontale lijn toe te voegen.HTML
Horizontale lijntitel> kop> <body> <h2>Horizontale lijn met verschillende attributensh2><hr width='100%' size='2'> <hr width='100%' size='2' color='blue' noshade> <hr width='100%;' color='red' size='5'>body>html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html.webp' alt="Horizontale HTML-lijn met hr-tag"><p>Uitvoer</p> <h3> <b> <strong>2. CSS-eigenschappen gebruiken:</strong> </b> </h3><p dir='ltr'><span>In deze aanpak zullen we gebruik maken van de</span> <i> <em>rand-stijl</em> </i> <span>Eigendom</span> <i> <em> </em> </i> <span>om de horizontale lijn te maken. We kunnen ofwel de</span> <i> <em>grens-top</em> </i> <span>eigenschap die de stijl van de bovenrand of de</span> <i> <em>grens-bodem</em> </i> <span>eigenschap, die de stijl van de onderrand van een element kan instellen. Beide eigenschappen kunnen worden gebruikt om de horizontale lijn toe te voegen.</span></p> <p dir='ltr'> <b> <strong>Voorbeeld:</strong> </b> <span>Dit voorbeeld beschrijft het tekenen van de horizontale lijn met behulp van de</span> <i> <em>rand-stijl</em> </i> <span>Eigendom.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Horizontale lijn met behulp van CSS Propertiestitle><style>.horizontale_lijn {breedte: 90%; hoogte: 5px; rand bovenaan: 5px gestippeld zwart; lijnhoogte: 80%; } .line { border-bottom: 5px effen rood; marge bovenaan: 5px; breedte: 90%; } stijl> hoofd> <body> <h2>Horizontale lijn met CSS Propertiesh2><h3>horizontale stippellijnh3><div>div><h3>Effen horizontale lijnh3><div>div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html-2.webp' alt="horizontale lijn met behulp van CSS-voorbeelduitvoer"><p>Uitvoer</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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/javascript-array/">Javascript-Array</a> </li><li> <a href="/arrays/">Arrays</a> </li><li> <a href="/cyber-security-tutorial/">Handleiding Voor Cyberbeveiliging</a> </li><li> <a href="/geometric-lines/">Geometrische Lijnen</a> </li><li> <a href="/restful/">Rustig</a> </li><li> <a href="/dip-tutorial/">Dip-Zelfstudie</a> </li><li> <a href="/macos-tricks/">Macos-Trucs</a> </li><li> <a href="/python-time-module/">Python-Tijdmodule</a> </li><li> <a href="/exception-handling/">Afhandeling Van Uitzonderingen</a> </li><li> <a href="/gblog-2024-cat/">Gblog 2024</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">__init__ in Python</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Een informaticaportaal voor nerds. Het bevat goed geschreven, goed doordachte en goed uitgelegde artikelen over computerwetenschappen en programmeren, quizzen en vragen over oefenen/competitief programmeren/bedrijfsinterviews.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/__init__-python"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/ioc-container">IoC-container</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sql-insert-statement">SQL INSERT-VERKLARING</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/enum-python">opsomming in Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-integer-intvalue-method">Java Integer intValue()-methode</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/node-js-misc/">Node.js-Overig</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">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/string-concatenation-java">aaneenschakeling van Java-tekenreeks</a>
</li><li><a href="/java-convert-string-char">tekenreeks naar char java</a>
</li><li><a href="/java-hashset">wat is een hashset in Java</a>
</li><li><a href="/what-is-core-java">kern Java</a>
</li><li><a href="/java-double-keyword">wat is een dubbele Java</a>
</li><li><a href="/java-comments">Java-opmerkingen</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 Alle Rechten Voorbehouden | <a href="//ro.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij?</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid</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>