HTML Spickzettel

Beim Gebrauch von HTML kann es sehr hilfreich sein, eine einfache Möglichkeit zu haben, sich daran zu erinnern, wie man HTML-Tags richtig benutzt und wie man sie anwendet. MDN bietet Ihnen eine umfangreiche HTML-Dokumentation sowie eine detaillierte HTML-Anleitung. In vielen Fällen benötigen wir jedoch nur einige schnelle Hinweise, während wir arbeiten. Das ist der gesamte Zweck des Spickzettels: Ihnen einige schnelle, präzise einsatzbereite Code-Schnipsel für häufige Anwendungen bereitzustellen.

Hinweis: HTML-Tags müssen aufgrund ihrer Semantik und nicht ihres Aussehens verwendet werden. Es ist stets möglich, das Aussehen und die Anmutung eines bestimmten Tags mithilfe von CSS vollständig zu ändern. Verwenden Sie daher bei der Arbeit mit HTML die Zeit, um sich auf die Bedeutung statt das Aussehen zu konzentrieren.

Inline-Elemente

Ein "Element" ist ein einzelner Teil einer Webseite. Einige Elemente sind groß und enthalten kleinere Elemente wie Container. Einige Elemente sind klein und sind innerhalb größerer Elemente "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 Bücher, die Seite an Seite in einem Regal 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 sie zu <span style="color:blue">stylen</span>.
Text betonen <em>
html
<em>Ich bin schick</em>.
Kursiver Text <i>
html
Markieren Sie einen Ausdruck in <i>Kursivschrift</i>.
Fetter Text <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</small>
Teil eines Dokuments darzustellen.
Adresse <address>
html
<address>Mainstraße 67</address>
Zitierte Quelle <cite>
html
Für weitere 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 nehmen auch eine gesamte Zeile auf einer Webseite ein; sie passen nicht nebeneinander. Stattdessen stapeln sie sich wie Absätze in einem Aufsatz oder Bauklötze in einem Turm.

Hinweis: Da dieser Spickzettel auf einige wenige Elemente beschränkt ist, die spezielle Strukturen darstellen oder besondere Semantik haben, wird das div Element absichtlich weggelassen — da das div Element nichts repräsentiert und keine besondere Semantik 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 weist auf
ein erweitertes Zitat hin.</blockquote>
Zusätzliche Informationen <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> Dies ist Überschrift 1 </h1>
<h2> Dies ist Überschrift 2 </h2>
<h3> Dies ist Überschrift 3 </h3>
<h4> Dies ist Überschrift 4 </h4>
<h5> Dies ist Überschrift 5 </h5>
<h6> Dies ist Überschrift 6 </h6>