W3docs
de
Anmelden

Grundlegende HTML-Tags

Lerne die grundlegenden HTML-Tags für jede Seite: Überschriften, Absätze, Bilder, Links, Buttons, Listen und horizontale Linien, mit ausführbaren Beispielen.

HTML ist eine Auszeichnungssprache: Du umschließt deinen Inhalt mit Tags (Elementen), die dem Browser mitteilen, was jedes Inhaltsstück bedeutet — das ist eine Überschrift, das ist ein Absatz, das ist ein Link. Ohne Auszeichnung würde ein Browser nur eine Textwand ohne Struktur sehen. Das Verständnis der grundlegenden Tags ist die Grundlage für alles andere in HTML.

Hier sind die Elemente, die du auf nahezu jeder Seite am häufigsten verwenden wirst:

Diese Seite stellt jeden davon vor, erklärt warum du ihn brauchst, und liefert ein ausführbares Beispiel, das du bearbeiten kannst.

HTML-Dokumente

Jede HTML-Seite teilt dasselbe Grundgerüst. Die folgenden Bestandteile erscheinen in allen Beispielen auf dieser Seite, daher lohnt es sich zu wissen, was jedes einzelne tut:

  • <!DOCTYPE html> muss die allererste Zeile sein. Es ist kein Tag, sondern eine Deklaration, die dem Browser mitteilt, den modernen (HTML5) Standardmodus zu verwenden. Lässt du sie weg, fällt der Browser in einen alten „Quirks-Modus" zurück, der Seiten inkonsistent rendert.
  • Das gesamte Dokument ist im <html>-Element eingeschlossen: Es beginnt mit <html> und endet mit </html>. Dies ist das Wurzelelement.
  • Der Abschnitt <head> enthält Informationen über die Seite, die nicht im Seitenkörper angezeigt werden — zum Beispiel den <title>, der den Text im Browser-Tab festlegt und von Suchmaschinen genutzt wird.
  • Der sichtbare Inhalt der Seite befindet sich zwischen <body> und </body>. Alles, was der Benutzer sieht — Überschriften, Absätze, Bilder, Links — gehört hierher.

Beispiel eines HTML-Dokuments:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>Here is the paragraph.</p>
  </body>
</html>
Probier es selbst »

HTML-Überschriften

Überschriften geben einer Seite ihre Gliederung. Es gibt sechs Ebenen von HTML-Überschriften, von <h1> (wichtigste) bis <h6> (am wenigsten wichtig). Verwende <h1> für den Haupttitel der Seite, <h2> für Hauptabschnitte, <h3> für Unterabschnitte und so weiter — wie ein Inhaltsverzeichnis.

Überschriften sind nicht nur größerer, fettgedruckter Text. Ihre Ebenen tragen eine Bedeutung, die für Barrierefreiheit und SEO wichtig ist: Screenreader-Nutzer navigieren eine Seite, indem sie zwischen Überschriften springen, und Suchmaschinen nutzen die Überschriftenstruktur, um zu verstehen, worum es auf der Seite geht. Wähle daher eine Überschriftenebene wegen ihrer Bedeutung, nicht wegen ihrer Größe — überspringe niemals Ebenen, nur um Text kleiner erscheinen zu lassen.

Beispiel der HTML-Überschriften:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
  </body>
</html>
Probier es selbst »

HTML-Absätze

Das <p>-Element gruppiert deinen Text in Absätze. Browser fügen ober- und unterhalb jedes Absatzes automatisch Abstand hinzu, sodass du keine Leerzeilen selbst einfügen musst — tatsächlich werden zusätzliche Leerzeichen und Zeilenumbrüche im Quellcode zu einem einzigen Leerzeichen zusammengefasst. Text in <p> einzuschließen ist die Methode, dem Browser zu sagen: „Das ist ein Block mit fließendem Text."

Beispiel der HTML-Absätze:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Elements example</h2>
    <p>This is some paragraph.</p>
    <p>This is another paragraph <br /> with line break.</p>
  </body>
</html>
Probier es selbst »

HTML-Bilder

Der <img>-Tag bettet ein Bild in die Seite ein. Es ist ein leeres Element (kein schließender Tag) und wird vollständig durch seine Attribute gesteuert:

  • src — der Pfad oder die URL der anzuzeigenden Bilddatei. Ohne ihn wird nichts angezeigt.
  • alt — der Alternativtext (siehe unten).
  • width / height — die Größe des Bildes in Pixeln. Das Festlegen dieser Werte reserviert Platz, damit das Layout nicht springt, während das Bild geladen wird.

Warum das alt-Attribut wichtig ist

