Grundlagen: Aufbau von HTML

05
Sep
2016

"Die Hypertext Markup Language (engl. für Hypertext-Auszeichnungssprache), abgekürzt HTML, ist eine textbasierte Auszeichnungssprache zur Strukturierung digitaler Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten." (Wikipedia)

Anhand einiger Beispiele möchte ich dem Leser kurz den Aufbau von HTML näherbringen.

HTML-Tag-Begrenzer

<>

HTML-Tags beginnen immer mit einem "Kleiner als"-Zeichen und enden immer mit einem "Größer als"-Zeichen. Alles was zwischen diesen beiden Zeichen steht wird als HTML interpretiert. Alles was außerhalb dieser Zeichen steht ist normaler Text:

<body>normaler Text

Innerhalb der beiden Sonderzeichen < und > kommt als erstes der Name des HTML-Tags, im Beispiel heißt der HTML-Tag body. Groß- und Kleinschreibung ist dabei egal.

HTML-Tags mit und ohne schließenden Tag

Es gibt zwei Arten von HTML-Tags, einen öffnenden und einen schließenden HTML-Tag. Ist ein HTML-Tag ein Container für weitere HTML-Tags gibt es immer auch noch einen schließenden Tag. Doch hier erst einmal ein Beispiel für einen einfachen HTML-Tag:

<img>

Und hier ein HTML-Tag, der noch weitere Inhalte aufnehmen kann und deshalb auch einen schließenden HTML-Tag benötigt:

<div>Weitere Inhalte</div>

Ein schließender HTML-Tag beginnt dabei immer mit </ und dem Namen des öffnenden HTML-Tags.

Attribute in HTML-Tags

Die meisten HTML-Tags können zusätzlich Attribute bzw. Parameter erhalten:

<body Attributname=Attributwert>

Der Attributwert sollte möglichst in doppelte Hochkommata ("Attributwert") eingeschlossen werden, damit es zu keinen Parserfehlern kommt, wie in diesem Beispiel:

<body Attributname=Ich bin der Attributwert>

Da HTML-Tagname und Attribute immer mit Leerzeichen voneinander getrennt werden, würde der Browser den vorstehenden HTML-Tag wie folgt interpretieren:

  • 1. Attribut Name: Attributname / Wert: Ich
  • 2. Attribut Name: bin / ohne Wert
  • 3. Attribut Name: der / ohne Wert
  • 4. Attribut Name: Attributwert / ohne Wert

Um also die im Attributwert (Ich bin der Attributwert) enthaltenen Leerzeichen zu schützen, muß der Attributwert in Hochkommata eingeschlossen werden: "Ich bin der Attributwert" oder auch 'Ich bin der Attributwert'!

So wäre es richtig:

<body Attributname="Ich bin der Attributwert">
<body Attributname = "Ich bin der Attributwert">

Im Beispiel ist noch eine zweite korrekte Variante angeführt. Beim Zuweisungsoperator = sind davor und danach Leerzeichen erlaubt.

Block-Tags und Inline-Tags

HTML-Tags vom Typ Block erzeugen im Textfluß immer einen Zeilenumbruch. Block-Tags sind z.B. div oder p.

HTML-Tags vom Typ Inline erzeugen im Textfluß keinen Zeilenumbruch. Inline-Tags sind z.B. a, span oder img.

Welche HTML-Tags gibt es?

Als ich anfing mich mit HTML zu beschäftigen (etwa 1996) wußte ich rein gar nichts darüber. Im Laufe dieser zwei Jahrzehnte habe ich viel Wissen angelesen und die Syntax und die meisten HTML-Tags sind fest in meinem Gehirn verankert. Für den Rest nutze ich Google, z.B. bei der Frage wie man eine numerisch sortierte Liste in HTML erstellt. Meine Suchbegriffe würden lauten: "html numerisch sortierte liste".

Es gibt unzählige Seiten, die sich mit den Arten von HTML-Tags beschäftigen, z.B. diese hier.

Und warum bestehen manche HTML-Tags nur aus einem Buchstaben?

HTML-Tags wie p (paragraph = Absatz) oder a (anchor = Anker = Link) sind wahrscheinlich so kurz, weil sie so häufig verwendet werden. Als HTML erfunden wurde, war Speicherplatz noch rar (Grund 1) und so ein kurzer HTML-Tag ist auch schneller eingegeben (Grund 2).

Frank Hoppe

Datum: | Autor: Frank Hoppe

Zurück

Einen Kommentar schreiben

Kommentar von Julian |

Guter Einstieg in HTML, klasse Sache.

Ich persönlich finde auch noch diese Seite interessant https://validator.w3.org/ dort kann man das HTML, welches man geschrieben hat auf Fehler überprüfen.

Alle Rechte vorbehalten © 2011 - 2017 - Frank Hoppe
Das Layout basiert auf dem Baltimore-Theme von John Schop
Administration