Phlow/html-typografie-test.html

## html-typografie-test.html

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>HTML-Typographie – Alle HTML5-Elemente testen</title>
  <meta name="description" content="Test-Webseite, um alle HTML-Typografie-Elemente zu testen.">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!--  <link rel="stylesheet" href="styles.css"> -->

</head>
<body style="max-width: 46em; margin: auto; padding: 2em;">

  <h1>HTML-Typographie – Alle HTML5-Elemente testen</h1>

  <p class="teaser">
    Das ist der Anreisser mit <code>&lt;p&gt;</code> und der Klasse <code>.teaser</code>. 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.
  </p>


  <h2>Inhaltsverzeichnis</h2>

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

  <p>
    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.
  </p>

  <blockquote>
    »Zitate schreibt man mit <code>&lt;blockquote&gt;</code> und hebt Sie so im Text hervor.« <cite>Quelle für das Zitat mit <a href="http://mo.phlow.de/">Link</a></cite>
  </blockquote>

  <p>
    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.
  </p>

  <p>
    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.
  </p>

  <p>
    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.
  </p>

  <p>
    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.
  </p>

  <p>
    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.
  </p>

  <p>
    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.
  </p>


  <h2>HTML5-Befehle für die Textauszeichnung</h2>

  <p>
    Die <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list">komplette Liste der HTML5-Tags</a> stellt Dir alle HTML-Tags vor, die Du verwenden kannst.
  </p>


  <h2 id="ueberschriften">HTML-Überschriften</h2>

  <h1>&lt;h1&gt;-Überschrift</h1>

  <h2>&lt;h2&gt;-Überschrift</h2>

  <h3>&lt;h3&gt;-Überschrift</h3>

  <h4>&lt;h4&gt;-Überschrift</h4>

  <h5>&lt;h5&gt;-Überschrift</h5>

  <h6>&lt;h6&gt;-Überschrift</h6>


  <h2 id="links">&lt;a&gt; – Links</h2>
  <p>
    <a href="http://phlow.de/">Links</a> sind der Klebstoff des Internets.
  </p>


  <h2 id="listen">Listen</h2>


  <h3>&lt;ol&gt; Geordnete Liste</h3>

  <ol>
    <li>Geordnete Liste</li>
    <li>Zweites Listen-Element</li>
    <li>Drittes Listen-Element
      <ol>
        <li>Zweite Ebene Erstes Element</li>
        <li>Zweite Ebene Zweites Element</li>
        <li>Zweite Ebene Drittes Element
          <ol>
            <li>Und eines dritte Ebene Erstes Element</li>
            <li>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.</li>
            <li>Und eines dritte Ebene Drittes Element</li>
          </ol>
        </li>
        <li>Zweite Ebene Viertes Element</li>
        <li>Zweite Ebene Fünftes Element</li>
      </ol>
    </li>
    <li>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.</li>
    <li>Fünftes Listen-Element</li>
  </ol>


  <h3>&lt;ul&gt; Ungeordnete Liste</h3>

  <ul>
    <li>Ungeordnete Liste</li>
    <li>Zweites Listen-Element</li>
    <li>Drittes Listen-Element
      <ul>
        <li>Zweite Ebene Erstes Element</li>
        <li>Zweite Ebene Zweites Element</li>
        <li>Zweite Ebene Drittes Element
          <ul>
            <li>Und eines dritte Ebene Erstes Element</li>
            <li>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.</li>
            <li>Und eines dritte Ebene Drittes Element</li>
          </ul>
        </li>
        <li>Zweite Ebene Viertes Element</li>
        <li>Zweite Ebene Fünftes Element</li>
      </ul>
    </li>
    <li>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.</li>
    <li>Fünftes Listen-Element</li>
  </ul>


  <h3>&lt;dl&gt; Definitionliste</h3>

  <dl>
    <dt>Definitionselement 1</dt>
    <dd>Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.</dd>
    <dt>Definitionselement 2</dt>
    <dd>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.</dd>
    <dd>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.</dd>
    <dt>Definitionselement 3</dt>
    <dd>»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.</dd>
    <dt>Definitionselement 4</dt>
    <dd>Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren.</dd>
    <dt>Definitionselement 5</dt>
    <dd>»Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben.</dd>
  </dl>


  <h2 id="strong">&lt;strong&gt; – Starke Betonung</h2>
  <p>
    Das sieht doch wie <strong>fetter</strong> Text aus.
  </p>


  <h2 id="em">&lt;em&gt; - Betonung</h2>
  <p>
    Lass mich bitte <em>betonen</em> wie wichtig Responsive Webdesign ist.
  </p>


  <h2 id="pre">&lt;pre&gt; Und so sehen Code-Beispiele aus</h2>

