Was ist eine Syntax

Eine Syntax in Bezug auf Programmiersprachen stellt immer ein Satz Regeln dar. Jede Sprache auf dieser Welt, sei es eine gesprochene Sprache oder eine Programmiersprache braucht ein Regelwerk, nach dem sie funktioniert. In der deutschen Sprache haben wir dafür eine Grammatik, die festlegt, wo ein Artikel und wo eine Konjunktion im Satz stehen darf. Bei Computersprachen spricht man von einer Syntax.

Ähnlich, wie bei allen Sprachen haben wir auch bei HTML eine Art Vokabular, dass wir lernen können (Elemente, Attribute) und eine einzige Syntax, die festlegt, wie diese zu gebrauchen sind.

Unterschied zwischen Element und Tags

Fangen wir mit dem Tag an. Dieser lässt sich in zwei Arten gliedern: Dem Start-Tag und dem End-Tag. Der Start-Tag fängt mit einer spitzen Klammer links an, gefolgt von dem Namen des Tags und abschließend der spitzen Klammer rechts:

  • Html
  • Ergebnis
< NAME_DES_TAGS >

Ein End-Tag wird genauso gebildet, mit der Ausnahme, dass nach der ersten Klammer ein Schrägstrich (Slash) kommt:

  • Html
  • Ergebnis
< / NAME_DES_TAGS >

Ein Element besteht aus einem öffnenden Start-Tag und einem schließenden End-Tag. Die Namen der beiden Tags müssen genau dem Namen des Elements gleichen. Im Folgenden soll das an dem Element "h1" gezeigt werden, dass für Überschriften verwendet wird:

  • Html
  • Ergebnis
<h1> Inhalt des Überschriften-Elements </h1>

Eines der wichtigsten Eigenschaften von Element ist ihre Möglichkeit noch mehr Elemente zu beinhalten. Somit können Elemente beliebig geschachtelt werden. Im Folgenden haben wir einem Paragraphen-Element ein Strong-Element hinzugefügt, welches den Inhalt (Text) fettgedruckt aussehen lässt:

  • Html
  • Ergebnis
<p> <strong>Fettgedruckter Inhalt</strong> </p>

Head-Bereich

Wie bereits aus dem HTML-Tutorial Eine einfache Webseite bekannt, besteht ein jedes HTML-Dokument aus einem Head-Bereich und einem Body-Bereich. Hier soll der Head-Bereich ein wenig genauer unter die Lupe genommen werden.

Der Head-Bereich beinhaltet Informationen über die Webseite. Bis auf den Titel der Webseite, welcher mit dem <title></title> Element angegeben wird und von Browsern überwiegend in der Tab-Leiste dargestellt wird, sind alle Elemente im Head-Bereich eher unsichtbar. Wieso eher? Nun... Meta-Informationen, wie beispielsweise das Meta-Element

  • Html
  • Ergebnis
<meta name="description" content="Beschreibung des Webseite.">

können von Suchmaschinen angezeigt werden und sind somit mehr oder weniger sichtbar:

Meta-Description-Tag Beispiel - CodingLab

Weiterhin bietet der Head-Bereich die Möglichkeit Zeichenkodierungen zu setzen und seit dem Zeitalter von verschiedenen Bildschirmen (Smartphones, Tablets, etc.) auch den Viewport zu setzen. Damit ist nur ein geringer Teil des Funktionsumfangs genannt, sodass es zum Head-Bereich ein separates Tutorial gibt.

Body-Bereich und Whitespaces

Im Body-Element <body></body> steht der eigentliche Inhalt unserer Webseite. Alle sichtbaren Inhalte, wie beispielsweise, Navigationsleisten, Videos, Bilder, Links, Like- und Share-Buttons stehen im Body-Bereich. Genau wie das Head-Element gibt es nur ein einziges Body-Element.

Leere Elemente

Ein "Leeres Element" lässt vermuten, dass dieses Element keinen Inhalt hat. Tatsächlich muss das aber nicht heißen, dass es somit ein nutzloses Element ist, noch dass man es nicht sieht. Eines der bekanntesten leeren Elemente ist zugleich ein sehr häufig genutztes:

  • Html
  • Ergebnis
<img src="Link_Zum_Bild" alt="Alternativer Text" />

Das erste was auffällt: Leere Elemente bestehen lediglich aus einem Start-Tag. Dieser kann nach strikter Validation auch im selbigen Tag geschlossen werden, indem ein Schrägstrich (Slash) vor der schließenden Klammer eingefügt wird. Allerdings ist das nicht zwingend notwendig, denn die meisten HTML-Parser kommen auch mit folgender Syntax des LineBreak-Elements (Zeilenumbruch) zurecht:

  • Html
  • Ergebnis
<br>

Das Slash am Ende kommt aus XHTML Zeiten und ist eine Konvention für XML-Parser. Diese benötigen das Zeichen größtenteils.

Unterschied Inline- und Blockelemente

In HTML unterscheidet man grundlegend zwei Arten von Elementen:

  • Inlineelemente
  • Blockelemente

Das Inlineelement steht - wie der Name es bereits vermuten lässt - "in line", d.h. in Zeile und Reihe. Somit stehen diese Elemente nebeneinander und nehmen soviel Platz ein, wie sie brauchen. Aufgrund dieser Eigenschaft, werden Inlineelemente oftmals für Textinhalte genutzt, um daraus beispielsweise Links zu machen oder den Text umzugestalten:

  • Html
  • Ergebnis
