====== HTML-Textauszeichnung (Marking Up Text) ======

Dieser Artikel gibt einen umfassenden Überblick über die semantische Textauszeichnung in HTML basierend auf *Learning Web Design, 5e* von Jennifer Robbins.

===== 1. Übersicht & Semantische Grundlagen =====

Es ist wichtig, Inhalte semantisch korrekt auszuzeichnen, damit die Bedeutung und Funktion des Inhalts exakt beschrieben wird. Dies stellt die Zugänglichkeit (Accessibility) in verschiedenen Umgebungen sicher:
  * Desktop- und mobile Browser
  * Unterstützende Lesegeräte (Screenreader)
  * Suchmaschinen-Indexer

===== 2. Allgemeine Blockelemente =====

==== Absätze (<p>) ====
Absätze sind die grundlegendsten Elemente in einem Textdokument.

<code>
<p>Serif typefaces have small slabs at the ends of letter strokes...</p>
<p>Sans-serif fonts do not have serif slabs...</p>
</code>

==== Überschriften (<h1> bis <h6>) ====
Es gibt sechs Überschriftenebenen (<code><h1></code> bis <code><h6></code>). Sie dienen der Erstellung der Dokumentgliederung.

<code>
<h1>Top-Level Heading</h1>
<h2>Second-Level Heading</h2>
<h3>Third-Level Heading</h3>
<h4>Fourth-Level Heading</h4>
<h5>Fifth-Level Heading</h5>
<h6>Sixth-Level Heading</h6>
</code>

  * **Hinweise:**
    * Hilft bei der Barrierefreiheit und Suchmaschinenindizierung.
    * Es wird empfohlen, mit <code><h1></code> zu beginnen und nachfolgende Ebenen in logischer Reihenfolge einzusetzen.
    * Überschriften niemals nach ihrem Aussehen auswählen; das Styling erfolgt ausschließlich über CSS.

==== Lange Zitate (<blockquote>) ====
Wird für längere Zitate als Blockelement verwendet.

<code>
<p>Renowned type designer, Matthew Carter, has this to say about his profession:</p>
<blockquote>
  <p>Our alphabet hasn't changed in eons...</p>
</blockquote>
</code>

==== Vorformatierter Text (<pre>) ====
Erhält Leerzeichen und Zeilenumbrüche exakt so, wie sie im Quellcode stehen. Wird standardmäßig in einer Schriftart mit konstanter Breite (Monospace) dargestellt.

<code>
<pre>
This is
  an example of
text with a lot of curious whitespace.
</pre>
</code>

===== 3. Umbrüche & Trennlinienelemente =====

==== Zeilenumbruch (<br>) ====
Fügt einen manuellen Zeilenumbruch ein (leeres Element).

<code>
<p>So much depends <br>upon <br><br>a red wheel <br>barrow</p>
</code>

==== Thematischer Umbruch (<hr>) ====
Zeigt einen Themenwechsel an. Browser stellen dies standardmäßig als horizontale Linie dar.

<code>
<h3>Times</h3>
<p>Description and history of the Times typeface.</p>
<hr>
<h3>Georgia</h3>
<p>Description and history of the Georgia typeface.</p>
</code>

===== 4. Listen =====

HTML unterscheidet drei Arten von Listen:

==== Ungeordnete Listen (<ul>) ====
Für Elemente ohne bestimmte Reihenfolge.
  * <code><ul></code>: Definiert die gesamte Liste
  * <code><li></code>: Definiert ein einzelnes Listenelement

<code>
<ul>
  <li>Serif</li>
  <li>Sans-serif</li>
  <li>Script</li>
</ul>
</code>

==== Geordnete Listen (<ol>) ====
Für Elemente in einer nummerierten oder sequenziellen Reihenfolge (z. B. Anleitungen).
  * <code><ol></code>: Definiert die gesamte Liste
  * <code><li></code>: Definiert ein einzelnes Listenelement

