In diesem Beitrag wirst du lernen, was HTML Elemente sind. Da wir bereits im letzten Blogartikel unsere erste HTML-Datei erzeugt haben, ist es nun an der Zeit, die HTML-Syntax kennenzulernen und zu verstehen. Wenn du also lernen möchtest, wie du die Inhalte auf deiner Website durch HTML Elemente anpassen und strukturieren kannst, bist du hier genau richtig.
Sie sehen gerade einen Platzhalterinhalt von Youtube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenInhaltsverzeichnis
1. Was ist die HTML-Syntax?
Wenn man von einer Syntax spricht, sind damit formale Regeln gemeint, die festlegen, wie eine HTML-Datei auszusehen hat. Nur so lässt sich sicherstellen, dass es sich auch um valides HTML handelt.
2. Was sind HTML Elemente?
Bei HTML gibt es grundlegend die sogenannten HTML Elemente. Mithilfe dieser können wir Inhalte nach Belieben anpassen und strukturieren.
Damit du direkt eine grobe Vorstellung davon bekommst, was ein HTML-Element ist, zeige ich dir ein kleines Praxisbeispiel. Wir werden nun in unserer aktuellen Datei mithilfe von HTML die beiden Wörter „Willkommen in“ unterstreichen. Das lässt sich mithilfe des sogenannten u-Elements umsetzen.
3. Das u-Element
Hierzu schreiben wir vor die beiden Wörter <u> und dahinter ein weiteres Mal das Gleiche mit dem Unterschied, dass wir vor dem zweiten u ein Slash-Zeichen einfügen:
<u>Willkommen in</u>
Das mag im ersten Moment zwar etwas komisch aussehen, aber es handelt sich dennoch um ein valides HTML-Element. Wenn wir diese Datei noch mal im Browser öffnen, sehen wir, dass die beiden ersten Wörter tatsächlich unterstrichen sind:
Dieses u-Element ist nur ein Beispiel von vielen. Denn es gibt zahlreiche HTML Elemente, mit welchen man so gut wie alles Vorstellbare umsetzen kann. Die wichtigsten Vertreter wirst du auch noch hier in dieser Tutorialreihe kennenlernen.
Zuvor sehen wir uns aber erst mal den allgemeinen Aufbau eines HTML-Elements genauer an.
4. Der Aufbau eines HTML-Elements
Ein HTML-Element ist im Grunde folgendermaßen aufgebaut:
<element_name>Inhalt</element_name>
Ein HTML-Element gliedert sich grob gesagt in drei Bereiche:
- das öffnende Tag
- den Inhalt des Elements
- das schließende Tag
Erläuterung:
Das öffnende Tag markiert immer den Start eines Elements.
Beim Inhalt befindet sich der Teil des Textes, auf den das HTML-Element angewendet werden soll.
Das schließende Tag beendet das HTML-Element.
Beim oben stehenden Beispiel stellt das <u> also das öffnende Tag dar. Bei den Wörtern „Willkommen in“ handelt es sich um den Inhalt und das </u> ist das schließende Tag.
Das gesamte Konstrukt ist also ein HTML-Element.
Wir können das noch weiter aufgliedern und uns ansehen, wie ein öffnendes Tag im Detail aufgebaut ist. Zunächst kommt ein Kleiner-Zeichen, anschließend folgt der Element-Name und das Größer-Zeichen. Diese Bestandteile ergeben das öffnende Tag.
Danach folgt der Inhalt. Das schließende Tag setzt sich dann fast genau wie das öffnende Tag zusammen. Man leitet es durch das Kleiner-Zeichen ein und dann kommt auch schon der einzige Unterschied zum öffnenden Tag: das Slash-Zeichen. Nun gibt man den Element-Namen an und abschließend das Größer-Zeichen.
Der Unterschied zwischen öffnendem und schließendem Tag ist also lediglich das Slash-Zeichen vor dem Element-Namen. Dass es diesen Unterschied gibt, ist auch ganz praktisch, da man sonst das Öffnende vom schließenden Tag nicht unterscheiden könnte.
Merke dir also:
Ein HTML-Element besitzt fast immer ein öffnendes und ein schließendes Tag. Die Betonung liegt auf „fast“, da es einige wenige Ausnahmen gibt, die wir im nächsten Beitrag noch kennenlernen werden.
So sind also HTML Elemente aufgebaut.
Du hast bereits das u-Element kennengelernt, welches dessen Inhalt unterstrichen darstellt. Logischerweise existieren aber noch zahlreiche weitere HTML Elemente, wie etwa das b-Element.
5. Das b-Element
Das b-Element stellt einen Inhalt fett gedruckt dar. Wenn wir das Wort „HTML“ in unserem aktuellen Beispiel fett gedruckt sehen möchten, bauen wir um dieses Wort das b-Element:
<b>HTML</b>
Auch hier sehen wir wieder den typischen Aufbau eines HTML-Elements.
Zu Beginn haben wir das öffnende Tag. Der Element-Name lautet diesmal „b“ und der Inhalt folgt direkt danach. In diesem Fall stellt das Wort „HTML“ den Inhalt dar, welches wir fett gedruckt anzeigen lassen möchten. Zum Schluss setzen wir das schließende Tag, das wir am Slash-Zeichen erkennen.
Wenn wir das nun so speichern und in den Browser wechseln, siehst du erst mal, dass „HTML“ noch nicht fett gedruckt ist.
Das liegt daran, dass wir das Browser-Fenster noch nicht aktualisiert haben.
Denn immer, wenn wir in einer Datei eine Änderung vorgenommen haben, müssen wir das Browser-Fenster aktualisieren, damit auch dieses die Änderung übernehmen kann.
Wir können das Ganze nun also noch einmal im Browser laden und sehen, dass dieser den Inhalt diesmal fett gedruckt anzeigt:
Darüber hinaus ist es möglich, mehrere HTML Elemente ineinander zu verschachteln.
6. HTML Elemente ineinander verschachteln
Bisher hast du in diesem Beitrag die HTML Elemente b und u kennengelernt, welche uns ermöglichen, Text fett zu drucken und diesen zu unterstreichen.
Man kann auf einen bestimmten Inhalt auch beide Tags gleichzeitig anwenden. Das funktioniert, indem man sie ineinander verschachtelt.
Wenn man also möchte, dass der Text „Willkommen in“ nicht nur unterstrichen, sondern zusätzlich fett gedruckt ist, dann ergänzt man folgendermaßen das b-Tag:
<u><b>Willkommen in</b></u>
Wichtig ist hierbei, dass man auf die korrekte Reihenfolge achtet.
Das Tag, das wir zuletzt geöffnet haben, schließen wir wieder zuerst.
Da das b-Tag zuletzt geöffnet wurde, wird es auch zuerst wieder geschlossen.
Wenn wir das Ganze nun speichern und neu laden, sehen wir, dass es tatsächlich funktioniert:
Die ersten beiden Wörter sind jetzt sowohl unterstrichen als auch fett gedruckt.
Mit den HTML-Elementen hast du auch schon den wichtigsten Grundbaustein von HTML kennengelernt. Durch die heute gesammelten Kenntnisse bist du an dieser Stelle also ideal auf die kommende Lektion vorbereitet.