HTML-Spickzettel für Syntax und häufige Aufgaben

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 angewandt werden. MDN bietet Ihnen ausführliche HTML-Referenzdokumentation sowie eine tiefgehende instruktive Reihe von HTML-Leitfäden. In vielen Fällen benötigen wir jedoch nur einige schnelle Hinweise während der Arbeit. Das ist der Zweck des Spickzettels – um Ihnen schnelle, genaue und gebrauchsfertige Code-Beispiele für gängige Verwendungen zu geben.

Hinweis: HTML-Tags müssen für ihren semantischen Wert und nicht für ihr Aussehen verwendet werden. Es ist immer möglich, das Aussehen eines bestimmten Tags vollständig mit CSS zu ändern. Nehmen Sie sich beim Einsatz von HTML daher die Zeit, sich auf die Bedeutung und nicht auf das Aussehen 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 sind in größere "verschachtelt". Standardmäßig erscheinen "Inline-Elemente" nebeneinander auf einer Webseite. Sie beanspruchen nur so viel Breite, wie sie auf einer Seite benötigen, und passen 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 sie <span style="color:blue">zu stylen</span>.`
Text betonen	`<em>`	html `<em>Ich bin vornehm</em>.`
Kursiver Text	`<i>`	html `Markieren Sie 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>Beachten Sie mich!</mark>`
Text durchstreichen	`<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 Text</small> eines Dokuments 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>.`
Codeformat	`<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">Download WebM video</a> </video>`

Block-Elemente

"Block-Elemente" hingegen beanspruchen die gesamte Breite einer Webseite. 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 dieser Spickzettel auf wenige Elemente begrenzt ist, die spezifische Strukturen darstellen oder besondere Semantik besitzen, ist das div Element bewusst nicht enthalten – da das div Element nichts darstellt und keine speziellen 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 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>`

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden