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.
` 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>
Links¶ ↑
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.
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:
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
<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:
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
<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:
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
<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>
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:
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- Listeneintrag
- 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:
- Halbfett Listeneintrag
- 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-Eigenschaft
counter-reset mitgeteilt werden. Die angegebene Zahl entspricht sozusagen dem letzten Element:
- Listeneintrag
- Listeneintrag
<ol class="list-ordered" style="counter-reset: list-index 16;"> <li>...</li> </ol>
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.
<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:
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ipsum dolor sit amet.
Autor Quelle, Herausgeber -
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Autor Quelle, Herausgeber -
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Autor Quelle, Herausgeber -
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Autor Quelle, Herausgeber
-
<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:
<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:¶ ↑
<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>
<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>
<!-- 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>