<pre>
&lt;html&gt;
  &lt;head&gt;
    &lt;title>Code Blocks&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p>Inhalt&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>


  <h2 id="code">&lt;code&gt; – Code per Inline-Element anzeigen.</h2>

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


  <h2 id="blockquote">&lt;blockquote&gt; Zitat</h2>

  <blockquote>Everything happens for a reason. (Britney Spears)</blockquote>


  <h2>&lt;blockquote&gt; und &lt;cite&gt; im Zusammenspiel</h2>

  <blockquote>
    Age is an issue of mind over matter. If you don't mind, it doesn't matter.
    <cite>Mark Twain auf <a href="http://www.gutenberg.org/ebooks/author/53">gutenberg.org</a></cite>
  </blockquote>


  <h2 id="cite">&lt;cite&gt; – Zitate als Inline-Elemente.</h2>

  <p>
    Ich bin mir sicher <cite>Albert Einstein</cite> hat gesagt: »Gott würfelt nicht.«.
  </p>


  <h2 id="br">&lt;br&gt; – Zeilenumbruch</h2>

  <p>
    Zeilenumbruch gefällig? Ich geb Dir fünf!<br><br><br><br><br>
  </p>


  <h2 id="hr">&lt;hr&gt; Horizontale Linie</h2>

  <hr>


  <h2 id="small">&lt;small&gt; – Klein geschriebener Text</h2>

  <p>
    So sieht Text aus wenn er <small>klein ausgegeben</small> wird.
  </p>


  <h2 id="s">&lt;s&gt; – Durchgestrichener Text</h2>

  <p>
    Es ist super, wenn man Dinge erledigt bekommt. Streich einfach <s>abgeschlossene Aufgaben</s> durch.
  </p>

  <h2 id="q">&lt;q&gt; – Automatische Anführungsstriche</h2>

  <p>
    Wenn Du Text mit &lt;q&gt; umschließt, <q>bekommt der eingeklammerte Text automatisch Anführungsstriche</q>.
  </p>


  <h2 id="dfn">&lt;dfn&gt; – Definitionselement</h2>

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


  <h2 id="abbr">&lt;abbr&gt; – Abkürzungen als Tooltip</h2>

  <p>
    Das Element &lt;abbr&gt; 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 <abbr title="World Wide Fund For Nature">WWF</abbr> ist eine der größten internationalen Naturschutzorganisationen der Welt.
  </p>


  <h2 id="time">&lt;time&gt; – Tag für Zeitangaben</h2>

  <p>
    Das Konzert fand am <time datetime="2001-05-15 19:00">15. Mai 2015</time> statt.
  </p>


  <h2 id="var">&lt;var&gt; – Variablen, Konstanten und Größen</h2>

  <p>
    Mit dem Element &lt;var&gt; werden <var>Variablen</var>, <var>Konstanten</var> und <var>Größen</var> ausgezeichnet.
  </p>


  <h2 id="sample">&lt;samp&gt; – Ausgabe von Computerprogrammen</h2>

  <p>
    Text der mit &lt;samp&gt; umschlossen wird <samp>sieht so aus</samp>.
  </p>


  <h2 id="kbd">&lt;kbd&gt; – Tastaturkombinationen</h2>

  <p>
    Tastenkombinationen beschleunigen die Arbeit. Wer kennt schon nicht die Tastenkombination <kbd>CMD</kbd> + <kbd>c</kbd> und <kbd>CMD</kbd> + <kbd>v</kbd>.
  </p>


  <h2 id="sub">&lt;sub&gt; – Tiefgestellter Text</h2>

  <p>
    Fließtext kann man <sub>tiefstellen</sub> oder auch…
  </p>


  <h2 id="sup">&lt;sup&gt; – Hochgestellter Text</h2>

  <p>
    … wenn man mag <sup>hochstellen</sup>.
  </p>


  <h2 id="i">&lt;i&gt; – Kursiver Text</h2>

  <p>
    Das ist <i>kursiver Text</i>.
  </p>


  <h2>&lt;b&gt; – Fetter Text</h2>

  <p id="b">
    Das ist <b>gefetteter Text</b>.
  </p>


  <h2 id="u">&lt;u&gt; – Unterlinierter Text</h2>

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


  <h2 id="mark">&lt;mark&gt; – Markierter Text</h2>

  <p>
    Ach, wie viel Text <mark>markiert</mark> man als Student, damit man die <mark>geigneten Textstellen später besser findet</mark>.
  </p>


  <h2 id="tabellen">Tabellen</h2>

  <table>
    <caption>&lt;table&gt; defines an HTML table</caption>
    <colgroup>
    <col span="1" style="width: 15%;">
    <col span="1" style="width: 50%;">
    <col span="1" style="width: 35%;">
  </colgroup>
  <thead>
    <tr>
      <th>HTML Tag</th>
      <th>Defintion</th>
      <th>Style</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&lt;caption&gt;</td>
      <td>defines a table caption</td>
      <td><code>font-weight: bold;</code></td>
    </tr>
    <tr>
      <td>&lt;colgroup&gt;</td>
      <td>specifies a group of one or more columns in a table for
        formatting. The &lt;colgroup&gt; tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.</td>
        <td>no styling needed</td>
      </tr>
      <tr>
        <td>&lt;col&gt;</td>
        <td>specifies column properties for each column within a `&lt;colgroup&gt;`
          element</td>
          <td>no styling needed</td>
        </tr>
        <tr>
          <td>&lt;thead&gt;</td>
          <td>is used to group header content in an HTML table</td>
          <td><code>font-weight: bold;</code></td>
        </tr>
        <tr>
          <td>&lt;tbody&gt;</td>
          <td>is used to group the body content in an HTML table</td>
          <td>no styling needed</td>
        </tr>
        <tr>
          <td>&lt;tr&gt;</td>
          <td>defines a row in an HTML table</td>
          <td>no styling needed</td>
        </tr>
        <tr>
          <td>&lt;th&gt;</td>
          <td>defines a header cell in an HTML table</td>
          <td><code>font-weight: bold;</code></td>
        </tr>
        <tr>
          <td>&lt;td&gt;</td>
          <td>defines a standard cell in an HTML table</td>
          <td><code>font-weight: normal;</code></td>
        </tr>
        <tr>
          <td>&lt;tfoot&gt;</td>
          <td>is used to group footer content in an HTML table</td>
          <td>no styling needed</td>
        </tr>
        <tfoot>
          <tr>
            <td>&lt;tfoot&gt;</td>
            <td>is used to group footer content in an HTML table</td>
            <td>no styling needed</td>
          </tr>
        </tfoot>
      </table>

