Mein persönlicher HTML5 Spickzettel

Beim Erstellen der Seite Tränen im Regen haben sich einige Fragen zu HTML5 gestellt und geklärt. Dieser Spickzettel ist das Ergebnis.

Quellen zu HTML5

HTML Spickzettel

Textabschnitt tags

<address>: Kontaktinformationen
<article>: Geschlossener Abschnitt eines Dokuments mit eigenständigem Inhalt
<aside>: Abschnitt mit indirekten Zusammenhang mit dem umgebenden Inhalt stehen, zum Beispiel Randbemerkungen, Fußnoten oder Links
<footer>: Fußzeile für einen Abschnitt oder die komplette Seite, enthält zum Beispiel Autor, Hinweise, Links
<header>: Kopfzeile für einen Abschnitt oder die komplette Seite, enthält zum Beispiel Logos, ein Motto, interne Links
<main>: Hauptinhalt
<nav>: Navigationsleisten und Menüs
Attribute: title
<section>: Abschnitt in einem Dokument

Überschriften tags

<H1> - <H6>: Überschrift 1 - Überschrift 6

Textgruppen tags

<blockqote>

Langes Zitat
Attribute: cite
Beispiel:

    <blockquote>
        <p>Sint non culpa velit laboris ex anim non fugiat aliquip quis aliquip cupidatat est mollit est adipisicing magna.</p>
        <footer>
            <cite><a href="http://www.brucelawson.co.uk/2013/on-citing-quotations-again/">Bruce Lawson</a></cite>
        </footer>
    </blockquote>

Sint non culpa velit laboris ex anim non fugiat aliquip quis aliquip cupidatat est mollit est adipisicing magna.

Permalink Bruce Lawson

<div>

Container-Element ohne spezielle semantische Bedeutung. Genutzt für proprietäre Formatierung mit CSS.

<figcaption>

Die Beschriftung einer Abbildung innerhalb der Gruppe <figure>

<figure>

Gruppe von Medieninhalten
Beispiel:

    <figure>
        <img src="/images/android-chrome-512x512.png" alt="Logo">
        <figcaption>Logo Tränen im Regen.</figcaption>
    </figure>

Logo Tränen im Regen.

<p>

Textabsatz

<pre>

Vorformatiertes Objekt. Zeilenumbrüche und Einrückungen durch mehrere Leerzeichen oder Tabs werden unverändert wiedergegeben.

Textfluß tags

<abbr>: Abkürzung
Attribute: title
Beispiel: Das ist ein Abkürzung.
<br>: Zeilenumbruch.
<cite>: Name des Titels oder Autors eines Werkes
Beispiel: Das ist ein Werktitel.
<code>: Quelltext
ersetzt: <kbd>, <tt>, <samp>, <tt>
Beispiel: Das ist ein Quelltext.
<del>: Gelöschter Text
Attribute: cite, datetime
ersetzt <strike>, <s>
Beispiel: Das ist ein ~~gelöschter Text~~.
<dfn>: Begriffsdefinition
Attribute: title
Beispiel: Das ist ein Begriff.
<em>: Betonter Text
ersetzt <i>
Beispiel: Das ist ein betonter Text.
<ins>: Eingefügter Text
Attribute: cite, datetime
Beispiel: Das ist ein eingefügter Text.
<mark>: Markierter Text vergleichbar einem Textmarker
Beispiel: Das ist ein markierter Text.
<q>: Zitat im Fließtext
Attribute: cite
Beispiel: Das ist ein Zitat.
<small>: Weniger bedeutender Text
Beispiel: Das ist ein weniger bedeutender Text.
<span>: Fließtextauszeichnung ohne Bedeutung. Genutzt für proprietäre Formatierung mit CSS.
<strong>: Stark betonter Text
ersetzt <b>
Beispiel: Das ist ein stark betonter Text.
<sub>: Tiefgestellter Text
Beispiel: Das ist ein _{tiefgestellter Text}.
<sup>: Hochgestellter Text
Beispiel: Das ist ein ^{hochgestellter Text}.
<time>: Zeitangabe (Datum und/oder Uhrzeit)
Attribute: datetime
Beispiel: Erstellt am 9.11.18.
<wbr>: Wortumbruch, optional genutzt vom Browser.