Wer eine Webseite auf Basis eines CMS hat, die Nase voll vom internen Editor hat und den Inhalt gerne mit HTML selber formatieren möchte, ist hier richtig. Um Formatierungen am Text vorzunehmen, musst du nämlich nicht wissen, wie eine HTML-Seite aufgebaut ist. Es reicht, wenn du weißt, wie du dem Text sagst, welche Formatierung du ihm zugedacht hast.

Daher fangen wir einfach bei einem Text von vorne nach hinten an und arbeiten uns immer weiter ins Detail vor.

Überschriften

Ein Text beginnt in der Regel mit einer Überschrift. Wenn er gut strukturiert ist, enthält er noch mehr Unter-Überschriften. Das h in <h1> steht für "Headline" und die Zahl dahinter für die Größe der Überschrift. Je kleiner die Zahl, desto höher ist der Rang der Überschrift. Wichtig ist, dass jede Seite nur eine Überschrift erster Ordnung, also nur eine H1 haben darf. Das ist wichtig für Suchmaschinen wie Google, die auf Basis der Informationen, die wir dem Text über das HTML mitgeben, den Inhalt der Seite auswerten.

<h1>Überschrift 1</h1>

<h2>Überschrift 2</h2>

<h3>Überschrift 3</h3>

<h4>Überschrift 4</h4>

<h5>Überschrift 5</h5>

<h6>Überschrift 6</h6>

Absätze

Einen Absatz kennzeichnest du mit <p> wie "paragraph". Die Browser sind so voreingestellt, dass sie nach jedem Absatz einen kleinen Zwischenraum zum nächsten Absatz anzeigen.

<p>Text des Absatzes. Der Text kann gern mehrzeilig sein, solange klar ist, wo der Absatz beginnt und wo er endet.</p>

Wenn du nur einen normalen Zeilenumbruch ohne Abstand haben möchtest, kannst du das mit dem Tag <br> (wie "break") machen.

Eine Zeile.<br>
Eine zweite Zeile nach einem Zeilenumbruch.

Eine Besonderheit bei <br> ist, dass es kein schließendes Tag benötigt.

Ein weiteres Element, bei dem das der Fall ist, ist <hr>. Damit machst du eine horizontale Linie. Das kann praktisch sein, um Bereiche deutlicher voneinander abzugrenzen.

<p>Ein Absatz.</p>
<hr>
<p>Ein durch eine horizontale Linie abgetrennter Absatz.</p>

Zitate

Ein Element, das man vielleicht nicht in jedem Text benötigt, ist ein Zitat. Dennoch schadet es nicht zu wissen, dass man Zitate mit HTML auch kennzeichnen kann:

<blockquote>Ich denke, also bin ich.</blockquote>

Listen

Listen sind in HTML sehr vielfältig einsetzbar. Theoretisch kann man fast alles in Listen strukturieren - Menüs, Bildergalerien, eigentlich sogar ganze Texte.

Es gibt zwei Arten von Listen: eine mit führenden Aufzählungspunkten ohne Nummerierung und eine nummerierte Liste. Die nicht nummerierte Liste <ul> (wie "unordered list") geht so:

<ul>
    <li>Aufzählungspunkt 1</li>
    <li>Aufzählungspunkt 2</li>
</ul>

Die nummerierte Liste funktioniert so:

<ol>
    <li>Aufzählungspunkt 1</li>
    <li>Aufzählungspunkt 1</li>
</ol>

Formatierung

Manchmal möchte man in seinem Text gerne Text hervorheben. Das kann man beispielsweise tun, indem man Text fett, kursiv oder unterstrichen macht. Unterstreichen empfehle ich nicht unbedingt, weil man im Bereich des Internets unterstrichenen Text immer mit Links assoziiert.

<strong>Fetter Text.</strong>

<b>Fetter Text.</b>

<i>Kursiver Text</i>

<u>Unterstrichener Text</u>

Links

Ein sehr wichtiges Element für Inhalte im Internet sind Links. Grundsätzlich ist das Verlinken auch ganz einfach. Zwischen <a> und </a> schreibst du den Text, der auf der Seite als Link stehen soll. Jetzt musst du dem Link nur noch das Ziel mitgeben. Das machst du über das href-Attribut:

<a href="https://www.url.de/ziel-des-links">Linktext</a>