In diesem Kapitel geht es um Textauszeichnungen – von Überschriften bis zu Textlisten.

Die Überschriften

Es stehen alle vom HTML5-Standard vorgesehenen Überschriften <h1> - <h6> zur Verfügung. Sie sollten vor allem in Fließtexten eingesetzt werden.

**Tipp:** Die Überschrift `

` sollte aus SEO-Gründen nur einmal pro Seite zum Einsatz kommen.

h1 Überschrift 200% ~36px

h2 Überschrift 150% ~27px

h3 Überschrift 133% ~24px

h4 Überschrift 116% ~21px

h5 Überschrift 100% ~18px
h6 Überschrift 83% ~15px
<h1>h1 Überschrift 200% ~36px</h1>
<h2>h2 Überschrift 150% ~27px</h2>
<h3>h3 Überschrift 133% ~24px</h3>
<h4>h4 Überschrift 116% ~21px</h4>
<h5>h5 Überschrift 100% ~18px</h5>
<h6>h6 Überschrift 83% ~15px</h6>

Für jede Überschrift gibt es auch eine leichtgewichtige Variante. Sie wird für Anmerkungen in Überschriften empfohlen, sollte aber nicht alleine stehen.

Erzeugt wird die Variante durch hinzufügen des <small>-Tags oder der CSS-Klasse .small:

h1 Überschrift leichtgewichtige Variante

h2 Überschrift leichtgewichtige Variante

h3 Überschrift leichtgewichtige Variante

h4 Überschrift leichtgewichtige Variante

h5 Überschrift leichtgewichtige Variante
h6 Überschrift leichtgewichtige Variante
<h1>h1 Überschrift <small>leichtgewichtige Variante</small></h1>
<h2>h2 Überschrift <small>leichtgewichtige Variante</small></h2>
<h3>h3 Überschrift <small>leichtgewichtige Variante</small></h3>
<h4>h4 Überschrift <small>leichtgewichtige Variante</small></h4>
<h5>h5 Überschrift <small>leichtgewichtige Variante</small></h5>
<h6>h6 Überschrift <small>leichtgewichtige Variante</small></h6>

Überschrift Dekorationen

Für alle Überschriften stehen außerdem die drei Dekorationen Marke (.brand), Unterstrichen (.underline) und Gruppe (.cluster) zur Verfügung. Dabei muss lediglich die entsprechende CSS-Klasse auf die Überschift angewendet werden:

Marken Überschrift


Unterstrichene Überschrift


Gruppen Überschrift


Thin Überschrift


Marketing Überschrift 48px


Marketing Überschrift 60px

<h3 class="brand">Marken Überschrift</h3>
<h3 class="underline">Unterstrichene Überschrift</h3>
<h4 class="cluster">Gruppen Überschrift</h4>
<h3 class="thin">Gruppen Überschrift</h3>
<h3 class="marketing-l">Marketing Überschrift 48px</h3>
<h3 class="marketing-xl">Marketing Überschrift 60px</h3>
**Anmerkung:** Überschriften mit den Klassen `.underline` und `.cluster` sind im Styleguide nur in einzeiliger Form definiert. Überlängen sollten daher durch die CSS-Klasse `.text-ellipsis` gekürzt werden.
**Tipp:** Überschriften können auch mit den weiter unten befindlichen Text-Helfern, fett / kursiv Auszeichnungen oder den funktionale Betonungen versehen werden.

Lorem ipsum dolor sit amet

<a href="#">ipsum dolor</a>

Fließtext

Fließtexte werden in Form von Paragraphen <p> dargestellt:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<p>Lorem ipsum ...</p>
<p>Stet clita  ...</p>
<p>At vero ...</p>

Varianten

Zur gezielteren Gestaltung stehen diverse Modifikatoren zur Verfügung. Da sie meistens nur eine CSS-Eigenschaft verändern und somit nicht die ganze Komponente beinflussen, lassen sie sich in der Regel in fast jedem Kontext verwenden.

