HTML-Spickzettel für Syntax und allgemeine Aufgaben

Beim Verwenden von HTML kann es sehr praktisch sein, eine einfache Methode zu haben, um sich daran zu erinnern, wie man HTML-Tags korrekt verwendet und wie man sie anwendet. MDN bietet Ihnen erweiterte HTML-Referenzdokumentation sowie ein umfassendes Set von HTML-Leitfäden. In vielen Fällen benötigen wir jedoch nur einige schnelle Hinweise während der Arbeit. Der ganze Zweck des Spickzettels besteht darin, Ihnen schnell genaue, einsatzbereite Code-Snippets für häufige Anwendungen bereitzustellen.

Hinweis: HTML-Tags sollen für ihren semantischen Wert, nicht für ihr Aussehen verwendet werden. Es ist immer möglich, das Aussehen eines bestimmten Tags vollständig mit CSS zu ändern. Verwenden Sie daher HTML, um dem Sinn und nicht dem Aussehen Aufmerksamkeit zu schenken.

Inline-Elemente

Ein "Element" ist ein einzelner Bestandteil einer Webseite. Einige Elemente sind groß und enthalten kleinere Elemente wie Container. Einige Elemente sind klein und sind innerhalb größerer verschachtelt. Standardmäßig erscheinen "Inline-Elemente" nebeneinander auf einer Webseite. Sie nehmen nur so viel Breite ein, wie sie benötigen, und passen sich horizontal aneinander an, wie Wörter in einem Satz oder Bücher in einer Regalreihe. Alle Inline-Elemente können innerhalb des <body>-Elements platziert werden.

Inline-Elemente: Nutzung und Beispiele
Nutzung 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">formatieren</span>.
Text betonen <em>
html
<em>Ich bin elegant</em>.
Kursiver Text <i>
html
Eine Phrase in <i>Kursivschrift markieren</i>.
Fetter Text <b>
html
Ein Wort oder Phrase <b>fett formatieren</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>
Indexschrift <sub>
html
H<sub>2</sub>O
Kleiner Text <small>
html
Wird verwendet, um den <small>Kleingedruckten
Text </small> eines Dokuments darzustellen.
Adresse <address>
html
<address>Hauptstraße 67</address>
Textliches Zitat <cite>
html
Für mehr Monster,
siehe <cite>Das Monsterbuch der Monster</cite>.
Hochgestellter Text <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>.
Codeformat <code>
html
Dieser Text ist im normalen Format,
aber <code>dieser Text ist im
Codeformat</code>.
Audio <audio>
html
<audio controls>
  <source src="/shared-assets/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 vollständige Zeile einer Webseite ein; sie passen sich nicht nebeneinander an. Stattdessen stapeln sie sich wie Absätze in einem Aufsatz oder Bauklötze in einem Turm.

Hinweis: Da dieser Spickzettel auf einige Elemente beschränkt ist, die spezifische Strukturen darstellen oder besondere Semantiken aufweisen, ist das div-Element absichtlich nicht enthalten — weil das div-Element nichts repräsentiert und keine besonderen Semantiken hat.

Nutzung 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 zeigt ein
erweitertes Zitat an.</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>