Ausführbare HTML-Docs: HTML Tags

Q: Was ist der Unterschied zwischen einem HTML-Tag und einem HTML-Element?

Ein Tag ist das Markup, das du tippst, zum Beispiel oder . Ein Element ist das Ganze, das der Browser daraus baut: das öffnende Tag, seine Attribute, der Inhalt und das schließende Tag. Hi sind zwei Tags, die ein p-Element bilden.

Q: Spielt Groß- und Kleinschreibung bei HTML-Tags eine Rolle?

Nein. und erzeugen dasselbe Element, genauso wie jede Mischung aus Groß- und Kleinbuchstaben. Kleinschreibung ist der übliche Stil und das, was die meisten Formatter ausgeben.

Was ein HTML-Tag ist

Ein HTML-Tag ist ein Name in spitzen Klammern, der ein Stück Inhalt auszeichnet. Die meisten Tags kommen paarweise: ein öffnendes Tag wie <p> und ein schließendes Tag mit Schrägstrich wie </p>. Alles dazwischen ist der Inhalt, und das ganze Paket ist ein Element.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tags</title>
</head>
<body>
  <h1>A heading</h1>
  <p>A paragraph with a <strong>strong</strong> word and a <a href="#end">link</a>.</p>
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
  <p id="end">The browser draws each element in its own way.</p>
</body>
</html>

Ändere <h1> in <h2> (im öffnenden und im schließenden Tag), und die Überschrift wird kleiner. Der Tag-Name sagt dem Browser, was der Inhalt ist.

Aufbau: Tags, Attribute und Elemente

<a href="/docs/html/links" class="nav">Links</a>

Teil	Im Beispiel
Öffnendes Tag	`<a href="/docs/html/links" class="nav">`
Tag-Name	`a`
Attribute	`href="/docs/html/links"` und `class="nav"`
Inhalt	`Links`
Schließendes Tag	`</a>`
Element	alles oben zusammen

Attribute stehen immer im öffnenden Tag, nie im schließenden. Sie werden auf der Seite zu Attributen erklärt.

Bei Tag-Namen spielt Groß- und Kleinschreibung keine Rolle: <P> und <p> sind dasselbe. Schreib sie klein.

Void-Tags: kein schließendes Tag

Manche Elemente können nichts enthalten, deshalb haben sie nur ein öffnendes Tag. Sie heißen Void-Elemente (oft sagt man auch selbstschließende Tags):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Void tags</title>
</head>
<body>
  <p>Line one<br>Line two after a br</p>
  <hr>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='6' fill='%232563eb'/%3E%3C/svg%3E" alt="A blue rectangle">
  <p><input type="text" placeholder="An input"></p>
</body>
</html>

Die vollständige Liste: area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr.

Du kannst sie mit Schrägstrich als <br /> schreiben. Der Schrägstrich bewirkt in HTML nichts; er ist erlaubt, damit Code im XHTML-Stil weiter funktioniert. Ein Schrägstrich an einem normalen Tag wie <div /> wird ebenfalls ignoriert, das div ist also immer noch offen.

Tags verschachteln

Elemente stehen in anderen Elementen. Die Regel lautet: Schließ Tags in umgekehrter Reihenfolge, in der du sie geöffnet hast. Das zuletzt geöffnete wird zuerst geschlossen.

<p>This is <strong>very <em>important</em></strong>.</p>   <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p>   <!-- wrong -->

Browser lehnen fehlerhafte Verschachtelung nicht ab. Sie reparieren sie, und die Reparatur ist nicht immer das, was du gemeint hast. Dieses Beispiel übergibt zwei schlecht verschachtelte Schnipsel an den Parser des Browsers und gibt die Struktur aus, die er tatsächlich gebaut hat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nesting</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const snippets = [
      '<p>Bold <b>and <i>italic</b> overlap</i>.</p>',
      '<p>A paragraph <div>with a div inside</div></p>'
    ];
    const box = document.createElement('div');
    document.getElementById('out').textContent = snippets.map((html) => {
      box.innerHTML = html;
      return 'You wrote:     ' + html + '\nBrowser built: ' + box.innerHTML;
    }).join('\n\n');
  </script>
</body>
</html>

Es passieren zwei Reparaturen. Die überlappenden <b> und <i> werden in zusätzliche Elemente aufgeteilt. Und ein <p> darf kein <div> enthalten, deshalb schließt der Browser den Absatz vor dem div und macht aus dem übrig gebliebenen </p> einen neuen, leeren Absatz. Wenn sich CSS oder JavaScript seltsam verhalten, ist fehlerhafte Verschachtelung eines der ersten Dinge, die du prüfen solltest.

Block- und Inline-Elemente

