1. Web
  2. HTML
  3. Guides
  4. Cheatsheet

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

HTML-Cheat Sheet für Syntax und gängige Aufgaben

Beim Verwenden von HTML kann es sehr hilfreich sein, eine einfache Möglichkeit zu haben, sich daran zu erinnern, wie HTML-Tags ordnungsgemäß verwendet werden und wie sie anzuwenden sind. MDN bietet Ihnen erweiterte HTML-Referenz-Dokumentation sowie eine umfassende Anleitungsreihe von HTML-Leitfäden. In vielen Fällen benötigen wir jedoch nur ein paar schnelle Hinweise, während wir arbeiten. Das ist der ganze Zweck des Cheat Sheets — Ihnen schnell präzise und einsatzbereite Codeausschnitte für gängige Verwendungen zu bieten.

Hinweis: HTML-Tags müssen für ihren semantischen Wert verwendet werden, nicht für ihr Erscheinungsbild. Es ist immer möglich, das Aussehen und Gefühl eines bestimmten Tags mithilfe von CSS vollständig zu ändern. Wenn Sie HTML verwenden, nehmen Sie sich daher die Zeit, sich auf die Bedeutung und nicht auf das Erscheinungsbild zu konzentrieren.

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 "verschachtelt" in größeren Elementen. Standardmäßig erscheinen "Inline-Elemente" nebeneinander auf einer Webseite. Sie nehmen nur so viel Breite in einer Seite ein, wie sie benötigen, und passen sich horizontal wie Wörter in einem Satz oder Bücher, die nebeneinander im Regal stehen, 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">
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 <span style="color:blue">zu stylen</span>.
Text betonen <em>
html
<em>Ich bin posh</em>.
Kursiver Text <i>
html
Markieren Sie einen Satz in <i>Kursivschrift</i>.
Fetter Text <b>
html
Betone <b>ein Wort oder eine Phrase</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 das <small>Kleingedruckte
eines Dokuments</small> darzustellen.
Adresse <address>
html
<address>Hauptstraße 67</address>
Textuelles Zitat <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="/shared-assets/audio/t-rex-roar.mp3" type="audio/mpeg">
</audio>
Video <video>
html
<video controls width="250"
  src="/shared-assets/videos/flower.webm" >
  <a href="/shared-assets/videos/flower.webm">WebM-Video herunterladen</a>
</video>

Block-Elemente

"Block-Elemente" hingegen nehmen die gesamte Breite einer Webseite ein. Sie nehmen auch eine volle Zeile 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 dieses Cheat Sheet auf wenige Elemente beschränkt ist, die spezielle Strukturen repräsentieren oder besondere Semantik haben, wird das div-Element absichtlich nicht berücksichtigt — da das div-Element nichts darstellt und keine spezielle 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 gibt an
ein erweitertes Zitat.</blockquote>
Zusätzliche Informationen <details>
html
<details>
  <summary>HTML-Cheat Sheet</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>

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden