W3docs
de
Anmelden

HTML-Elemente

HTML-Elemente erklärt: gepaarte vs. leere (void) Elemente, Block- vs. Inline-Elemente und korrekte Verschachtelung mit ausführbaren Beispielen.

Elemente sind die Grundbausteine der HyperText Markup Language (HTML). Jedes HTML-Dokument besteht aus Elementen, die mithilfe von Tags definiert werden.

HTML-Elemente und HTML-Tags werden häufig verwechselt. Tags dienen dazu, ein 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 <h1>-Tag: <h1> Titel des Dokuments </h1> – das ist ein Element, und <h1>, </h1> – das sind die Tags.

Die Attribute eines Elements werden ebenfalls innerhalb seines öffnenden Tags angegeben – weitere Informationen dazu, wie sie zusätzliche Daten liefern, finden Sie unter HTML-Attribute.

Typen von HTML-Elementen

HTML-Elemente gibt es in zwei Formen: gepaarte Elemente und leere (void) Elemente.

Ein gepaarteres Element besitzt ein öffnendes Tag (<tag>) und ein zugehöriges schließendes Tag (</tag>); der Inhalt des Elements befindet sich dazwischen. <p>Hallo</p> besteht beispielsweise aus dem öffnenden Tag <p>, dem Text Hallo und dem schließenden Tag </p>.

Tipp

Vergessen Sie das schließende Tag nicht! Obwohl einige HTML-Elemente auch ohne schließendes Tag korrekt dargestellt werden, sollten Sie sich darauf nicht verlassen. Es kann zu unerwarteten Ergebnissen oder Fehlern führen.

Beispiel für gepaarte HTML-Elemente:

<!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>
Probier es selbst »

Im obigen Beispiel haben wir 4 gepaarte Elemente verwendet:

  • das <html>-Element, das alle anderen HTML-Elemente der Webseite enthält,
  • das <body>-Element, das den Hauptinhalt der Webseite enthält,
  • das <p>-Element, das einen Absatz definiert,
  • das <h1>-Element, das die Überschrift der Webseite enthält.

Außerdem haben wir das leere <br>-Tag verwendet, um einen Zeilenumbruch einzufügen.

Leere HTML-Elemente

Leere Elemente (auch void-Elemente genannt) haben keinen Inhalt und daher kein schließendes Tag. Das <br>-Element, das einen Zeilenumbruch einfügt, ist ein gutes Beispiel dafür. In XHTML werden leere Elemente im öffnenden Tag „selbst geschlossen", wie folgt: <br/>.

Die leeren Elemente in HTML sind: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track> und <wbr>.

Info

Das ältere <keygen>-Element war ebenfalls ein leeres Element, wurde jedoch aus dem HTML-Standard entfernt und sollte nicht mehr verwendet werden.

„Leer" bezieht sich ausschließlich darauf, keinen Inhalt zu besitzen – es sagt nichts über das Layout aus. Einige leere Elemente sind Block-Elemente (so zieht <hr> beispielsweise eine horizontale Linie über die gesamte Breite), während andere Inline-Elemente sind (zum Beispiel <br> und <img>).

Beispiel für das HTML-<br>-Tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>HTML &lt;br&gt; tag</h1>
    <p>This tag <br /> defines a line break.</p>
  </body>
</html>
Probier es selbst »

Block- und Inline-HTML-Elemente

Für Styling und Layout fallen die meisten HTML-Elemente anhand ihres Standard-display-Werts in eine von zwei Kategorien: Block-Elemente und Inline-Elemente. Dieses Standardverhalten ist wichtig, da es drei Dinge bestimmt, noch bevor Sie CSS schreiben:

  • Fluss: Block-Elemente beginnen auf einer neuen Zeile und stapeln sich vertikal; Inline-Elemente stehen nebeneinander innerhalb einer Textzeile.
  • Breite und Box-Modell: Ein Block-Element nimmt die gesamte verfügbare Breite ein und berücksichtigt width, height sowie vertikale margin/padding. Ein Inline-Element nimmt nur die Breite seines Inhalts ein und ignoriert width/height sowie vertikale Abstände.
  • Verschachtelung: Ein Block-Element kann andere Block- und Inline-Elemente enthalten, während ein Inline-Element grundsätzlich nur andere Inline-Elemente (und Text) enthalten sollte, keine Block-Elemente.

Sie können die Standardkategorie eines Elements mit der CSS-Eigenschaft display ändern, aber das Kennen der Standardwerte hilft Ihnen vorherzusagen, wie eine Seite aufgebaut wird. Einen tieferen Einblick erhalten Sie unter HTML-Block- und Inline-Elemente.

Block-Elemente strukturieren den Hauptteil Ihrer Webseite, indem sie den Inhalt in zusammenhängende Blöcke unterteilen. Sie beginnen immer auf einer neuen Zeile, nehmen die gesamte verfügbare Breite ein und haben vor und nach dem Element einen Zeilenumbruch.

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 besitzen öffnende und schließende Tags.

Beispiel für HTML-Block-Elemente:

<!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>
Probier es selbst »

Im Beispiel haben wir das Block-Element <footer> verwendet, um die Fußzeile der Webseite und deren Inhalt zu definieren.

Inline-Elemente dienen dazu, einen Teil eines Textes hervorzuheben und ihm eine bestimmte Funktion oder Bedeutung zu geben. Inline-Elemente umfassen meist ein einzelnes Wort oder wenige Wörter. Sie verursachen keinen Zeilenumbruch und nehmen nicht die gesamte Seitenbreite ein, sondern nur den durch ihren Inhalt begrenzten Platz. Inline-Elemente werden in der Regel innerhalb anderer HTML-Elemente verwendet.

Inline-Elemente sind: <a>, <abbr>, <b>, <bdo>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time> und <var>.

Info

Die Elemente <acronym>, <big> und <tt> waren einst ebenfalls Inline-Elemente, sind jedoch mittlerweile veraltet. Verwenden Sie <abbr> anstelle von <acronym> und CSS anstelle von <big> und <tt>.

Verschachtelte HTML-Elemente

HTML-Elemente können andere Elemente enthalten, d. h. verschachtelt sein. Wenn Sie einem Text eine starke Betonung verleihen und den Browser anweisen möchten, ihn fett darzustellen, können Sie beispielsweise das <strong>-Tag innerhalb des <p>-Tags verwenden.

Beispiel für verschachtelte HTML-Elemente:

<!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>
Probier es selbst »
Tipp

HTML-Tags sollten in der richtigen Reihenfolge „verschachtelt" werden, das heißt, das zuletzt geöffnete Tag wird immer als nächstes geschlossen.

In unserem Beispiel haben wir zuerst das <strong>-Tag und dann das <p>-Tag geschlossen.

Übungen

Übung
Welche Aussage über HTML-Elemente ist korrekt? (Wählen Sie alle zutreffenden aus.)
Welche Aussage über HTML-Elemente ist korrekt? (Wählen Sie alle zutreffenden aus.)
Was this page helpful?