HTML Elemente

HTML Elemente

HTML Elemente bestehen für gewöhnlich aus einem Start(öffnenden) Tag und einem End(schliessenden) Tag.

<tagname>Inhalt gehört hier hin...</tagname>

Das komplette HTML Element ist alles vom Start(öffnenden) bis zum End(schliessenden) HTML-Tag.

<p>Mein erster Paragraph.</p>

Start(öffnendes) Tag Element Inhalt End(schliessendes) Tag
<h1> Meine erste Überschrift </h1>
<p> Mein erster Paragraph. </p>
<br>    

HTML Elemente ohne Inhalt werden leere Elemente genannt. Leere Elemente haben kein End Tag, wie zum Beispiel das <br> Element(was auf einen Zeilenumbruch hinweist).


Verschachtelte HTML Elemente

HTML Elemente können verschachtelt sein(Elemente erhalten Elemente).

Alle HTML Dokumente bestehen aus verschachtelten HTML Elementen.

Dieses Demo Beispiel enthält sechs HTML Elemente.

Demo Beispiel

Demo Beispiel Erklärung

Das <html> Element definiert das gesamte Dokument.

Es hat ein Start(öffnendes) Tag <html> und ein End(schliessendes) Tag </html>.

Der Elementinhalt und der vorwiegend sichtbare Teil einer Webseite für den Benutzer, ist ein anderes HTML Element (das <body> Element).

Das <body> Element definiert den so genannten Dokumentkörper, in diesem ist der sichtbare Teil, einer Webseite für den Nutzer enthalten.

Es hat ein Start(öffnendes) Tag <body> und ein End(schliessendes) Tag </body>.

Der Elementinhalt des <body> Tag besteht aus zwei anderen HTML Elementen (<h1> und <p>).

Das <h1> Element definiert eine Überschrift.

Es hat ein Start(öffnendes) Tag <h1> und ein End(schliessendes) Tag </h1>.

Der Elementinhalt lautet: Dieses ist eine Überschrift

Das <p> Element definiert einen Paragraphen(Absatz).

Es hat ein Start(öffnendes) Tag <p> und ein End(schliessendes) Tag </p>.

Der Elementinhalt lautet: Dieses ist ein Paragraph.


Nicht das End(schliessende) HTML Tag vergessen

Manche HTML Elemente werden korrekt angezeigt, obwohl das End(schliessende) Tag vergessen wurde. Dieses wäre für den Benutzer der Webseite zwar kein Problem, aber würde zu Einbußen bei den Suchmaschienen führen, mehr dazu in weiteren Kapiteln.

Demo Beispiel

Das obere Demo Beispiel funktioniert in allen Browsern, da das schliessende End Tag als optional betrachtet wird.

Verlasse dich nie darauf und kontrolliere deinen Quellcode. Es kann wie bereits erwähnt, zu unerwarteten Ergebnissen und / oder Fehlern kommen, wenn das End(schliessende) Tag vergessen.


Leere HTML Elemente

HTML Elemente ohne Inhalt werden leere HTML Elemente genannt.

<br> ist ein leeres Element ohne End(schliessendes) Tag (das <br> Tag definiert bzw. erzeugt einen Zeilenumbruch).

Leere Elemente können optional bereits im Start Tag "geschlossen" werden: </br>.

In HTML5 müssen leere Elemente nicht unbedingt geschlossen werden, wenn jedoch eine strengere Validierung gewünscht bzw. gefordert ist um Ihr Dokument für XML-Parsern lesbar zu machen, müssen Sie alle HTML-Elemente auch die Leeren HTML Elemente geschlossen werden.


Kleinbuchstaben verwenden

Bei HTML Tags wird nicht zwischen Groß- und Kleinschreibung unterschieden: <P> bedeutet dasselbe wie <p>.

Der HTML5 Standard erfordert keine Kleinbuchstaben, aber W3C empfiehlt Kleinbuchstaben in HTML Dokumenten und verlangt Kleinbuchstaben für strengere Dokumenttypen wie XHTML.

Zurück Nächste Lektion