Horizontale lijn in HTML met en zonder CSS

Horizontale lijn in HTML is geen moeilijk concept om te decoderen. Maar laten we, voordat we daaraan toekomen, eerst de horizontale lijnen in het algemeen bekijken. U kunt horizontale lijnen toevoegen met behulp van CSS of HTML. Hoe werkt het? Het antwoord daarop vinden we hieronder.

Zoals we allemaal weten, kunnen we voor het scheiden van inhoud kiezen voor horizontale lijnen. Als het gaat om CSS, gebruik je randregels; terwijl we in het geval van HTML het HR-element gebruiken.

Met behulp van het HTML-element kun je de gebruikte onderstrepingen een semantische betekenis geven. Bovendien helpt CSS je bij het aankleden van je onderstrepingen. Over beide zul je in dit artikel meer leren. Bovendien gaan we het hebben over het gebruik van alleen CSS om onderstrepingen toe te voegen aan inhoud en tekst.

Om inhoud thematisch te onderbreken, kunt u HTML HR tag gebruiken. Volgens de oudere HTML-specificaties was de HR-tag in HTML bedoeld als een horizontale regel zonder semantische betekenis. Vandaag de dag is er geen zichtbare breuk in het geval van de HR-tag. Om hem zichtbaar te maken, moet je aanpassingen doen in CSS. Dit is een belangrijk aspect, omdat het de ontwerper meer controle geeft om ervoor te zorgen dat het thema van de site en de HTML HR-tag overeenkomen. Op deze manier kunt u gemakkelijk een HTML regeleinde toevoegen.

Horizontale lijn in HTML met de HR-tag

De HR tag in HTML is niets nieuws; hij bestaat al sinds het begin, voor zover we ons kunnen herinneren. We vertrouwden altijd op de HR tag wanneer we een horizontale lijn in HTML of een horizontale regel moesten toevoegen. De HR-tag in HTML is populair gebleven omdat we dit attribuut in de volgende scenario's kunnen gebruiken:

• Gemakkelijk visueel begrip
• Thematische onderbreking
• Geen afsluitende tag
• Semantiek

Het enige wat je hoeft te doen is tag toevoegen om een horizontale lijn te maken. Dit zal een lijn trekken over de hele breedte. Het zal echter beperkt blijven tot de container. Het is gemakkelijk om onderstreping CSS ook te verwijderen.

HR toevoegen

<hr />

We hebben attributen gebruikt om het HR element te stylen. Dankzij HTML5 is de HR-tag echter semantisch geworden. Met andere woorden, het laat de browser weten dat er een thematische onderbreking op paragraafniveau is. Dezelfde informatie kan worden verzonden naar een geautomatiseerd systeem of ondersteunende leestechnologie.

Hier krijgen we een onderbreking in de stroom van de inhoud in plaats van een nieuwe pagina. Met andere woorden, het laat een verandering van onderwerp weten. U kunt het bijvoorbeeld introduceren aan het einde van een sectie. Je kunt het introduceren vlak voor een nieuwe subkop.

Horizontale lijn in de Gutenberg editor

Horizontale lijn in de Gutenberg editor ziet er in code zo uit:

<hr class="wp-block-separator"/>

Dit maakt voor de CSS die ik zo ga bespreken niet veel uit. Je kan ook overwegen het scheidingsteken-blok te gebruiken van Gutenberg om een lijn te maken. Zie de handleiding hieronder:

HTML HR elementgrootte, kleur en stijlen beheren met CSS

De tijden zijn veranderd; je gebruikt CSS alleen om het HTML HR element te stylen. We gebruiken daarvoor geen attributen meer. Het eerste voordeel is dat je het juiste systeem gebruikt om renderregels op te stellen. Bovendien kunt u de regels zo vaak hergebruiken als u wilt. Uw lay-out wordt daardoor consistenter. Ten slotte wordt uw code beter onderhoudbaar.

De rendering van de lijn door de browser wordt mogelijk gemaakt door de stijlen toe te passen op zowel de rand- als de achtergrondstijl. Voor de standaardlijn is de randstijl de primaire stijl. Je kunt de rand niet verwijderen, want dan wordt de lijn ook gewist.

<hr style="border: none;">

Waarom is dit belangrijk?

Wel, je kunt nog steeds semantische informatie naar de visuele agent sturen met behulp van een onzichtbare lijn. Het belangrijkste is dat je visuele rommel, die de gebruikerservaring kan beïnvloeden, kunt wegwerken.

Laten we hieronder eens kijken naar de standaardstijlen van de gemeenschappelijke HR-tag:

hr {
weergave: blok;
margin-end: auto;
margin-start: auto;
border: 1px inset;
overflow: verborgen;
margin-before: 0.5em;
margin-after: 0.5em;
}

Wat de breedte van de regel betreft, die kun je instellen met de width property. Vervolgens kunt u de volgende CSS-regel gebruiken om hem in het midden te plaatsen.

hr {
   width: 60%;
   margin-right: auto;
   margin-left: auto;
}

De dikte van de lijn kunt u aanpassen door de waarde van de hoogte in te stellen. U kunt de kleur instellen met behulp van de eigenschap background-color. En als u de lijn semi-transparant wilt maken, kunt u de eigenschap opaciteit gebruiken.

hr {
   opcaity: 0.6;
   width: 250px;
   height: 150px;
   margin-right: auto;
   margin-left: auto;
   background-color:#777;
}

