HTML Spickzettel

Bei der Verwendung von HTML kann es sehr hilfreich sein, eine einfache Möglichkeit zu haben, sich daran zu erinnern, wie HTML-Tags richtig verwendet und angewendet werden. MDN bietet Ihnen umfangreiche HTML-Dokumentation sowie eine ausführliche instruktive HTML-Anleitung. In vielen Fällen benötigen wir jedoch nur schnelle Hinweise, während wir arbeiten. Der gesamte Zweck des Spickzettels ist es, Ihnen einige schnelle, genaue und gebrauchsfertige Code-Snippets für gängige Verwendungen bereitzustellen.

Hinweis: HTML-Tags müssen für ihre Semantik und nicht für ihr Aussehen verwendet werden. Es ist immer möglich, das Aussehen eines bestimmten Tags vollständig mit CSS zu verändern. Deshalb sollten Sie sich bei der Verwendung von HTML die Zeit nehmen, sich auf die Bedeutung und nicht auf das Aussehen zu konzentrieren.

Inline-Elemente

Ein "Element" ist ein einzelner Teil einer Webseite. Manche Elemente sind groß und enthalten kleinere Elemente wie Container. Einige Elemente sind klein und "verschachteln" sich innerhalb größerer. 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 sich horizontal zusammen wie Wörter in einem Satz oder Bücher, die nebeneinander 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 <span style="color:blue">sie zu stylen</span>.
Text betonen <em>
html
<em>Ich bin vornehm</em>.
Kursiver Text <i>
html

Markiere einen Ausdruck in <i>Kursivschrift</i>.
Fetter Text <b>
html
Fett <b>ein Wort oder einen Ausdruck</b>.
Wichtiger Text <strong>
html
<strong>Ich bin wichtig!</strong>
Text hervorheben <mark>
html
<mark>Beachte 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>kleinen
Text </small> eines Dokuments darzustellen.
Adresse <address>
html

<address>Hauptstraße 67</address>
Textzitat <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-Formatierung <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 vollständige 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 Elemente beschränkt ist, die spezifische Strukturen darstellen oder spezielle Semantiken haben, ist das div-Element absichtlich nicht enthalten, da das div-Element nichts darstellt 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 Blockzitat-Element deutet
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>
Ein 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>