<code>
<ol>
  <li>Gutenberg develops moveable type (1450s)</li>
  <li>Linotype is introduced (1890s)</li>
  <li>Photocomposition catches on (1950s)</li>
  <li>Type goes digital (1980s)</li>
</ol>
</code>

==== Beschreibungslisten (<dl>) ====
Für Name/Wert-Paare (z. B. Begriffe/Definitionen, Fragen/Antworten).
  * <code><dl></code>: Definiert die gesamte Liste
  * <code><dt></code>: Definiert den Namen/Begriff
  * <code><dd></code>: Definiert den Wert/die Beschreibung

<code>
<dl>
  <dt>Linotype</dt>
  <dd>Line-casting allowed type to be selected, used, then recirculated into the machine automatically.</dd>
  <dt>Photocomposition</dt>
  <dd>Typefaces are stored on film then projected onto photo-sensitive paper.</dd>
</dl>
</code>

===== 5. Elemente zur Seitenorganisation (HTML5) =====

HTML5-Elemente verleihen den typischen Abschnitten einer Webseite eine Struktur und Bedeutung:

  * <code><main></code>: Identifiziert den primären Hauptinhalt einer Seite.
  * <code><header></code>: Kennzeichnet das Einführungsmaterial am Anfang einer Seite, eines Abschnitts oder Artikels.
  * <code><footer></code>: Kennzeichnet den Fußbereich mit Zusatzinformationen (Autor, Copyright, Links).
  * <code><section></code>: Identifiziert einen thematischen Abschnitt einer Seite oder eines Artikels.
  * <code><article></code>: Für eigenständige, in sich geschlossene Inhalte (z. B. Blogbeiträge, News-Artikel).
  * <code><aside></code>: Für tangential verwandte Inhalte/Seitenleisten (Sidebar).
  * <code><nav></code>: Identifiziert die primäre Navigation.

**Beispiel für Verschachtelung:**
<code>
<article>
  <header>
    <h1>More about WOFF</h1>
    <p>by Jennifer Robbins, <time datetime="2017-11-11">November 11, 2017</time></p>
  </header>
  <section>
    <h2>Section Title</h2>
    <p>Article content goes here...</p>
  </section>
  <footer>
    <p><small>Copyright &copy;2017 Jennifer Robbins.</small></p>
  </footer>
</article>
</code>

===== 6. Inline-Elemente =====

Inline-Elemente beschreiben den Textfluss auf Auszeichnungsebene (Text semantisch hervorheben):

| Element | Beschreibung | Beispiel |
| <code><em></code> | Betonten Text hervorheben (meist kursiv) | <code><em>very</em> smart</code> |
| <code><strong></code> | Wichtiger, ernster oder dringender Text (meist fett) | <code><strong>drop the keys</strong></code> |
| <code><q></code> | Kurzes Zitat im Textfluss (fügt Anführungszeichen hinzu) | <code>Matthew Carter says, <q>Our alphabet...</q></code> |
| <code><abbr></code> | Abkürzung oder Akronym (über <code>title</code> aufgelöst) | <code><abbr title="Points">pts.</abbr></code> |
| <code><sup></code> / <code><sub></code> | Hochgestellt / Tiefgestellt | <code>H<sub>2</sub>O</code> / <code>E=MC<sup>2</sup></code> |
| <code><cite></code> | Quellenangabe / Verweis auf ein Werk | <code><cite>The Complete Manual of Typography</cite></code> |
| <code><dfn></code> | Erste / definierende Instanz eines Begriffs | <code><dfn>Script typefaces</dfn> are based...</code> |
| <code><mark></code> | Hervorgehobener/markierter Text (z. B. Suchergebnisse) | <code>MASS. <mark>ESTATE TAX</mark></code> |
| <code><code></code> | Quellcode im Textfluss | <code><code>var x = 10;</code></code> |
| <code><var></code> | Variablen | <code><var>x</var></code> |
| <code><kbd></code> | Tastatureingaben | <code><kbd>Ctrl</kbd> + <kbd>C</kbd></code> |
| <code><samp></code> | Beispielausgabe eines Programms | <code><samp>File not found</samp></code> |
| <code><time></code> | Maschinenlesbares Datum/Uhrzeit | <code><time datetime="1970-09-05T01:11:00">Sept. 5, 1970</time></code> |
| <code><data></code> | Maschinenlesbarer Wert | <code><data value="12">Twelve</data></code> |
| <code><ins></code> / <code><del></code> | Eingefügter / gelöschter Text (Überarbeitungen) | <code><del>Peter Pan</del><ins>Pippi Longstocking</ins></code> |

