HTML-Spickzettel für Syntax und häufige Aufgaben

Bei der Verwendung von HTML kann es sehr nützlich sein, eine einfache Möglichkeit zu haben, sich daran zu erinnern, wie HTML-Tags richtig verwendet werden und wie diese anzuwenden sind. MDN bietet Ihnen ausführliche HTML-Referenzdokumentation sowie eine umfassende Anleitungssammlung set of HTML guides. Jedoch benötigen wir in vielen Fällen nur einige schnelle Hinweise, während wir unterwegs sind. Genau dafür dient der Spickzettel: um Ihnen einige schnelle, präzise und gebrauchsfertige Codeausschnitte für häufige Anwendungen zu bieten.

Hinweis: HTML-Tags müssen für ihren semantischen Wert und nicht für ihr Aussehen verwendet werden. Mit CSS ist es immer möglich, das Aussehen eines bestimmten Tags vollständig zu ändern. Verwenden Sie HTML also mit Bedacht und konzentrieren Sie sich auf die Bedeutung und nicht auf das Aussehen.

Inline-Elemente

Ein „Element“ ist ein einzelner Teil einer Webseite. Einige Elemente sind groß und halten kleinere Elemente wie Container. Einige Elemente sind klein und sind in größeren verschachtelt. Standardmäßig erscheinen „Inline-Elemente“ nebeneinander auf einer Webseite. Sie nehmen nur so viel Breite ein, wie sie auf einer Seite benötigen, und passen horizontal zusammen, wie Wörter in einem Satz oder wie Bücher, die nebeneinander in einer Reihe stehen. Alle Inline-Elemente können innerhalb des <body>-Elements platziert werden.

Inline-Elemente: Verwendung und Beispiele
Verwendung Element Beispiel
Ein Link <a>
html
<a href="https://example.org">
Ein Link zu example.org</a>.
Ein Bild <img>
html
<img src="beast.png" width="50" />
Ein Inline-Container <span>
html
Wird verwendet, um Elemente zu gruppieren: zum Beispiel,
um <span style="color:blue">sie zu gestalten</span>.
Text betonen <em>
html
<em>Ich bin vornehm</em>.
Kursiver Text <i>
html
Eine Phrase in <i>Kursivschrift</i> markieren.
Fettdruck <b>
html
Fett <b>ein Wort oder eine Phrase</b>.
Wichtiger Text <strong>
html
<strong>Ich bin wichtig!</strong>
Text hervorheben <mark>
html
<mark>Beachten Sie mich!</mark>
Durchgestrichener Text <s>
html
<s>Ich bin irrelevant.</s>
Tiefgestellt <sub>
html
H<sub>2</sub>O
Kleiner Text <small>
html
Wird verwendet, um den <small>Kleingedruckten
eines Dokuments</small> darzustellen.
Adresse <address>
html
<address>Hauptstraße 67</address>
Textzitat <cite>
html
Für mehr Monster,
siehe <cite>Das Monsterbuch der Monster</cite>.
Hochgestellt <sup>
html
x<sup>2</sup>
Inline-Zitat <q>
html
<q>Ich?</q>, sagte sie.
Ein Zeilenumbruch <br>
html
Zeile 1<br>Zeile 2
Ein möglicher Zeilenumbruch <wbr>
html
<div style="width: 200px">
  Llanfair<wbr>pwllgwyngyll<wbr>gogerychwyrndrobwllllantysiliogogogoch.
</div>
Datum <time>
html
Wird verwendet, um das Datum zu formatieren. Zum Beispiel:
<time datetime="2020-05-24">
veröffentlicht am 23-05-2020</time>.
Code-Format <code>
html
Dieser Text ist im normalen Format,
aber <code>dieser Text ist im Code-Format
</code>.
Audio <audio>
html
<audio controls>
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg">
</audio>
Video <video>
html
<video controls width="250"
  src="https://archive.org/download/ElephantsDream/ed_hd.ogv" >
  <a href="https://archive.org/download/ElephantsDream/ed_hd.ogv">OGV-Video herunterladen</a>
</video>

Block-Elemente

„Block-Elemente“ hingegen nehmen die gesamte Breite einer Webseite ein. Sie füllen auch eine ganze Zeile der Webseite aus; sie passen nicht nebeneinander. Stattdessen stapeln sie sich wie Absätze in einem Aufsatz oder wie Bauklötze in einem Turm.

Hinweis: Da dieser Spickzettel sich auf wenige Elemente mit spezifischen Strukturen oder besonderen Semantiken beschränkt, ist das div-Element bewusst nicht enthalten — da das div-Element nichts repräsentiert und keine besonderen Semantiken hat.

Verwendung Element Beispiel
Ein einfacher Absatz <p>
html
<p>Ich bin ein Absatz</p>
<p>Ich bin ein weiterer Absatz</p>
Ein erweitertes Zitat <blockquote>
html
Sie sagten:
<blockquote>Das blockquote-Element gibt
ein erweitertes Zitat an.</blockquote>
Zusätzliche Information <details>
html
<details>
  <summary>HTML-Spickzettel</summary>
  <p>Inline-Elemente</p>
  <p>Block-Elemente</p>
</details>
Eine ungeordnete Liste <ul>
html
<ul>
  <li>Ich bin ein Element</li>
  <li>Ich bin ein weiteres Element</li>
</ul>
Eine geordnete Liste <ol>
html
<ol>
  <li>Ich bin das erste Element</li>
  <li>Ich bin das zweite Element</li>
</ol>
Eine Definitionsliste <dl>
html
<dl>
  <dt>Ein Begriff</dt>
  <dd>Definition eines Begriffs</dd>
  <dt>Ein weiterer Begriff</dt>
  <dd>Definition eines weiteren Begriffs</dd>
</dl>
Eine horizontale Linie <hr>
html
vorher<hr>nachher
Textüberschrift <h1>-<h6>
html
<h1> Das ist Überschrift 1 </h1>
<h2> Das ist Überschrift 2 </h2>
<h3> Das ist Überschrift 3 </h3>
<h4> Das ist Überschrift 4 </h4>
<h5> Das ist Überschrift 5 </h5>
<h6> Das ist Überschrift 6 </h6>