**Anmerkung:** Änderungen von Schrifteigenschaften übertragen sich in CSS nativ auf alle Kind-Elemente. Deshalb wurden viele der Komponenten nochmals mit den grundlegenden Schrifteinstellungen versehen, damit sie keine Seiteneffekte auslösen.

Texte klein und groß

.text-xsmall
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

.text-small
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

.text-large
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

.text-xlarge
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<p class="text-xsmall">At vero ...</p>
<p class="text-small">Lorem ipsum ...</p>
<p class="text-large">At vero ...</p>
<p class="text-xlarge">At vero ...</p>

Texte fett und kursiv

Neben der Verwendung der Klassen .text-semibold und .text-bold können Elemente auch durch die HTML-Tags <strong> und <em> hervorgehoben werden. Lediglich für die halbfett-Variante steht nur die CSS-Klasse .text-semibold zur Verfügung:

Semibold: Lorem ipsum dolor sit amet...

Bold: Lorem ipsum dolor sit amet...

Uppercase: Lorem ipsum dolor sit amet...

<!-- .text-semibold -->
<p>Semibold: <span class="text-semibold">Lorem ipsum dolor sit amet</span>...</p>

<!-- <strong> oder .text-bold -->
<p>Bold: <strong>Lorem ipsum dolor sit amet</strong>...</p>

<!-- .text-uppercase -->
<p>Uppercase: <span class="text-uppercase">Lorem ipsum dolor sit amet</span>...</p>

Definitionen und Abkürzungen / Akronyme

Um Definitionen und Abkürzungen bzw. Akronyme hervorzuheben, wurden die entsprechenden HTML-Elemente <dfn> und <abbr> mit einer gepunkteten Linie unterstrichen. Da <abbr> eine Abkürzung beschreibt, wird ein title-Attribut verlangt, dass den vollen Begriff beinhaltet:

Textilien sind gewebte, gestrickte oder gewirkte, aus Faserstoff hergestellte Waren.

Das Akronym der Cascading Stylesheets ist CSS

<dfn>gewebte, gestrickte oder gewirkte, aus Faserstoff hergestellte Waren</dfn>
<abbr title="Cascading Stylesheets">CSS</abbr>

Textmarkierungen

Um Stellen in einem Text tatsählich zu markieren wurde das <mark>-Tag gestaltet:

Dieser Text sollte markiert dargestellt werden.

<p>Dieser Text sollte <mark>markiert</mark> dargestellt werden.</p>

Unsortierte Textlisten

Für einfache Auflistungen im Fließtext gibt es die unsortierte Liste. Sie kann durch das bloße anfügen der CSS-Klasse .list-unordered erzeugt werden:

<ul class="list-unordered">
  <li>Listeneintrag</li>
  <li>Listeneintrag</li>
  <li>Listeneintrag
    <ul class="list-unordered">
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
    </ul>
  </li>
  <li>Listeneintrag</li>
</ul>

Die unsortiere Liste gibt es auch als Bullet-Variante:

<ul class="list-unordered list-unordered-bullet">
  <li>Listeneintrag</li>
  <li>Listeneintrag</li>
  <li>Listeneintrag
    <ul class="list-unordered list-unordered-bullet">
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
    </ul>
  </li>
  <li>Listeneintrag</li>
</ul>

Die unsortiere Liste gibt es auch als Plain-Variante:

<ul class="list-unordered-plain">
  <li>Listeneintrag</li>
  <li>Listeneintrag</li>
  <li>Listeneintrag
    <ul class="list-unordered-plain">
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
    </ul>
  </li>
  <li>Listeneintrag</li>
</ul>
**Tipp:** Unsortierte Listen können beliebig ineinander gestapelt werden.

Sortierte Textlisten

Für Aufzählungen in Texten bieten die Komponenten die geordneten Listen. Sie können durch die CSS-Klasse .list-ordered gestaltet werden:

  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
    • Listeneintrag
    • Listeneintrag
    • Listeneintrag
  4. Listeneintrag
