HTML: Horizontale Linie – So gehts

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
smileys

Mit dem <hr> Tag lassen sich horizontale Linien darstellen. Auch das <hr> Tag kannst du mit CSS noch etwas schöner machen. Wenn du eine klassische Horizontale Linie zeichnen möchtest. Gibst du einfach in deinen HTML Code ein <hr> Tag ein. Dieses Tag musst du nicht beenden denn es steht für sich alleine und bezeichnet keinen Bereich.

Beispiel: Einfache Linie

<hr>

Ergebnis


Mit etwas CSS kannst du die Linie noch etwas schöner gestalten.

<hr style="color: black; height: 20px;" />

Ergebnis

Das Ergebnis ist eine Rosa Linie mit einer höhe von 5 Pixel wie im CSS Code


Grundlegende Einstellungen

Wenn du kein eigenen CSS Element zu deiner Horizontalen Linie hinzufügst zeigen die Browser Standard mäßig diese Attribute an

hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}

Jetzt HTML lernen

Mit horizontalen Linien lassen sich in HTML wunderbar Abschnitte oder Trennzeichen erstellen. Du kannst somit dem Leser einfacher zeigen das hier ein gewisser Abschnitt zu Ende ist und einer neuer beginnt. Auch mit CSS lassen sich strong><hr> Tag Tags bearbeiten und verändern.

Weitere Beiträge zu HTML

HTML: Text in Zwischenablage kopieren – So gehts
HTML: Grundgerüst – Webseite erstellen
HTML: Textarea erstellen – So gehts
PHP in HTML einfügen – So gehts!
HTML: Rahmen um Text – So gehts

HTML Datei öffnen – Kostenloser Editor 2021
HTML: Anker erstellen – So wirds gemacht!
HTML: 302 Redirect – So einfach gehts!
HTML: URL Parameter Erklärung
HTML: Bild einfügen – So gehts!

Jquery in HTML einbinden : So wirds gemacht!
HTML: Zurück Button & Link erstellen: So gehts!
HTML: Versteckter und Unsichtbarer Text : So gehs
HTML: Großbuchstaben schreiben: So gehts!
HTML: Icons einfügen: So gehts!

HTML: iFrame in Webseite einbinden – So gehts!
HTML: Liste erstellen – So gehts!
HTML: Erzwungenes Leerzeichen einfügen – So gehts!
CSS in HTML einbinden – So gehts!
HTML: Leerzeichen erstellen – So einfach gehts!

HTML: Auskommentieren – So gehts!
HTML: Bild zentrieren und mittig ausrichten
HTML: Fett schreiben – So einfach gehts!
HTML Text ausrichten: rechtsbündig & linksbündig
HTML: Zeilenabstand einstellen – So gehts!

HTML: Trennlinie einfügen – So gehts!
HTML: Absatz einfügen – So gehts!
HTML: Horizontale Linie – So gehts
HTML: Tabellen erstellen – So gehts!
HTML: Datum & Uhrzeit anzeigen – So gehts!


    html        html horizontale linie   

Das könnte dich interessieren!


Weitere Kategorien






Kommentare sind geschlossen.



21640