Text

HTML stellt eine Vielzahl von Elementen bereit, um Text sinnvoll zu strukturieren und Inhalte semantisch korrekt auszuzeichnen. Dazu gehören Überschriften, Absätze, Listen, Hervorhebungen, Zitate und weitere strukturierende Elemente. Eine saubere Strukturierung ist wichtig – sowohl für Leserinnen und Leser als auch für Suchmaschinen und Screenreader.

Überschriften

Überschriften dienen zur Strukturierung eines Dokument. Sie sind das wichtigste Merkmal für den Leser, sich im Dokument zurechtzufinden. Eine Überschrift wird durch eines der Elemente h1, h2, h3, h4, h5 oder h6 realisiert. h steht dabei für heading (Überschrift).

<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5
Überschrift 6

Textblock

Textblöcke (Paragraphen) dienen der Gliederung eines Textes. Sie werden in HTML mit dem Element <p> (engl: paragraph) ausgezeichnet.

<p>HTML ist super</p>
<p>
  Sie haben mir den Arm gebrochen! Es gibt 250 Knochen im menschlichen Körper.
  Das war der erste.
</p>
<p>
  Dieser Absatz (Paragraph) enthält viel mehr Text als alle anderen. Er enhält
  einen Pseudotext. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Molestiae illum nesciunt reprehenderit quaerat animi quisquam obcaecati et
  ipsam omnis, officiis aliquam adipisci mollitia rerum ex! Alias voluptatibus
  quasi eveniet natus.
</p>

HTML ist super

Sie haben mir den Arm gebrochen! Es gibt 250 Knochen im menschlichen Körper. Das war der erste.

Dieser Absatz (Paragraph) enthält viel mehr Text als alle anderen. Er enhält einen Pseudotext. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae illum nesciunt reprehenderit quaerat animi quisquam obcaecati et ipsam omnis, officiis aliquam adipisci mollitia rerum ex! Alias voluptatibus quasi eveniet natus.

Zeilenumbruch

Wenn man innerhalb eines Satzes eines Zeilenumbruch verwenden möchte, kann man das
Element verwenden.

Bemerkung

Das br-Element hat kein schließendes Tag

<p>
  Das ist ein Textblock <br />
  mit einem Zeilenumbruch.
</p>

Das ist ein Textblock
mit einem Zeilenumbruch.

Textauszeichnung

Innerhalb eines Textes kann es vorkommen, dass bestimmte Wörter, Zeichen oder Textbereiche unabhängig vom restlichen Inhalt formatiert oder angesprochen werden sollen. Dafür eignet sich das Inline-Element <span>.

Das span-Element besitzt keine eigene semantische Bedeutung und erzeugt keine sichtbare Veränderung, solange es nicht über CSS oder JavaScript gestaltet wird. Es dient als neutrales Inline-Element, das sich flexibel in bestehende Textstrukturen einfügt.

<span> befindet sich immer innerhalb anderer Elemente und kann beliebige Inline-Inhalte enthalten.

Beispiele:

<p>HTML ist <span>super</span>.</p>

<h1>Dies ist eine <span>Überschrift</span></h1>

<p>
  Ein Text, der zwei <span>Spans</span> enthält und diese
  <span>unterschiedlich</span> formatieren kann.
</p>

Horizontale Linie

Das <hr>-Element steht für horizontal rule und erzeugt eine horizontale Linie auf einer Webseite. Es dient dazu, Inhalte visuell zu trennen und signalisiert zugleich einen thematischen Wechsel im Inhalt.

  • Es handelt sich um ein leeres Element, daher wird kein schließender Tag benötigt: <hr> genügt.

  • Standardmäßig erstreckt sich die Linie über die gesamte Breite des Elements.

<h2>Einleitung</h2>
<p>In diesem Abschnitt werden die Grundlagen erläutert.</p>

<hr />

<h2>Hauptteil</h2>
<p>Hier beginnt die detaillierte Ausführung des Themas.</p>

Einleitung

In diesem Abschnitt werden die Grundlagen erläutert.

Hauptteil

Hier beginnt die detaillierte Ausführung des Themas.

Textformatierungen

Die folgenden Elemente sind alles Inline-Elemente und stehen immer innerhalt eines Block-Elemente wie zum Beispiel einer Überschrift oder in einem Absatz.

Fettschrifft

Mittels des <strong> können ein oder mehrere Wörter in ihrer Bedeutung hervorgehoben werden. Sie werden dann fett dargestellt.

<p>HTML ist <strong>super</strong></p>

HTML ist super

Kursivschrift

Das <i> hebt einen Teil vom Rest eines Textes ab um zum Beispiel, einen Fachbegriff aus einer Fremdsprache deutlicher vom Rest abzugrenzen. Das Element stellt diese Inhalte dann kursiv dar.

<p>HTML steht für <i>Hypertext Markup Language</i></p>

HTML steht für Hypertext Markup Language

Kleinschrift

Das <small> stellt Inhalte kleiner dar um zum Beispiel Copyright oder ähnliches darzustellen.

<p>Hypertext Markup Language</p>
<p><small>Standardisierung durch das W3C-Gemium</small></p>

Hypertext Markup Language

Standardisierung durch das W3C-Gemium

Markiert

Das <mark> stellt Inhalte markiert dar.

<p>Für Hypertext Markup Language ist die Abkürzung <mark>HTML</mark></p>

Für Hypertext Markup Language ist die Abkürzung HTML

Durchgestrichen

Das <del> stellt Inhalte durchgestrichen dar.

<p>
  Für Hypertext Markup Language ist die Abkürzung <del>HLM</del>. Richtig ist
  HTML
</p>

Für Hypertext Markup Language ist die Abkürzung HLM. Richtig ist HTML

Unterstrichen

Das <u> stellt Inhalte unterstrichen dar.

<p>
  Für Hypertext Markup Language ist die Abkürzung <del>HLM</del>. Richtig ist
  <u>HTML</u>
</p>

Für Hypertext Markup Language ist die Abkürzung HLM. Richtig ist HTML

Hoch- und Tiefgestellt

Das <sub> stellt Inhalte tiefgestellt dar und das <sup> stellt Inhalte hochgestellt dar. Kann für Fußnoten verwendet werden.

<p>H<sub>2</sub>0 ist Wasser</p>

<p>www<sup>[1]</sup></p>

H20 ist Wasser

www[1]