<ol class="list-ordered">
  <li>Listeneintrag</li>
  <li>Listeneintrag</li>
  <li>Listeneintrag
    <ul class="list-ordered">
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
    </ul>
  </li>
  <li>Listeneintrag</li>
</ol>

Die sortierte Liste gibt es außerdem in der Variante Halbfett:

  1. Halbfett Listeneintrag
  2. Halbfett Listeneintrag
<ol class="list-ordered list-ordered-semibold">
  <li>...</li>
</ol>

Soll die Nummerierung erst ab einem bestimmen Index beginnen, muss dies der Liste über das style-Attribut und die CSS-Eigenschaftcounter-reset mitgeteilt werden. Die angegebene Zahl entspricht sozusagen dem letzten Element:

  1. Listeneintrag
  2. Listeneintrag
<ol class="list-ordered" style="counter-reset: list-index 16;">
  <li>...</li>
</ol>
**Tipp:** Sortierte Listen können beliebig ineinander gestapelt werden.

Definitions- / Beschreibungslisten

Oft müssen Eigenschaften von Objekten aufgezählt werden. Hierfür eigenen sich Definitionslisten, die mithilfe der Klasse .list-desc-horizontal umgesetzt werden. Der Klassenname beschreibt dabei die Umgestaltung der Standard-HTML-Definitionsliste von einer vertikalen hin zu einer horizontalen Anordnung der Elemente. Die Definition selbst <dt> wird bei Überlänge autmoatisch gekürzt. Um den Begriff deutlicher hervorzuheben kann die optinale Klasse .list-desc-semibold verwendet werden.

Definition:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
Noch eine Definition:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
Eine sehr sehr sehr sehr sehr sehr sehr sehr lange Definition:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
<dl class="list-desc-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>
Definition:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
Noch eine Definition:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
Eine sehr sehr sehr sehr sehr sehr sehr sehr lange Definition:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
<dl class="list-desc-horizontal list-desc-semibold">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Zitate

Zur Angabe von Zitaten steht das <figure>-Tag zur Verfügung. Das <blockquote>-Tag beinhaltet dabei das Zitat. Der Autor wird im <figcaption> -Tag festgehalten. Gibt es einen Link zur Quelle, kann diese im <cite>-Tag angegeben werden:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
, Herausgeber
<figure class="figure" itemprop="mentions" itemscope itemtype="http://schema.org/Article">
  <blockquote class="quote" cite="http://example.com/article">
    Lorem ipsum...
  </blockquote>
  <figcaption class="quote-author">
    <span itemprop="author">Autor</span>
    <cite itemprop="name"><a itemprop="url" href="#">Quelle</a></cite>,
    <span itemprop="publisher">Herausgeber</span>
  </figcaption>
</figure>

Zitate lassen sich auch in Reihe schalten, um beispielsweise einen Gesprächsverlauf abzubilden:

<ul class="quote-list">
  <li class="quote-list-item">
    <figure>...</figure>
  </li>
  <li class="quote-list-item">
    <figure>...</figure>
    <ul class="quote-list">
      <li class="quote-list-item">
        <figure>...</figure>
      </li>
      <li class="quote-list-item">
        <figure>...</figure>
      </li>
    </ul>
  </li>
</ul>

Adressen

Für eine optimale Auszeichnung ist für Adressen in HTML5 der neue <address>-Tag vorgesehen. Außerdem ist die maschinelle Lesbarkeit ebenso wichtig wie deren Gestaltung. In den Komponenten wurde deshalb die Auszeichnung in den Vordergrund gerückt und die Gestaltung auf die drei Klassen .address-header, .address-body und .address-footer reduziert:

Deutsche Telekom AG
Max Müller

Friedrich Ebert Alee 142 t
53113 Bonn
Germany

