In diesem Blogartikel erkläre Textformatierung und Strukturierung mit HTML.
Überschriften <h1> bis <h6>
In HTML gibt es sechs verschiedene Überschriften-Tags, die von <h1> (die wichtigste und größte Überschrift) bis <h6> (die kleinste und am wenigsten wichtige Überschrift) reichen. Überschriften-Tags (<h1> bis <h6>) sind wichtig, um den Inhalt einer Webseite zu strukturieren und zu organisieren. Sie helfen nicht nur den Besuchern der Seite, den Inhalt besser zu verstehen, sondern sind auch für Suchmaschinen und Screenreader wichtig.
<h1>: Hauptüberschrift, die wichtigste Überschrift auf einer Seite.
Beispiel:
<h1>Dies ist eine Hauptüberschrift</h1>
<h2>: Unterüberschrift, weniger wichtig als <h1>.
Beispiel:
<h2>Dies ist eine Unterüberschrift</h2> <h3>: Noch eine Ebene niedriger.</h3>
Beispiel:
<h3>Dies ist eine dritte Überschriftsebene</h3>
Absätze (<p>)
Absätze werden mit dem <p>-Tag erstellt und dienen dazu, Text in logische Blöcke zu unterteilen. Absätze sind ein grundlegendes Element in HTML, um Textinhalte zu strukturieren. Sie helfen dabei, den Text übersichtlich und leserfreundlich zu gestalten. Setzen Sie einen Absatz wenn Sie einen neuen Gedanken beginnen. Setzen Sie Absätze um die Lesbarkeit bei langen Texten zu verbessern. Absätze sorgen für eine klare visuelle Struktur auf der Webseite. Sie helfen dabei, den Text klar von anderen Elementen wie Überschriften, Listen oder Bildern zu trennen.
Beispiel:
Dies ist ein Absatz. Er wird verwendet, um Text in getrennte Blöcke zu unterteilen.
Listen
Listen sind sehr nützlich, um Informationen übersichtlich und strukturiert darzustellen. Durch den Einsatz von Listen können Informationen übersichtlicher und verständlicher dargestellt werden.
Es gibt zwei Haupttypen von Listen in HTML: ungeordnete Listen und geordnete Listen.
Ungeordnete Listen (<ul>)
Ungeordnete Listen werden verwendet, wenn die Reihenfolge der Elemente nicht wichtig ist. Ungeordnete Listen verwenden Aufzählungspunkte (Bullets).
Beispiel:
<ul> <li>Erstes Element</li> <li>Zweites Element</li> <li>Drittes Element</li> </ul>
Geordnete Listen (<ol>)
Geordnete Listen werden verwendet, wenn die Reihenfolge der Elemente wichtig ist.
Geordnete Listen verwenden Nummerierungen.
Beispiel:
<ol> <li>Erstes Element</li> <li>Zweites Element</li> <li>Drittes Element</li> </ol>
Listenelemente (<li>)
Listenelemente werden sowohl in ungeordneten als auch in geordneten Listen verwendet.
Beispiel in einer ungeordneten Liste:
<ul> <li>Element 1</li> <li>Element 2</li> </ul>
Beispiel in einer geordneten Liste:
<ol> <li>Element 1</li> <li>Element 2</li> </ol>
Textformatierung
Textformatierungen in HTML helfen dabei, wichtige Teile des Textes hervorzuheben und die Lesbarkeit zu verbessern. Es gibt verschiedene Tags, um Text zu formatieren, wie fett, kursiv und unterstrichen.
Fett (<b>)
Beispiel:
<b>Dies ist fetter Text.</b>
Kursiv (i)
Beispiel:
<i>Dies ist kursiver Text.</i>
Unterstrichen (<u>)
Beispiel:
<u>Dies ist unterstrichener Text.</u>
Zusammengefasstes Beispiel
Hier ist ein Beispiel, das alle oben genannten Elemente kombiniert:
<!DOCTYPE html>
<html>
<head>
<title>HTML Grundlagen</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<p>Dies ist ein Absatz. <b>Dies ist fetter Text</b>, <i>dies ist kursiver Text</i> und <u>dies ist unterstrichener Text</u>.</p>
<h3>Ungeordnete Liste</h3>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
<h3>Geordnete Liste</h3>
<ol>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ol>
</body>
</html>
Schlussbemerkung
Textformatierung und Strukturierung sind in HTML möglich und sollten unbedingt eingesetzt werden um die Lesbarkeit und die Barrierefreiheit zu verbessern.
Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .
Ein Gedanke zu „HTML lernen leicht gemacht: Textformatierung und Strukturierung“