HTML-Syntax & -Schreibweise

Von kulturbanause Team

Damit der Browser die Inhalte von HTML-Dateien richtig darstellen kann, muss die korrekte HTML-Schreibweise (HTML-Syntax) eingehalten werden.

Aktualisiert am 8. März 2023 Lesezeit ca. 4 Min.

HTML ist eine sog. Auszeichnungssprache (Markup Language), die den verschiedenen Inhalten einer Website eine Bedeutungsebene sowie Struktur zuweist. Das nennt man semantische Auszeichnung. Jedes HTML-Element steht dabei für eine bestimmte inhaltliche Bedeutung.

HTML erhält vom Browser ein Standard-Styling, damit die unterschiedlichen Bedeutungen der Texte auch ohne Design erkennbar sind. Mit der visuellen Gestaltung hat HTML nur indirekt im Zusammenspiel mit CSS zu tun: Mit Hilfe von CSS werden die einzelnen HTML-Elemente angesprochen und gestaltet.

Damit später ein fehlerfreies Design, gute Suchmaschinenoptimierung und Barrierefreiheit möglich ist, muss der HTML-Code korrekt geschrieben werden. Die HTML-Syntax muss daher eingehalten werden und fehlerfrei sein.

Umschließende HTML-Befehle

HTML zeichnet die Inhalte einer Website entsprechend Ihrer Bedeutung aus. Daher bestehen die meisten HTML-Elemente aus einem Anfangsteil (öffnender »Tag«) und einem Endteil (schließender »Tag«). Zwischen dem Anfang und dem Ende steht der Text der semantisch ausgezeichnet werden soll.

Geschrieben werden die einzelnen HTML-Elemente in spitzen Klammern (<html-element>). Der schließende HTML-Tag muss einen Slash nach der öffnenden spitzen Klammer besitzen </html-element>.

<html-element>Inhalt</html-element>

Das folgende Beispiel eines Textes zeigt die semantische Auszeichnung mit Hilfe des HTML-Elements <p> (Paragraph = Absatz). Der Text zwischen <p> und </p> wird als Absatz ausgezeichnet.

<p>Hier steht der Inhalt.</p>

In einem separaten Beitrag, haben wir die wichtigsten HTML-Befehle und ihre Bedeutung zusammengefasst.

Verschachtelung von HTML-Elementen

HTML-Elemente werden verschachtelt. Die semantische Bedeutung bezieht sich dabei immer auf das übergeordnete Element. Das folgende Beispiel zeigt einen Artikel (<article>), der eine Überschrift 1 (<h1>), sowie den bereits bekannten Absatz (<p>) enthält.

<article>
  <h1>Hier steht eine Überschrift 1</h1>
  <p>Hier steht der Inhalt.</p>
</article>

Wichtig ist in diesem Zusammenhang, dass die Elemente korrekt verschachtelt werden. Folgender Aufbau ist beispielsweise falsch, da der Absatz nach dem Artikel geschlossen wird.

<article>
  <h1>Hier steht eine Überschrift 1</h1>
  <p>Hier steht der Inhalt.
</article></p> <!-- Falsch! -->

Selbstschließende HTML-Befehle

Es gibt auch einige sog. selbstschließende HTML-Elemente. Diese Elemente zeichnen keine Textinhalte aus, sondern stehen für eine Bedeutung, die an einer bestimmten Stelle hergestellt werden soll. Zeilenumbrüche (<br> = Break) werden beispielsweise mit Hilfe von selbstschließenden Tags erzeugt. Auch Bilder <img> gehören in diese Kategorie.

<p>Hier beginnt der Text, <br> der hier in der zweiten Zeile weitergeht.</p>

HTML-Attribute

HTML-Elemente erlauben auch sog. Attribute. Mit Hilfe von Attributen werden dem Element weitere Informationen (Werte) zugewiesen. Die Basis-Syntax eines HTML-Element inkl. Attribut sieht wie folgt aus:

<html-element attribut="wert">Inhalt</html-element>

Wie viele und welche Attribute ein Element unterstützt, bzw. zwingend benötigt, ist abhängig vom jeweiligen HTML-Element. Ein typisches Beispiel für ein Element mit Pflicht-Attribut ist der Link (<a> = Anchor), dem mit dem Attribut (href = Hypertext-Reference) ein Link-Ziel zugewiesen wird.

<a href="http://kulturbanause.de">kulturbanause.de besuchen</a>

Auch Bilder <img> benötigen zwingend Attribute. Das folgende Beispiel zweigt ein Bild mit Bildquelle src, sowie einer Höhe height und einer Breite width.

<img src="bild.jpg" height="200" width="300">

Kommentare

Kommentare werden in HTML mit <!-- eingeleitet und mit --> beendet. Sie sind sichtbar im Quelltext der Website.

<!-- Ich bin ein Kommentar -->

Validierung

HTML-Code kann auf syntaktische Fehler überprüft werden. Dazu wird ein sogenannter Validator eingesetzt, wie der des Markup Validation Service des World Wide Web Konsortiums (W3C).

Geschrieben von kulturbanause Team

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.