<address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
  <p class="address-header">
    <span itemprop="name">Deutsche Telekom AG</span><br>
    <small>Max Müller</small>
  </p>
  <p class="address-body">
    <span itemprop="streetAddress">Friedrich Ebert Alee 142 t</span><br>
    <span itemprop="postalCode">53113</span>
    <span itemprop="addressLocality">Bonn</span><br>
    <span itemprop="addressCountry">Germany</span>
  </p>
  <p class="address-footer">
    <label>Tel.:</label><a href="tel:+492281812262" itemprop="telephone">+49 228 181 22 62</a><br>
    <label>Mob.:</label><a href="tel:+4916099123069" itemprop="telephone">+49 160 991 23 069</a>
  </p>
</address>

Nähere Informationen find Sie im Artikel: SEO und Accessibility

Preisauszeichnungen

Für Preise ist die CSS-Klasse .price vorgesehen. Dabei ist aber auch die Beachtung der richtigen Auszeichnung wichtig:

4,95   4,95   4,95
<span class="price">4,<sup>95</sup> €</span>
<span class="price text-semibold">4,<sup>95</sup> €</span>
<span class="price text-bold">4,<sup>95</sup> €</span>

Varianten:

4,95   4,95   4,95   nicht mehr gültiger Preis 4,95
<span class="price text-brand">4,<sup>95</sup> €</span>
<span class="price price-large">4,<sup>95</sup> €</span>
<span class="price price-xlarge">4,<sup>95</sup> €</span>

<!-- Ein Streich-Preis hat keine hochgestellten Cent Beträge -->
<!-- Die Zahl wird stattdessen mit <s> als abgelaufen markiert -->
<!-- Zu beachten ist auch die extra Auszeichnung für Barrierefreiheit -->
<span class="price price-expired">
    <span class="sr-only">nicht mehr gültiger Preis</span>
    <s>4,95</s> €
</span>
**Tipp:** Die CSS-Klassen der Preise lassen sich miteinander kombinieren:
4,95   4,95
<span class="price price-xlarge text-bold text-brand">4,<sup>95</sup> €</span>
<span class="price price-large text-semibold">4,<sup>95</sup> €</span>
**Anmerkung:** Suchmaschinen verstehen diese Preisauszeichnung nicht. Deshalb folgen Beispiele für korrekte Preisauszeichungen. Sie kommen ausschließlich in Zusammenhang mit einem Produkt vor:
<!-- Beispiel für eine aktuelle Produktauszeichnung -->
<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Produktname</span>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <meta itemprop="priceCurrency" content="EUR" />
    <meta itemprop="price" content="4.95" />
    <span class="price text-brand">4,<sup>95</sup> €</span>
  </div>
</div>

<!-- Beispiel für eine abgelaufene Produktauszeichnung -->
<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Produktname</span>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <meta itemprop="priceCurrency" content="EUR" />
    <meta itemprop="price" content="4.95" />
    <meta itemprop="priceValidUntil" content="2014-04-09" />
    <span class="price price-expired"><span class="sr-only">nicht mehr gültiger Preis</span><s>4,95</s> €</span>
  </div>
</div>

Nähere Informationen find Sie im Artikel: SEO und Accessibility

Text Helfer

Zur weiteren Gestaltung von Texten gibt es noch kleine Ausrichtungs-Helfer, diese sind zudem auch responsiv für die Screenklassen 's', 'm', 'l', 'xl' verfügbar und werden wir folgt angewendet: text-{screenklasse}-{ausrichtung}.

Linksbündig
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Mittig
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Rechtsbündig
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Rechtsbündig
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<p class="text-left">Lorem ipsum ...</p>
<p class="text-center">Stet clita ...</p>
<p class="text-right">At vero ...</p>
<p class="text-s-center text-m-right text-l-left">At vero ...</p>
**Anmerkung:** Auf einen Helfer für Blocksatz wurde bewußt verzichtet, da dies nicht dem Design Stil der Telekom entspricht.