Tags und Elemente

Ein Element besteht meist aus drei Teilen hintereinander: einem öffnenden Tag, etwas Inhalt und einem schließenden Tag mit Schrägstrich.

Die Teile eines Elements

Schau dir <p>Bread is ready.</p> an. Das öffnende Tag <p> sagt, dass hier ein Absatz beginnt. Das schließende Tag </p> mit einem Schrägstrich nach der ersten spitzen Klammer sagt, dass er endet. Alles dazwischen ist der Inhalt. Das Ganze, Tags plus Inhalt, ist das Element. Oft sagt man Tag und meint Element, und im Gespräch ist das in Ordnung. Beim Lesen von Dokumentation hilft der Unterschied aber: Ein Tag ist das Stück in spitzen Klammern, ein Element ist das fertige Stück der Seite.

Attribute fügen Details hinzu

Ein öffnendes Tag kann Attribute tragen, zusätzliche Einstellungen in der Form name="value". In <a href="menu.html">Menu</a> sagt das Attribut href, wohin der Link führt. In <html lang="en"> nennt das Attribut lang die Sprache. Setz den Wert in doppelte Anführungszeichen. Der Standard erlaubt manche Werte ohne Anführungszeichen, aber mit Anführungszeichen gibt es nie Ärger. Mehrere Attribute werden durch Leerzeichen getrennt, und ihre Reihenfolge spielt keine Rolle. Einige Attribute, etwa required an einem Formularfeld, sind boolesch: Schon der Name allein schaltet sie ein.

<p class="note" id="opening">We open at <strong>7 am</strong>.</p>

Verschachteln: in umgekehrter Reihenfolge schließen

Elemente stehen in anderen Elementen. Im Beispiel oben steht <strong> innerhalb von <p>. Die Regel ist dieselbe wie bei Klammern in der Mathematik: Was zuletzt geöffnet wurde, muss zuerst geschlossen werden. <p><strong>7 am</p></strong> ist falsch, weil der Absatz schließt, während das strong-Element noch offen ist. Browser raten, was du gemeint hast, aber verschiedene Fehler führen zu verschiedenen Vermutungen. Wenn du Kindelemente um zwei Leerzeichen einrückst, wie die Beispiele in diesem Kurs, siehst du die Verschachtelung auf einen Blick.

Leere Elemente

Manche Elemente können keinen Inhalt haben und haben deshalb kein schließendes Tag. Man nennt sie leere Elemente (void elements). Die häufigsten sind <br> (ein Zeilenumbruch), <hr> (ein thematischer Umbruch), <img>, <input>, <meta> und <link>. Manchmal siehst du sie mit Schrägstrich geschrieben, etwa <br />. In HTML ist der Schrägstrich erlaubt und wird ignoriert, beide Formen funktionieren also.

Bedeutung, nicht Aussehen

Innerhalb eines Absatzes kannst du Wörter mit <strong> für starke Wichtigkeit und mit <em> für Betonung markieren, also die Art von Betonung, die verändert, wie ein Satz gesprochen wird. Browser zeigen strong fett und em kursiv an, aber es geht um die Bedeutung. Ein Screenreader liest sie vielleicht mit anderer Stimme vor, und eine Suchmaschine behandelt sie als wichtige Wörter. Wenn du Fettschrift nur als Schmuck willst, ist das eine Aufgabe für CSS. <b> und <i> gibt es weiterhin für Text, der hervorgehoben wird, ohne wichtiger zu sein, etwa ein Schiffsname oder ein Fremdwort.

Sonderzeichen und Kommentare

Weil < ein Tag beginnt, kannst du es nicht als normalen Text tippen. Schreib stattdessen eine Zeichenreferenz: < für „kleiner als“, > für „größer als“ und & für das kaufmännische Und selbst. Einen Kommentar, <!-- like this -->, ignoriert der Browser. Er eignet sich gut für Notizen an dich selbst. Und schließlich fasst HTML Leerraum zusammen: Zehn Leerzeichen oder drei Zeilenumbrüche in deiner Datei erscheinen als ein einziges Leerzeichen. Das Layout entsteht durch Elemente und CSS, nicht durch Drücken der Leertaste.