HTML-Spickzettel

Beim Verwenden von HTML kann es sehr hilfreich sein, eine einfache Möglichkeit zu haben, sich daran zu erinnern, wie HTML-Tags richtig verwendet werden und wie man sie anwendet. MDN bietet Ihnen umfangreiche HTML-Referenzdokumentation sowie eine tiefgehende instruktive Reihe von HTML-Leitfäden. In vielen Fällen benötigen wir jedoch nur ein paar schnelle Hinweise. Genau dafür ist der Spickzettel gedacht: Ihnen schnell genaue und gebrauchsfertige Code-Snippets für häufige Anwendungen bereitzustellen.

Hinweis: HTML-Tags müssen für ihren semantischen Wert verwendet werden, nicht für ihr Aussehen. Es ist immer möglich, das Aussehen eines gegebenen Tags mithilfe von CSS vollständig zu ändern. Konzentrieren Sie sich daher bei der Verwendung von HTML auf die Bedeutung und nicht auf das Aussehen.

Inline-Elemente

Ein "Element" ist ein einzelner Bestandteil einer Webseite. Manche Elemente sind groß und enthalten kleinere Elemente wie Container. Einige Elemente sind klein und sind in größere Elemente "eingebettet". Standardmäßig erscheinen "Inline-Elemente" nebeneinander auf einer Webseite. Sie nehmen nur so viel Breite ein, wie sie benötigen, und passen sich horizontal wie Wörter in einem Satz oder Bücher, die in einer Reihe nebeneinander gestellt sind, zusammen. 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">
A link to example.org</a>.
Ein Bild <img>
html
<img src="beast.png" width="50" />
Ein Inline-Container <span>
html

Used to group elements: for example,
to <span style="color:blue">style
them</span>.
Text hervorheben <em>
html
<em>I'm posh</em>.
Kursiver Text <i>
html

Mark a phrase in <i>italics</i>.
Fetter Text <b>
html
Bold <b>a word or phrase</b>.
Wichtiger Text <strong>
html
<strong>I'm important!</strong>
Text hervorheben <mark>
html
<mark>Notice me!</mark>
Durchgestrichener Text <s>
html
<s>I'm irrelevant.</s>
Tiefgestellt <sub>
html
H<sub>2</sub>O
Kleiner Text <small>
html

Used to represent the <small>small
print </small>of a document.
Adresse <address>
html

<address>Main street 67</address>
Textzitat <cite>
html

For more monsters,
see <cite>The Monster Book of Monsters</cite>.
Hochgestellt <sup>
html
x<sup>2</sup>
Inline-Zitat <q>
html
<q>Me?</q>, she said.
Ein Zeilenumbruch <br>
html
Line 1<br>Line 2
Ein möglicher Zeilenumbruch <wbr>
html

<div style="width: 200px">
  Llanfair<wbr>pwllgwyngyll<wbr>gogerychwyrndrobwllllantysiliogogogoch.
</div>
Datum <time>
html

Used to format the date. For example:
<time datetime="2020-05-24">
published on 23-05-2020</time>.
Code-Format <code>
html

This text is in normal format,
but <code>this text is in 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">Download OGV video</a>
</video>

Block-Elemente

"Block-Elemente" hingegen nehmen die gesamte Breite einer Webseite ein. Sie belegen auch eine vollständige Zeile auf einer Webseite; sie passen nicht nebeneinander. Stattdessen stapeln sie sich wie Absätze in einem Aufsatz oder Bauklötze in einem Turm.

Hinweis: Da sich dieser Spickzettel auf einige Elemente beschränkt, die bestimmte Strukturen darstellen oder spezielle Semantik haben, ist das div-Element absichtlich nicht enthalten, da das div-Element nichts darstellt und keine spezielle Semantik hat.

Verwendung Element Beispiel
Ein einfacher Absatz <p>
html

<p>I'm a paragraph</p>
<p>I'm another paragraph</p>
Ein erweitertes Zitat <blockquote>
html

They said:
<blockquote>The blockquote element indicates
an extended quotation.</blockquote>
Zusätzliche Informationen <details>
html

<details>
  <summary>HTML Cheat Sheet</summary>
  <p>Inline elements</p>
  <p>Block elements</p>
</details>
Eine ungeordnete Liste <ul>
html
<ul>
  <li>I'm an item</li>
  <li>I'm another item</li>
</ul>
Eine geordnete Liste <ol>
html
<ol>
  <li>I'm the first item</li>
  <li>I'm the second item</li>
</ol>
Eine Definitionsliste <dl>
html
<dl>
  <dt>A Term</dt>
  <dd>Definition of a term</dd>
  <dt>Another Term</dt>
  <dd>Definition of another term</dd>
</dl>
Ein horizontaler Strich <hr>
html
before<hr>after
Textüberschrift <h1>-<h6>
html

<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>