Das alt-Attribut enthält eine kurze Textbeschreibung des Bildes. Es ist erforderlich, da es mehreren wichtigen Zwecken dient:

  • Screenreader lesen den alt-Text laut vor, sodass Menschen, die das Bild nicht sehen können, es dennoch verstehen — das ist wesentlich für die Barrierefreiheit.
  • Wenn das Bild nicht geladen werden kann, zeigt der Browser stattdessen den alt-Text an.
  • Suchmaschinen nutzen ihn, um zu verstehen, was das Bild darstellt.

Guter alt-Text beschreibt den Inhalt oder Zweck des Bildes in wenigen Worten, als ob du es jemandem am Telefon beschreiben würdest. Zum Beispiel ist alt="Aleq" (bedeutungslos für jeden, der nicht weiß, was „Aleq" ist) weniger geeignet als etwa alt="Porträt eines lächelnden Mannes mit Brille". Wenn ein Bild rein dekorativ ist und keine Information hinzufügt, verwende ein leeres alt="", damit Screenreader es überspringen.

Beispiel der HTML-Bilder:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is an image example</h1>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
  </body>
</html>
Probier es selbst »

Links verwandeln einzelne Seiten in ein vernetztes Web — sie ermöglichen es Benutzern, von einer Seite zur anderen zu klicken. Du erstellst einen Link mit dem <a>-Tag (Anker) und umschließt damit den Text oder das Bild, das anklickbar sein soll.

Das Ziel wird mit dem href-Attribut festgelegt (kurz für Hypertext-Referenz). Das ist die Adresse, zu der der Browser navigiert, wenn auf den Link geklickt wird — eine absolute URL wie https://www.w3docs.com/ oder ein Pfad auf deiner eigenen Website wie /learn-html/html-links. Ohne ein href-Attribut ist ein <a>-Element nur Text und tut nichts.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>
Probier es selbst »

HTML-Buttons

Der <button>-Tag erstellt einen anklickbaren Button, den Benutzer drücken können, um eine Aktion auszulösen — ein Formular abzusenden, ein Menü zu öffnen oder JavaScript auszuführen.

Ein Button hat ein type-Attribut. type="button" festzulegen ist eine gute Gewohnheit, wenn der Button nicht dazu gedacht ist, ein Formular abzusenden: Standardmäßig hat ein <button> innerhalb eines <form> den Typ submit, sodass das Weglassen des Typs dazu führen kann, dass das Formular unerwartet abgesendet (und die Seite neu geladen) wird. Die Verwendung von type="button" bewirkt, dass der Button von sich aus nichts tut, bis du ihm ein Verhalten zuweist, was diese unbeabsichtigte Übermittlung verhindert.

Beispiel des HTML-<button>-Tags:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the HTML &lt;button&gt; tag:</h1>
    <p>You can specify the HTML buttons with the button tag:</p>
    <button type="button">Button</button>
  </body>
</html>
Probier es selbst »

HTML-Listen

Listen gruppieren zusammengehörige Elemente. Verwende den <ul>-Tag für eine ungeordnete Liste (Aufzählungspunkte, bei denen die Reihenfolge keine Rolle spielt) oder den <ol>-Tag für eine geordnete Liste (nummerierte Einträge, bei denen die Reihenfolge wichtig ist, z. B. Schritte in einem Rezept). Innerhalb beider wird jeder Eintrag in einen <li>-Tag (Listenelement) eingeschlossen.

Beispiel der HTML-Listen:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>An unordered list</h2>
    <ul>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ul>
    <h2>An ordered list</h2>
    <ol>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ol>
  </body>
</html>
Probier es selbst »

Horizontale Linien in HTML

Der HTML-<hr>-Tag stellt einen thematischen Bruch zwischen Inhalten auf Absatzebene dar — zum Beispiel einen Wechsel zu einem neuen Thema innerhalb eines Abschnitts oder einen Szenenwechsel in einer Geschichte. In HTML5 ist es ein semantisches Element, nicht nur eine dekorative Linie: Es kommuniziert, dass der Inhalt davor und danach von unterschiedlichen Dingen handelt. Browser rendern es üblicherweise als horizontale Linie, aber das ist nur seine Standarddarstellung. Es ist ein leerer Tag und hat daher keinen schließenden Tag.

Beispiel des HTML-<hr>-Tags:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Welcome to W3Docs</h1>
    <hr />
    <p>
      Learn to design and build professional website<br />
      Learn to design and build professional website
    </p>
    <p>Learn to design and build a professional website</p>
    <hr />
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <hr />
  </body>
</html>
Probier es selbst »

Übung

Übung
Welche Aussagen über grundlegende HTML-Elemente sind wahr?
Welche Aussagen über grundlegende HTML-Elemente sind wahr?

Zusammenfassung

Die hier vorgestellten grundlegenden HTML-Tags sind die Bausteine nahezu jeder Webseite:

Was this page helpful?