Grundlagen: Aufbau von HTML
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
Kommentare
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.
Einen Kommentar schreiben