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

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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