HTML Elemente bestehen grundsätzlich aus start tags und end tags. Zwischen den tags befindet sich ein Inhalt. Ausnahmen zu dem Grundsatz stehen unten.
<start-tag>Hier ist ein Inhalt<end-tag>
Überblick:
- Nested HTML Elemente
- Empty HTML Elemente
- End-tags
- Kleinschreibung
1. Nested HTML Elemente
HTML Elemente in einem Element sind sog. nested HTML Elemente.
Alle HTML Dokumente bestehen aus nested HTML Elementen.
In dem unteren Beispiel befinden sich vier HTML Elemente:
<!DOCTYPE html> <html> <body> <h1>Überschrift 1</h1> <p>Absatz</p> </body> </html>
Der <html>-Tag definiert das gesamte Dokument. Start-tag ist <html>, end-tag </html>.
Das Element content (Inhalt) ist ein weiteres Element, nämlich das <body> Element.
<html> <body> <h1>Überschrift 1</h1> <p>Absatz</p> </body> </html>
Das <body>-Element definiert den gesamten Inhalt des Dokumentes. Start-tag ist <body>, end-tag </body>.
Im <body>-Element befinden sich zwei weitere HTML Elemente (<h1> und <p>).
<body> <h1>Überschrift 1</h1> <p>Absatz</p> </body>
Das <h1> tag ist ein HTML Heading, definiert also eine Überschrift. Start-tag ist <h1>, end-tag </h1>.
Der Inhalt des Elements ist: Überschrift 1.
<h1>Überschrift 1</h1>
Das <p>-Element definiert einen Absatz (paragraph). Start-tag ist <p>, end-tag </p>.
Der Inhalt des Elements ist: Absatz.
<p>Absatz</p>
2. Empty HTML Elemente
Es gibt HTML Elemente, die keinen Inhalt haben. Solche werden empty HTML Elemente genannt. Weiterhin haben solche Elemente keinen eng-tag.
Ein Beispiel wäre der <br> tag. Dieser steht für einen Zeilenumbruch.
Empty HTML Elemente können „geschlossen“ werden, indem man dies so im Eröffnungs-tag hinzufügt: <br />.
3. End-tags
Bei manchen HTML Elementen ist es nicht schlimm, wenn du vergisst sie zu schließen. So z.B. beim <p>-Element. Jedoch solltest du dir angewöhnen, alle HTML Elemente wieder korrekt zu schließen. Wird ein end-tag bei einem HTML Element vergessen, bei dem ein end-tag erheblich ist, können so ein recht seltsames Ergebnis dabei herauskommen.
4. Kleinschreibung
HTML tags sind nicht case sensitive, d.h. du kannst entweder <p> oder <P> schreiben. Allerdings wird Großschreibung nicht empfohlen.
Van ist der Gründer von VanAcademy.de. In seiner Freizeit beschäftigt er sich hauptsächlich mit WordPress, HTML/CSS/php und MySQL. Außerdem interessiert er sich so gut wie für jeden Technikkram und Katzen.
