HTML-Elemente
Elemente sind die Grundlagen der HyperText Markup Language (HTML). Jedes HTML-Dokument besteht aus Elementen, die mithilfe von Tags angegeben werden.
HTML-Elemente und HTML-Tags werden oft verwechselt. Die Tags werden verwendet, um das Objekt zu öffnen und zu schließen, während das Element sowohl die Tags als auch seinen Inhalt umfasst. Betrachten wir ein Beispiel mit dem Tag <h1>: <h1> Titel des Dokuments </h1> - ist ein Element, und <h1>, </h1> - sind Tags.
Arten von HTML-Elementen
HTML-Elemente können paarweise vorkommen oder leer sein. Die gepaarten Elemente haben ein öffnendes () und ein schließendes (</>) Tag, und der Inhalt des Elements steht dazwischen.
TIP
Vergessen Sie nicht das schließende Tag! Obwohl einige HTML-Elemente auch ohne schließendes Tag korrekt angezeigt werden, sollten Sie sich nicht darauf verlassen. Das kann zu unerwarteten Ergebnissen oder Fehlern führen.
Die leeren Elemente haben keine schließenden Tags. In XHTML werden die leeren Elemente im öffnenden Tag so „geschlossen“: <br/> .
Die leeren Elemente in HTML sind: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track> und <wbr>.
Beispiel für die leeren HTML-Elemente:
Beispiel mit gepaarten HTML-Elementen|HTML Elements|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Title of the document</h1>
<p>The first paragraph</p>
<p>The second paragraph, <br /> where line break is inserted </p>
</body>
</html>Ergebnis
Im obigen Beispiel haben wir 4 gepaarte Elemente verwendet:
- das Element
<html>, das alle anderen HTML-Elemente der Webseite enthält, - das Element
<body>, das den Inhalt der Webseite enthält, - das Element
<p>, das einen Absatz definiert, - das Element
<h1>, das die Überschrift der Webseite enthält.
Im gegebenen Beispiel haben wir außerdem ein leeres <br>-Tag verwendet, um einen Zeilenumbruch einzufügen.
Block- und Inline-HTML-Elemente
Für Styling-Zwecke werden alle HTML-Elemente in zwei Kategorien unterteilt: Block-Elemente und Inline-Elemente.
Block-Elemente sind diejenigen, die den Hauptteil Ihrer Webseite strukturieren, indem sie Ihren Inhalt in zusammenhängende Blöcke aufteilen. Sie beginnen immer in einer neuen Zeile und nehmen die volle Breite einer Seite von links nach rechts ein; sie können auch eine oder mehrere Zeilen einnehmen und haben vor und nach dem Element einen Zeilenumbruch. Block-Elemente können sowohl Block- als auch Inline-Elemente enthalten.
Block-Elemente sind <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> und <video>.
Alle Block-Elemente haben öffnende und schließende Tags.
Beispiel für die Block-HTML-Elemente:
Nachricht an den Autor|Beispiel für Block-Elemente|HTML Elements|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<footer>
<p>Author: W3docs team</p>
<p><a href="[email protected]">Send message to the author</a>.</p>
</footer>
</body>
</html>Ergebnis
Im Beispiel haben wir das Block-Element <footer> verwendet, um die Fußzeile der Webseite und ihren Inhalt zu definieren.
Inline-Elemente werden verwendet, um einen Teil eines Textes hervorzuheben und ihm eine bestimmte Funktion oder Bedeutung zu geben. Inline-Elemente umfassen normalerweise ein einzelnes oder einige wenige Wörter. Sie verursachen keinen Zeilenumbruch und nehmen nicht die volle Breite einer Seite ein, sondern nur den Raum, der durch ihr öffnendes und schließendes Tag begrenzt wird. Inline-Elemente werden normalerweise innerhalb anderer HTML-Elemente verwendet.
Inline-Elemente sind: <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt> und <var>.
Verschachtelte HTML-Elemente
HTML-Elemente können andere Elemente enthalten, d. h. verschachtelt sein. Wenn Sie beispielsweise einem Text eine starke Betonung geben und den Browser anweisen möchten, ihn fett darzustellen, können Sie das Tag <strong> verwenden, das im Tag <p> verschachtelt ist.
Beispiel für verschachtelte HTML-Elemente:
HTML Elements
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Title of the document</h1>
<p>The first paragraph</p>
<p><strong>This part of the sentence</strong> has a strong emphasis and is displayed as bold.</p>
</body>
</html>TIP
HTML-Tags sollten in der richtigen Reihenfolge „verschachtelt“ sein, das heißt, das zuletzt geöffnete Tag ist immer das nächste, das geschlossen wird.
In unserem Beispiel haben wir zuerst das Tag <strong> geschlossen und dann das Tag <p>.
Das End-Tag
Am Ende sollten Sie das End-Tag setzen. Allerdings werden einige HTML-Elemente auch dann noch korrekt angezeigt, wenn Sie es vergessen. Das schließende Tag gilt als optional, daher funktioniert das folgende Beispiel in allen Browsern. Verlassen Sie sich aber nicht darauf. Wenn Sie unerwartete Fehler vermeiden möchten, versuchen Sie, das End-Tag nicht zu vergessen.
Beispiel, bei dem das HTML-End-Tag fehlt:
Beispiel, bei dem das HTML-End-Tag fehlt
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>HTML end tag </h1>
<p>We forgot to put the end tag.
</body>
</html>Leere HTML-Elemente
Die HTML-Elemente, die keinen Inhalt haben, werden leere Elemente genannt. Das <br>, das einen Zeilenumbruch definiert, ist ein leeres Element, das kein schließendes Tag hat.
Beispiel für das HTML-<br>-Tag:
Beispiel für das HTML-<br>-Tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>HTML <br> tag</h1>
<p>This tag <br /> defines a line break.</p>
</body>
</html>Übung
What are some characteristics of HTML elements as described on the given webpage?