HTML-Typographie – Alle HTML5-Elemente testen

Das ist der Anreisser mit <p> und der Klasse .teaser. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben.

Inhaltsverzeichnis

• HTML-Überschriften
• <a> – Links
• Listen
• <strong> – Starke Betonung
• <em> - Betonung
• <pre> Und so sehen Code-Beispiele aus
• <code> – Code per Inline-Element anzeigen.
• <blockquote> Zitat
• <cite> – Zitate als Inline-Elemente.
• <br> – Zeilenumbruch
• <hr> Horizontale Linie
• <small> – Klein geschriebener Text
• <s> – Durchgestrichener Text
• <q> – Automatische Anführungsstriche
• <dfn> – Definitionselement
• <abbr> – Abkürzungen als Tooltip
• <time> – Tag für Zeitangaben
• <var> – Variablen, Konstanten und Größen
• <samp> – Ausgabe von Computerprogrammen
• <kbd> – Tastaturkombinationen
• <sub> – Tiefgestellter Text
• <sup> – Hochgestellter Text
• <i> – Kursiver Text
• <b> – Fetter Text
• <u> – Unterlinierter Text
• <mark> – Markierter Text
• Tabellen

Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.

»Zitate schreibt man mit <blockquote> und hebt Sie so im Text hervor.« Quelle für das Zitat mit Link

Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat.

Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren.

Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.

Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat.

Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat.

Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren.Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben.

HTML5-Befehle für die Textauszeichnung

Die komplette Liste der HTML5-Tags stellt Dir alle HTML-Tags vor, die Du verwenden kannst.

HTML-Überschriften

<h1>-Überschrift

<h2>-Überschrift

<h3>-Überschrift

<h4>-Überschrift

<h5>-Überschrift

<h6>-Überschrift

<a> – Links

Links sind der Klebstoff des Internets.

Listen

<ol> Geordnete Liste

1. Geordnete Liste
2. Zweites Listen-Element
3. Drittes Listen-Element
   1. Zweite Ebene Erstes Element
   2. Zweite Ebene Zweites Element
   3. Zweite Ebene Drittes Element
      1. Und eines dritte Ebene Erstes Element
      2. Und eines dritte Ebene Zweites Element mit viel zu viel Text: Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte.
      3. Und eines dritte Ebene Drittes Element
   4. Zweite Ebene Viertes Element
   5. Zweite Ebene Fünftes Element
4. Viertes Listen-Element mit viel zu viel Text: Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte.
5. Fünftes Listen-Element

<ul> Ungeordnete Liste

• Ungeordnete Liste
• Zweites Listen-Element
• Drittes Listen-Element
  • Zweite Ebene Erstes Element
  • Zweite Ebene Zweites Element
  • Zweite Ebene Drittes Element
    • Und eines dritte Ebene Erstes Element
    • Und eines dritte Ebene Zweites Element mit viel zu viel Text: Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte.
    • Und eines dritte Ebene Drittes Element
  • Zweite Ebene Viertes Element
  • Zweite Ebene Fünftes Element
• Viertes Listen-Element mit viel zu viel Text: Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte.
• Fünftes Listen-Element

<dl> Definitionliste

Definitionselement 1

Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.

Definitionselement 2

In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet.

Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab.

Definitionselement 3

»Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat.

Definitionselement 4

Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren.

Definitionselement 5

»Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben.

<strong> – Starke Betonung

Das sieht doch wie fetter Text aus.

<em> - Betonung

Lass mich bitte betonen wie wichtig Responsive Webdesign ist.

<pre> Und so sehen Code-Beispiele aus

<html>
  <head>
    <title>Code Blocks</title>
  </head>
  <body>
    <p>Inhalt</p>
  </body>
</html>

<code> – Code per Inline-Element anzeigen.

Mit <code> zeigt man Code-Schnippsel im Fließtext an. Zum Beispiel den Aufbau des Link-Tags <a href="#">Link</a>.

<blockquote> Zitat

Everything happens for a reason. (Britney Spears)

<blockquote> und <cite> im Zusammenspiel

Age is an issue of mind over matter. If you don't mind, it doesn't matter. Mark Twain auf gutenberg.org

<cite> – Zitate als Inline-Elemente.

Ich bin mir sicher Albert Einstein hat gesagt: »Gott würfelt nicht.«.

<br> – Zeilenumbruch

Zeilenumbruch gefällig? Ich geb Dir fünf!

<hr> Horizontale Linie

<small> – Klein geschriebener Text

So sieht Text aus wenn er klein ausgegeben wird.

<s> – Durchgestrichener Text

Es ist super, wenn man Dinge erledigt bekommt. Streich einfach abgeschlossene Aufgaben durch.

<q> – Automatische Anführungsstriche

Wenn Du Text mit <q> umschließt, bekommt der eingeklammerte Text automatisch Anführungsstriche.

<dfn> – Definitionselement

Mit dem Element <dfn> wird ein Teil eines Fließtextes als Definition (definition) oder als zu definierenden Begriff ausgezeichnet.

<abbr> – Abkürzungen als Tooltip

Das Element <abbr> zeichnet einen Teil eines Fließtextes als Abkürzung, eng. abbreviation aus. Wenn die ausgeschriebene Langform im title-Attribut enthalten ist, wird sie bei :hover als Tooltip angezeigt. Beispiel: Der WWF ist eine der größten internationalen Naturschutzorganisationen der Welt.

<time> – Tag für Zeitangaben

Das Konzert fand am 15. Mai 2015 statt.

<var> – Variablen, Konstanten und Größen

Mit dem Element <var> werden Variablen, Konstanten und Größen ausgezeichnet.

<samp> – Ausgabe von Computerprogrammen

Text der mit <samp> umschlossen wird sieht so aus.

<kbd> – Tastaturkombinationen

Tastenkombinationen beschleunigen die Arbeit. Wer kennt schon nicht die Tastenkombination CMD + c und CMD + v.

<sub> – Tiefgestellter Text

Fließtext kann man _tiefstellen oder auch…

<sup> – Hochgestellter Text

… wenn man mag ^hochstellen.

<i> – Kursiver Text

Das ist kursiver Text.

<b> – Fetter Text

Das ist gefetteter Text.

<u> – Unterlinierter Text

Text zu unterlinieren rate ich ab. Man kann ihn sehr schlecht lesen, vor allem Buchstaben wie gpj leiden unter der vermeintlichen Hervorhebung.

<mark> – Markierter Text

Ach, wie viel Text markiert man als Student, damit man die geigneten Textstellen später besser findet.

Tabellen