HTML-Spickzettel für Syntax und häufige Aufgaben
Beim Arbeiten mit HTML kann es sehr hilfreich sein, eine einfache Möglichkeit zu haben, sich daran zu erinnern, wie man HTML-Tags richtig verwendet und anwendet. MDN bietet Ihnen erweiterte HTML-Referenzdokumentation sowie eine umfassende Anleitung in Form von HTML-Leitfäden. In vielen Fällen benötigen wir jedoch nur schnelle Hinweise, während wir arbeiten. Der Spickzettel hat genau diesen Zweck, um Ihnen schnell präzise und gebrauchsfertige Code-Snippets für allgemeine Anwendungsfälle zu liefern.
Hinweis: HTML-Tags sollten für ihren semantischen Wert verwendet werden, nicht für ihr Aussehen. Es ist immer möglich, das Erscheinungsbild eines bestimmten Tags mit CSS vollständig zu ändern. Verwenden Sie HTML daher mit dem Fokus auf Bedeutung, nicht auf Aussehen.
Inline-Elemente
Ein "Element" ist ein einzelner Teil einer Webseite. Einige 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 auf einer Seite benötigen, und passen sich horizontal an, wie Wörter in einem Satz oder Bücher, die Seite an Seite in einem Regal stehen. 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 betonen | <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 |
| Textliches Zitat | <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 beanspruchen auch eine ganze Zeile einer Webseite; sie passen nicht nebeneinander. Stattdessen stapeln sie sich wie Absätze in einem Aufsatz oder Spielzeuge in einem Turm.
Hinweis: Da dieser Spickzettel auf wenige Elemente beschränkt ist, die spezifische Strukturen darstellen oder spezielle Semantiken haben, ist das div-Element absichtlich nicht enthalten – weil das div-Element nichts darstellt und keine speziellen Semantiken 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 |
| Eine horizontale Linie | <hr> | html |
| Text Überschrift | <h1>-<h6> | html |