Die meisten Tags gehören zu einer von zwei Darstellungsgruppen. Block-Elemente (div, p, h1 bis h6, ul, section) beginnen in einer neuen Zeile und nehmen die volle Breite ein. Inline-Elemente (span, a, strong, em, code) sitzen innerhalb einer Textzeile und sind nur so breit wie ihr Inhalt.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div, p { border: 2px solid #2563eb; }
    span, a, strong { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div>div is block</div>
  <p>p is block, with <span>a span</span>, <a href="#">a link</a> and <strong>strong</strong> inline.</p>
</body>
</html>

Die blauen Kästen ziehen sich über die ganze Seite; die gelben umschließen nur ihren Text. CSS kann das mit der Eigenschaft display ändern, aber jedes Tag startet mit seinem Standardwert. Die beiden allgemeinen Container findest du unter div und span.

Die häufigsten HTML-Tags

Tag	Zweck
`<html>`, `<head>`, `<body>`	Das Grundgerüst des Dokuments
`<title>`, `<meta>`, `<link>`	Seiteninformationen im Head
`<h1>` bis `<h6>`	Überschriften
`<p>`	Absatz
`<a>`	Link
`<img>`	Bild
`<ul>`, `<ol>`, `<li>`	Listen
`<strong>`, `<em>`	Wichtiger und betonter Text
`<br>`, `<hr>`	Zeilenumbruch, thematischer Umbruch
`<div>`, `<span>`	Allgemeine Block- und Inline-Container
`<table>`, `<tr>`, `<th>`, `<td>`	Tabellen
`<form>`, `<input>`, `<label>`, `<button>`	Formulare
`<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`, `<article>`	Seitenstruktur mit Bedeutung

Eine Liste auf einer Seite zum Ausdrucken findest du im HTML Cheat Sheet.

Tags, die es nicht gibt

Wenn du ein Tag tippst, das der Browser nicht kennt, scheitert er nicht. Er erzeugt ein unbekanntes Element, zeigt dessen Inhalt an und behandelt es als Inline-Element:

<p>Before <card style="border: 2px solid #16a34a; padding: 2px 6px">an unknown tag</card> after.</p>
<p>A custom element: <user-badge style="background: #e5e7eb; padding: 2px 6px">user-badge</user-badge></p>

Ein unbekanntes Tag hat für Suchmaschinen und Screenreader keine Bedeutung, nimm also lieber ein echtes Tag. Wenn du mit JavaScript eine eigene Komponente baust, gib ihr einen Namen mit Bindestrich (user-badge): Namen mit Bindestrich sind für Custom Elements reserviert und kollidieren nie mit künftigen HTML-Tags.

Häufige Fehler

Ein schließendes Tag vergessen. Ein fehlendes </a> oder </strong> macht den Rest der Seite zu einem Link oder fett. Browser schließen manche Tags für dich (</p>, </li>), diese aber nicht.
Ein Void-Tag schließen. </br> und </img> sind ungültig. Browser lesen </br> sogar als öffnendes <br>, also ergibt <br></br> zwei Zeilenumbrüche.
Überlappende Tags. Schließ in umgekehrter Reihenfolge: <b><i>x</i></b>, niemals <b><i>x</b></i>.
Einen Block in einen Absatz setzen. Ein <div>, eine Liste oder eine Überschrift in <p> beendet den Absatz zu früh. Nimm ein <div> als äußeren Container.
Tags nach ihrem Aussehen auswählen. Verwende <h2>, weil es eine Überschrift ist, nicht weil es groß ist. Größe und Schriftstärke gehören ins CSS.

Häufig gestellte Fragen

Was ist der Unterschied zwischen einem HTML-Tag und einem HTML-Element?

Ein Tag ist das Markup, das du tippst, zum Beispiel <p> oder </p>. Ein Element ist das Ganze, das der Browser daraus baut: das öffnende Tag, seine Attribute, der Inhalt und das schließende Tag. <p>Hi</p> sind zwei Tags, die ein p-Element bilden.

Welche HTML-Tags brauchen kein schließendes Tag?

Void-Elemente können keinen Inhalt haben und haben deshalb kein schließendes Tag: <br>, <hr>, <img>, <input>, <meta>, <link>, <source>, <track>, <wbr>, <area>, <base>, <col> und <embed>.

Soll ich <br> oder <br /> schreiben?

Beides ist gültiges HTML. Der Schrägstrich am Ende ist bei Void-Elementen erlaubt und wird vom Browser ignoriert. Bei einem normalen Tag wie <div /> wird der Schrägstrich ebenfalls ignoriert, das div bleibt also offen, bis ein </div> kommt.

Spielt Groß- und Kleinschreibung bei HTML-Tags eine Rolle?

Nein. <P> und <p> erzeugen dasselbe Element, genauso wie jede Mischung aus Groß- und Kleinbuchstaben. Kleinschreibung ist der übliche Stil und das, was die meisten Formatter ausgeben.

Wie viele HTML-Tags gibt es?

Der aktuelle HTML-Standard definiert über 100 Elemente, aber normale Seiten nutzen etwa 20 bis 30 davon: Überschriften, Absätze, Links, Bilder, Listen, div, span, Formulare und die semantischen Layout-Tags.

Was passiert, wenn ich ein Tag verwende, das es nicht gibt?

Der Browser erzeugt trotzdem ein Element dafür, zeigt seinen Inhalt an und behandelt es als Inline-Element ohne besondere Bedeutung. Eigene Elemente (Custom Elements) sind erlaubt, wenn der Name einen Bindestrich enthält, zum Beispiel <user-card>.

Verwandte Konzepte