<a href="https://www.coding-lab.de/">Dieser Textinhalt ist ein Link</a> <strong>Dieser Textinhalt ist fettgedruckt</strong> <u>Dieser Textinhalt ist unterstrichen</u>

Näheres zu den Textelementen gibt es in einem gesonderten Tutorial.

Ein Blockelement hat immer ein Zeilenumbruch vor und hinter sich und steht somit alleine in einer Zeile. Es nimmt die gesamte Breite, die ihm zur Verfügung steht ein. Steht ein Blockelement also im <body></body>-Element, so nimmt es die ganze Breite der Webseite ein, solange der Bodybereich nicht skaliert wurde. Steht es jedoch in einem Container, der 200px groß ist, so beträgt die Breite des Blockelements ebenfalls 200px. Im folgenden werden oft genutzte Blockelemente aufgelistet:

  • Html
  • Ergebnis
<div>Container</div> <h1>Überschrift</h1> <p>Paragrapf</p> <form><input type="text" name="Pseudo" value="Formularfeld" /></form>

Div und Span

Keine Frage: Für Designer und wahre Webartisten, sind die Elemente <div></div> und <span></span> von äußerster Bedeutung, da sie zusammen mit CSS zu wahren Kunstwerken auf einer Webseite werden können. Aber hier soll auf den eigentlichen Sinn hinter den beiden Elementen eingegangen werden.

Das Div-Element kommt aus dem Englischen "division", bedeutet soviel wie "Unterteilung" und ist ein Blockelement, d.h. es erstreckt sich über die ihm zur Verfügung stehende Breite und steht alleine in einer Zeile, soweit nicht manipuliert. Dadurch soll es als Container für andere HTML-Elemente genutzt werden. Elemente, die miteinander in Verbindung stehen, sollten in einem solchen Container gruppiert werden.

  • Html
  • Ergebnis
<!-- Navigation --> <div id="nav"> <ul> <li><a href="https://www.coding-lab.de/html">HTML Tutorials</a></li> <li><a href="https://www.coding-lab.de/html">HTML5 Tutorials</a></li> <li><a href="https://www.coding-lab.de/css">CSS Tutorials</a></li> </ul> </div>

Das Span-Element kommt aus dem englischen "to span", bedeutet soviel wie "umfassen" und ist ein Inlineelement. Man sollte jetzt davon ausgehen, dass es zur Gruppierung von Textelementen und Texten generell bestimmt ist, aber die häufigste Verwendung für das Element steht im Zusammenhang mit dem Attribut style="" und der Stylesheet-Sprache CSS. Damit können dem Element unzählige Formatierungen hinzugefügt werden. Es ist sogar möglich aus einem Inlineelement ein Blockelement zu machen. Im Folgenden soll ein Text rot gefärbt werden.

  • Html
  • Ergebnis
<span style="color: red;">Roter Text</span>

Attribute

Mit Attributen kann man den Elementen wertvolle Informationen zukommen lassen. Sie werden immer im Start-Tag definiert und bestehen fast immer aus dem Namen des Attributs und dem Wert des Attributs:

  • Html
  • Ergebnis
<a href="https://www.coding-lab.de/">Im HREF-Attribut steht das Ziel dieses Links</a>

Das Anchor-Element würde ohne ein Attribut seinen Sinn verfehlen, da es weder anklickbar, noch von anderen Links referenziert (mittels ID-Attribut; siehe Link-Element) werden könnte. Somit wäre es kein Knotenpunkt mehr. Gerade hier sieht man, das Attribute genauso wichtig, wie ihre Elemente sind. Des Weiteren gibt es Attribute, die keinen Wert enthalten:

  • Html
  • Ergebnis
<form> <input type="radio" name="geschlecht" value="maennlich" checked />männlich<br /> <input type="radio" name="geschlecht" value="weiblich" />weiblich </form>

Im obigen Quellcode wird eine Gruppe von Radiobuttons definiert, wobei ein Button bereits als "angeklickt" vordefiniert wird. Das Attribut checked würde ohne Wert bereits ausreichen, wäre da nicht wieder die XHTML Konvention für die XML-Parser. Diese verlangt, dass alle Attribute einen Wert haben und so kommt es, dass aus checkedchecked=true oder auch checked=checked wird.

Kommentare

In beinahe jeder Computersprache gibt es Kommentare, deswegen soll hier kurz der Sinn hinter den Kommentaren erklärt werden. Das wichtigste zum Thema Kommentare ist zu wissen, dass sie nie von Parsern, Compilern oder anderen Programmen, die den Quellcode einlesen und evtl. bearbeiten, beachtet werden. Somit sind Kommentare lediglich für den Menschen von Nutzen, der den Quellcode liest und werden in HTML auch nicht auf der Webseite sichtbar. Sei es, dass man eine Erinnerung für sich selbst formuliert oder Informationen für seine Teamkollegen bereitstellt:

  • Html
  • Ergebnis
<html> <head> <!-- UTF-8 ist eine Kodierung für Unicode-Zeichen. Die ersten 128 Zeichen sind deckungsgleich mit ASCII. --> <meta charset="utf-8" /> <title>Testseite</title> </head> <body> <!-- Hier muss noch ein Inhalt eingefügt werden --> </body> </html>

Im obigen Beispiel wird die Syntax von Kommentaren in HTML relativ klar. Sie beginnen mit einer spitzen Klammer links, gefolgt von einem Ausrufungszeichen und zwei Spiegelstrichen <!-- und enden mit zwei Spiegelstrichen und einer spitzen Klammer rechts -->. Weiterhin wäre wichtig zu erwähnen, dass sich Kommentare über mehrere Zeilen erstrecken können.