==== Neudefinition älterer Präsentations-Tags ====
  * <code><b></code>: Text, der ohne besondere Gewichtung auffallen soll (ohne Extra-Betonung).
  * <code><i></code>: Text in einer abweichenden Stimme oder Stimmung (z. B. Fachbegriffe, fremdsprachige Wörter).
  * <code><s></code>: Text, der nicht mehr korrekt oder relevant ist (durchgestrichen).
  * <code><u></code>: Unterstrichener Text (nur bei semantischem Nutzen, z. B. Eigennamen im Chinesischen).
  * <code><small></code>: Kleingedrucktes, Haftungsausschlüsse oder Randnotizen.

===== 7. Generische Elemente & Attribute =====

==== <div> und <span> ====
Wenn kein spezifisches semantisches Element vorhanden ist, werden generische Container genutzt:
  * <code><div></code>: Block-Element zum Gruppieren logischer Abschnitte.
  * <code><span></code>: Inline-Element zum Auszeichnen von Textpassagen.

==== id und class Attribute ====
Beide Attribute verleihen generischen Elementen eine Struktur und dienen als "Hooks" für CSS und JavaScript:
  * **<code>id</code>:** Eindeutige Kennung. Darf **nur einmal** pro Seite vorkommen.
  * **<code>class</code>:** Klassifiziert Elemente in Gruppen. Kann **mehrfach** auf einer Seite genutzt werden.

<code>
<!-- Beispiel mit Class und ID -->
<div id="ISBN0321127307" class="listing book nonfiction">
  <p><cite>The Complete Manual of Typography</cite>, James Felici</p>
  <p>John: <span class="tel">999.8282</span></p>
</div>
</code>

===== 8. Einführung in ARIA =====

**ARIA (Accessible Rich Internet Applications)** erweitert HTML um Attribute, die Navigation und Zugänglichkeit für assistive Technologien (Screenreader) verbessern.

  * **Rollen (Roles):** Beschreiben die Funktion eines Elements (z. B. <code>role="alert"</code>, <code>role="button"</code>).
    <code><div id="status" role="alert">You are no longer connected to the server.</div></code>
  * **Zustände (States) & Eigenschaften (Properties):**
    * **Properties:** Meist stabil (z. B. <code>aria-labelledby</code>).
    * **States:** Verändern sich dynamisch bei Interaktion (z. B. <code>aria-selected="true"</code>).

===== 9. Zeichen maskieren (Escaping Characters) =====

Ein Zeichen zu maskieren bedeutet, es durch seine benannte (*Named Entity*) oder numerische (*Numeric Entity*) Zeichenentität darzustellen, um Parsing-Fehler zu vermeiden.

==== Wichtige Zeichenentitäten ====

| Zeichen | Beschreibung | Named Entity | Decimal Entity | Hex Entity |
| < | Kleiner-als-Zeichen | <code>&lt;</code> | <code>&#060;</code> | <code>&#x3C;</code> |
| > | Größer-als-Zeichen | <code>&gt;</code> | <code>&#062;</code> | <code>&#x3E;</code> |
| " | Anführungszeichen | <code>&quot;</code> | <code>&#034;</code> | <code>&#x22;</code> |
| ' | Apostroph | <code>&apos;</code> | <code>&#039;</code> | <code>&#x27;</code> |
| & | Et-Zeichen (Ampersand) | <code>&amp;</code> | <code>&#038;</code> | <code>&#x26;</code> |