Een typische browser gaat voor een marge die ongeveer de halve breedte van een karakter is. U kunt deze waarde echter aanpassen aan uw voorkeur. Daardoor wordt uw lay-out verrijkt met hoogwaardige witruimte. Zo kun je gemakkelijk onderscheid maken tussen inhoudsonderbrekingen.

 hr {  
   width: 80%;
   height: 10px;
   border: 0 none;
   margin-right: auto;
   margin-left: auto;
   margin-top: 80px;
   margin-bottom:90px;
   background-color:#777;
}

Betere manieren om HR Tag in HTML te stylen met CSS

Er zijn veel manieren om HR Tag in HTML te stylen met CSS

Naast breedte en kleur kun je in HTML nog met allerlei andere stijlkeuzes voor je horizontale lijn spelen. Zoals je ziet, heb ik gekozen voor een afbeelding van vijf gele sterren als achtergrondstijl voor de horizontale lijn. We hebben er ook voor gezorgd dat deze zich herhaalt op de x-as.

Horizontale lijn maken met sterren of afbeelding in HTML met CSS

Ik raad aan de achtergrondkleur in te stellen op transparant. Zo voorkom je dat je per ongeluk de kleur onthult.

.sterren-lijn {
      width: 50%;
      height: 20px;
      border: none;
      margin: auto;
      margin-top: 5%;
      margin-bottom: 5%;
      background-repeat: repeat-x;
      background-position: center;
      background-color: transparent;
      background-image: url(images/ster-arthur.svg);
}

Als je speelt met de randstijl, kleur en grootte, laat je de lijn er anders uitzien. Je ziet een consistent effect in alle moderne browsers die er zijn. Zoals je in dit voorbeeld kunt zien, is de rand gestreept, rood en 1px breed:

CSS geeft je veel flexibiliteit, de mogelijkheden zijn immens. Al die achtergrondregels kunnen worden toegepast op een horizontale lijn in HTML. Het is een spannend voorstel om met de stijl te spelen.

Maar voordat we dat gaan verkennen, laten we eerst een paar eenvoudige trucs in CSS uitproberen. In dit voorbeeld gaan we de lijn veranderen in een stippellijn.

Gestippelde horizontale lijn maken in HTML met CSS

.dashed-border {
     width: 50%;
     margin: auto;
     margin-top: 5%;
     margin-bottom: 5%;
     border: 3px dashed #1A85FD;
}

Als u wilt spelen met uw lijnen in HTML, dan kunt u zich wenden tot CSS3. Dankzij de CSS 3 transformerende eigenschap kunt u het uiterlijk aanzienlijk veranderen. Wat betreft een transformatie op het HTML lijnelement, is onze keuze een rotatie.

Door deze transformatie te kiezen, kunt u de lijn van de HTML-tag enigszins schuin maken.

Maak een schuine lijn in HTML met CSS3

Je kunt de schuine lijn ook volledig verticaal trekken met transform:

Maak loodrechte of opgaande lijn in HTML met CSS3

Dit is echter niet aan te raden, omdat het kan leiden tot onnodige verstoringen van de lay-out. Maar ja, het is interessant om te leren dat dergelijke transformaties mogelijk zijn.

Geavanceerde CSS met lijnen boven of onder tekst of tekstblok

Geavanceerde CSS met lijnen kun je doen met het pseudo-element. U kunt pseudo-element gebruiken en dan kunt u de grootte van de rand wijzigen

.tekstblok {
  display: inline-block;
  position: relative;
}

. tekstblok:after {
  position: absolute;
  content: '';
  border-bottom: 1px solid #d2d7da;
  width: 70%;
  transform: translateX(-50%);
  bottom: -15px;
  left: 50%;
}

Voorbeeld lijn maken uit de praktijk

Ik heb dit bovenstaande bijvoorbeeld gebruikt in het uitklapmenu van deze website van trilogy.nl

Voorbeeld CSS

.menu-offcanv {
  display: inline-block;
  position: relative;
  padding-top: 18px;
  padding-bottom: 18px;
  margin-bottom: 5px !important;
  margin-right: 225px !important;
  font-size: 120%;
  color: #ed7522;
  letter-spacing: 1px;
  text-align: left;
  text-transform: uppercase;
  display: block;
  width: 100%; 
  max-width: 100%;
  border-bottom: 0.2em solid #f0c39e;
  margin: 1em 6p 8p;
}

.menu-offcanv:after {
  position: absolute;
  content: "";
  border-bottom: 10px solid #f0c39e;
  width: 30px;
  bottom: -10px;
  left: 0%;
}

Voorbeeld 2 CSS

Deze is het geworden 🙂

.menu-offcanv {
  display: inline-block;
  position: relative;
  padding-top: 18px;
  padding-bottom: 18px;
  margin-bottom: 5px !important;
  margin-right: 225px !important;
  font-size: 120%;
  color: #ed7522;
  letter-spacing: 1px;
  text-align: left;
  text-transform: uppercase;
  display: block;
  width: 100%; /*1em op 220505*/
  max-width: 100%;
  margin: 1em 6p 8p;
}

.menu-offcanv:after {
  position: absolute;
  content: "";
  border-bottom: 5px solid #f0c39e;
  width: 40px;
  bottom: -3px;
  left: 0%;
}

Tot slot over lijnen en CSS

Als je waarde wilt toevoegen aan je webdesign, dan kunnen lijnen daarvoor worden gebruikt. De pagina-indeling geniet van de semantische betekenis die de HR Tag geeft.

U kunt alle aanpassingen doen in CSS. Bovendien zult u behoorlijk onder de indruk zijn van de verscheidenheid aan gekke stijlen die kunnen resulteren in een aantrekkelijke lay-out.