</body>
</html>

	<!doctype html>
	<html lang="de">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>HTML-Typographie – Alle HTML5-Elemente testen</title>
	<meta name="description" content="Test-Webseite, um alle HTML-Typografie-Elemente zu testen.">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- <link rel="stylesheet" href="styles.css"> -->

	</head>
	<body style="max-width: 46em; margin: auto; padding: 2em;">

	<h1>HTML-Typographie – Alle HTML5-Elemente testen</h1>

	<p class="teaser">
	Das ist der Anreisser mit <code><p></code> und der Klasse <code>.teaser</code>. 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.
	</p>



	<h2>Inhaltsverzeichnis</h2>

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

	<p>
	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.
	</p>

	<blockquote>
	»Zitate schreibt man mit <code><blockquote></code> und hebt Sie so im Text hervor.« <cite>Quelle für das Zitat mit <a href="http://mo.phlow.de/">Link</a></cite>
	</blockquote>

	<p>
	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.
	</p>

	<p>
	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.
	</p>

	<p>
	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.
	</p>

	<p>
	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.
	</p>

	<p>
	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.
	</p>

	<p>
	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.
	</p>



	<h2>HTML5-Befehle für die Textauszeichnung</h2>

	<p>
	Die <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list">komplette Liste der HTML5-Tags</a> stellt Dir alle HTML-Tags vor, die Du verwenden kannst.
	</p>



	<h2 id="ueberschriften">HTML-Überschriften</h2>

	<h1><h1>-Überschrift</h1>

	<h2><h2>-Überschrift</h2>

	<h3><h3>-Überschrift</h3>

	<h4><h4>-Überschrift</h4>

	<h5><h5>-Überschrift</h5>

	<h6><h6>-Überschrift</h6>



	<h2 id="links"><a> – Links</h2>
	<p>
	<a href="http://phlow.de/">Links</a> sind der Klebstoff des Internets.
	</p>



	<h2 id="listen">Listen</h2>


	<h3><ol> Geordnete Liste</h3>

	<ol>
	<li>Geordnete Liste</li>
	<li>Zweites Listen-Element</li>
	<li>Drittes Listen-Element
	<ol>
	<li>Zweite Ebene Erstes Element</li>
	<li>Zweite Ebene Zweites Element</li>
	<li>Zweite Ebene Drittes Element
	<ol>
	<li>Und eines dritte Ebene Erstes Element</li>
	<li>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.</li>
	<li>Und eines dritte Ebene Drittes Element</li>
	</ol>
	</li>
	<li>Zweite Ebene Viertes Element</li>
	<li>Zweite Ebene Fünftes Element</li>
	</ol>
	</li>
	<li>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.</li>
	<li>Fünftes Listen-Element</li>
	</ol>


	<h3><ul> Ungeordnete Liste</h3>

	<ul>
	<li>Ungeordnete Liste</li>
	<li>Zweites Listen-Element</li>
	<li>Drittes Listen-Element
	<ul>
	<li>Zweite Ebene Erstes Element</li>
	<li>Zweite Ebene Zweites Element</li>
	<li>Zweite Ebene Drittes Element
	<ul>
	<li>Und eines dritte Ebene Erstes Element</li>
	<li>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.</li>
	<li>Und eines dritte Ebene Drittes Element</li>
	</ul>
	</li>
	<li>Zweite Ebene Viertes Element</li>
	<li>Zweite Ebene Fünftes Element</li>
	</ul>
	</li>
	<li>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.</li>
	<li>Fünftes Listen-Element</li>
	</ul>


	<h3><dl> Definitionliste</h3>

	<dl>
	<dt>Definitionselement 1</dt>
	<dd>Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.</dd>
	<dt>Definitionselement 2</dt>
	<dd>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.</dd>
	<dd>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.</dd>
	<dt>Definitionselement 3</dt>
	<dd>»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.</dd>
	<dt>Definitionselement 4</dt>
	<dd>Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren.</dd>
	<dt>Definitionselement 5</dt>
	<dd>»Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben.</dd>
	</dl>



	<h2 id="strong"><strong> – Starke Betonung</h2>
	<p>
	Das sieht doch wie <strong>fetter</strong> Text aus.
	</p>



	<h2 id="em"><em> - Betonung</h2>
	<p>
	Lass mich bitte <em>betonen</em> wie wichtig Responsive Webdesign ist.
	</p>



	<h2 id="pre"><pre> Und so sehen Code-Beispiele aus</h2>

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



	<h2 id="code"><code> – Code per Inline-Element anzeigen.</h2>

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



	<h2 id="blockquote"><blockquote> Zitat</h2>

	<blockquote>Everything happens for a reason. (Britney Spears)</blockquote>



	<h2><blockquote> und <cite> im Zusammenspiel</h2>

	<blockquote>
	Age is an issue of mind over matter. If you don't mind, it doesn't matter.
	<cite>Mark Twain auf <a href="http://www.gutenberg.org/ebooks/author/53">gutenberg.org</a></cite>
	</blockquote>



	<h2 id="cite"><cite> – Zitate als Inline-Elemente.</h2>

	<p>
	Ich bin mir sicher <cite>Albert Einstein</cite> hat gesagt: »Gott würfelt nicht.«.
	</p>



	<h2 id="br"><br> – Zeilenumbruch</h2>

	<p>
	Zeilenumbruch gefällig? Ich geb Dir fünf!<br><br><br><br><br>
	</p>



	<h2 id="hr"><hr> Horizontale Linie</h2>

	<hr>



	<h2 id="small"><small> – Klein geschriebener Text</h2>

	<p>
	So sieht Text aus wenn er <small>klein ausgegeben</small> wird.
	</p>



	<h2 id="s"><s> – Durchgestrichener Text</h2>

	<p>
	Es ist super, wenn man Dinge erledigt bekommt. Streich einfach <s>abgeschlossene Aufgaben</s> durch.
	</p>

	<h2 id="q"><q> – Automatische Anführungsstriche</h2>

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



	<h2 id="dfn"><dfn> – Definitionselement</h2>

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



	<h2 id="abbr"><abbr> – Abkürzungen als Tooltip</h2>

	<p>
	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 <abbr title="World Wide Fund For Nature">WWF</abbr> ist eine der größten internationalen Naturschutzorganisationen der Welt.
	</p>



	<h2 id="time"><time> – Tag für Zeitangaben</h2>

	<p>
	Das Konzert fand am <time datetime="2001-05-15 19:00">15. Mai 2015</time> statt.
	</p>



	<h2 id="var"><var> – Variablen, Konstanten und Größen</h2>

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



	<h2 id="sample"><samp> – Ausgabe von Computerprogrammen</h2>

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



	<h2 id="kbd"><kbd> – Tastaturkombinationen</h2>

	<p>
	Tastenkombinationen beschleunigen die Arbeit. Wer kennt schon nicht die Tastenkombination <kbd>CMD</kbd> + <kbd>c</kbd> und <kbd>CMD</kbd> + <kbd>v</kbd>.
	</p>



	<h2 id="sub"><sub> – Tiefgestellter Text</h2>

	<p>
	Fließtext kann man <sub>tiefstellen</sub> oder auch…
	</p>



	<h2 id="sup"><sup> – Hochgestellter Text</h2>

	<p>
	… wenn man mag <sup>hochstellen</sup>.
	</p>



	<h2 id="i"><i> – Kursiver Text</h2>

	<p>
	Das ist <i>kursiver Text</i>.
	</p>



	<h2><b> – Fetter Text</h2>

	<p id="b">
	Das ist <b>gefetteter Text</b>.
	</p>



	<h2 id="u"><u> – Unterlinierter Text</h2>

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



	<h2 id="mark"><mark> – Markierter Text</h2>

	<p>
	Ach, wie viel Text <mark>markiert</mark> man als Student, damit man die <mark>geigneten Textstellen später besser findet</mark>.
	</p>



	<h2 id="tabellen">Tabellen</h2>

	<table>
	<caption><table> defines an HTML table</caption>
	<colgroup>
	<col span="1" style="width: 15%;">
	<col span="1" style="width: 50%;">
	<col span="1" style="width: 35%;">
	</colgroup>
	<thead>
	<tr>
	<th>HTML Tag</th>
	<th>Defintion</th>
	<th>Style</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><caption></td>
	<td>defines a table caption</td>
	<td><code>font-weight: bold;</code></td>
	</tr>
	<tr>
	<td><colgroup></td>
	<td>specifies a group of one or more columns in a table for
	formatting. The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.</td>
	<td>no styling needed</td>
	</tr>
	<tr>
	<td><col></td>
	<td>specifies column properties for each column within a `<colgroup>`
	element</td>
	<td>no styling needed</td>
	</tr>
	<tr>
	<td><thead></td>
	<td>is used to group header content in an HTML table</td>
	<td><code>font-weight: bold;</code></td>
	</tr>
	<tr>
	<td><tbody></td>
	<td>is used to group the body content in an HTML table</td>
	<td>no styling needed</td>
	</tr>
	<tr>
	<td><tr></td>
	<td>defines a row in an HTML table</td>
	<td>no styling needed</td>
	</tr>
	<tr>
	<td><th></td>
	<td>defines a header cell in an HTML table</td>
	<td><code>font-weight: bold;</code></td>
	</tr>
	<tr>
	<td><td></td>
	<td>defines a standard cell in an HTML table</td>
	<td><code>font-weight: normal;</code></td>
	</tr>
	<tr>
	<td><tfoot></td>
	<td>is used to group footer content in an HTML table</td>
	<td>no styling needed</td>
	</tr>
	<tfoot>
	<tr>
	<td><tfoot></td>
	<td>is used to group footer content in an HTML table</td>
	<td>no styling needed</td>
	</tr>
	</tfoot>
	</table>

	</body>
	</html>