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.
Verwendung | Element | Beispiel |
---|---|---|
Ein Link | <a> |
html
|
Ein Bild | <img> |
html
|
Ein Inline-Container | <span> |
html
|
Text hervorheben | <em> |
html
|
Kursiver Text | <i> |
html
|
Fetter Text | <b> |
html
|
Wichtiger Text | <strong> |
html
|
Text hervorheben | <mark> |
html
|
Durchgestrichener Text | <s> |
html
|
Tiefgestellt | <sub> |
html
|
Kleiner Text | <small> |
html
|
Adresse | <address> |
html
|
Textzitat | <cite> |
html
|
Hochgestellt | <sup> |
html
|
Inline-Zitat | <q> |
html
|
Ein Zeilenumbruch | <br> |
html
|
Ein möglicher Zeilenumbruch | <wbr> |
html
|
Datum | <time> |
html
|
Code-Format | <code> |
html
|
Audio | <audio> |
html
|
Video | <video> |
html
|
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
|
Ein erweitertes Zitat | <blockquote> |
html
|
Zusätzliche Informationen | <details> |
html
|
Eine ungeordnete Liste | <ul> |
html
|
Eine geordnete Liste | <ol> |
html
|
Eine Definitionsliste | <dl> |
html
|
Ein horizontaler Strich | <hr> |
html
|
Textüberschrift | <h1>-<h6> |
html
|