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.

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

Absätze sind die grundlegendsten Elemente in einem Textdokument.

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

Es gibt sechs Überschriftenebenen (

<h1>

bis

<h6>

). Sie dienen der Erstellung der Dokumentgliederung.

<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>

• Hinweise:
  • Hilft bei der Barrierefreiheit und Suchmaschinenindizierung.
  • Es wird empfohlen, mit

    <h1>

    zu beginnen und nachfolgende Ebenen in logischer Reihenfolge einzusetzen.

  • Überschriften niemals nach ihrem Aussehen auswählen; das Styling erfolgt ausschließlich über CSS.

Wird für längere Zitate als Blockelement verwendet.

<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>

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

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

Fügt einen manuellen Zeilenumbruch ein (leeres Element).

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

Zeigt einen Themenwechsel an. Browser stellen dies standardmäßig als horizontale Linie dar.

<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>

HTML unterscheidet drei Arten von Listen:

Für Elemente ohne bestimmte Reihenfolge.

• <ul>

  : Definiert die gesamte Liste

• <li>

  : Definiert ein einzelnes Listenelement

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

Für Elemente in einer nummerierten oder sequenziellen Reihenfolge (z. B. Anleitungen).

• <ol>

  : Definiert die gesamte Liste

• <li>

  : Definiert ein einzelnes Listenelement

<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>

Für Name/Wert-Paare (z. B. Begriffe/Definitionen, Fragen/Antworten).

• <dl>

  : Definiert die gesamte Liste

• <dt>

  : Definiert den Namen/Begriff

• <dd>

  : Definiert den Wert/die Beschreibung

<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>

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

• <main>

  : Identifiziert den primären Hauptinhalt einer Seite.

• <header>

  : Kennzeichnet das Einführungsmaterial am Anfang einer Seite, eines Abschnitts oder Artikels.

• <footer>

  : Kennzeichnet den Fußbereich mit Zusatzinformationen (Autor, Copyright, Links).

• <section>

  : Identifiziert einen thematischen Abschnitt einer Seite oder eines Artikels.

• <article>

  : Für eigenständige, in sich geschlossene Inhalte (z. B. Blogbeiträge, News-Artikel).

• <aside>

  : Für tangential verwandte Inhalte/Seitenleisten (Sidebar).

• <nav>

  : Identifiziert die primäre Navigation.

Beispiel für Verschachtelung:

<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>

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

<em>

<em>very</em> smart

<strong>

<strong>drop the keys</strong>

<q>

Matthew Carter says, <q>Our alphabet...</q>

<abbr>

title

<abbr title="Points">pts.</abbr>

<sup>

<sub>

H<sub>2</sub>O

E=MC<sup>2</sup>

<cite>

<cite>The Complete Manual of Typography</cite>

<dfn>

<dfn>Script typefaces</dfn> are based...

<mark>

MASS. <mark>ESTATE TAX</mark>

<code>

<code>var x = 10;

<var>

<var>x</var>

<kbd>

<kbd>Ctrl</kbd> + <kbd>C</kbd>

<samp>

<samp>File not found</samp>

<time>

<time datetime="1970-09-05T01:11:00">Sept. 5, 1970</time>

<data>

<data value="12">Twelve</data>

<ins>

<del>

<del>Peter Pan</del><ins>Pippi Longstocking</ins>

• <b>

  : Text, der ohne besondere Gewichtung auffallen soll (ohne Extra-Betonung).

• <i>

  : Text in einer abweichenden Stimme oder Stimmung (z. B. Fachbegriffe, fremdsprachige Wörter).

• <s>

  : Text, der nicht mehr korrekt oder relevant ist (durchgestrichen).

• <u>

  : Unterstrichener Text (nur bei semantischem Nutzen, z. B. Eigennamen im Chinesischen).

• <small>

  : Kleingedrucktes, Haftungsausschlüsse oder Randnotizen.

Wenn kein spezifisches semantisches Element vorhanden ist, werden generische Container genutzt:

• <div>

  : Block-Element zum Gruppieren logischer Abschnitte.

• <span>

  : Inline-Element zum Auszeichnen von Textpassagen.

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.

<!-- 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>

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.

  role="alert"

  ,

  role="button"

  ).

<div id="status" role="alert">You are no longer connected to the server.</div>

• Zustände (States) & Eigenschaften (Properties):
  • Properties: Meist stabil (z. B.

    aria-labelledby

    ).

  • States: Verändern sich dynamisch bei Interaktion (z. B.

    aria-selected="true"

    ).

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