Und damit sind wir schon mitten drin im HTML-Seiten erstellen.
HTML besteht aus sogenannten Tags, die in der Regel eine Textpassage umklammern und dieser eine Bedeutung (Semantik) geben. Tags bestehen aus einem öffnenden und einem schließenden Tagteil.
z.B. <h1>Dies ist eine Überschrift</h1>
Der Tag besteht aus einem Kleiner- und Größerzeichen (man spricht bei HTML von spitzen Klammern) und einem Bezeichner (z.B. h1). Der schließende Tag startet zusätzlich mit einem Schrägstrich / Slash (/) und beendet den markierten Textabschnitt.
Der H1-Tag macht also aus einem beliebigen Text eine Überschrift 1. Grades (=Hautpüberschrift)
Die wichtigsten Tags
| HTML-Tag | Bedeutung |
| <html>…</html> | Das html-Element , auch root(-Element) oder Wurzelelement enthält den vollständigen Inhalt einer Internetseite. |
| <head>…<head> | Das head-Element (deutsch: Kopf) ist das erste Kindelement des html-Elements und enthält im Wesentlichen Meta-Informationen über das im HTML-Körper (body) folgende Dokument. |
| <body>…</body> | Das body-Element enthält den darzustellenden Inhalt eines HTML-Dokuments. |
| <h1>…</h1> | Das h1-Element stellt eine Überschrift (engl. heading) 1. Ordnung dar. <h1> bis <h6> |
| <p>…</p> | Das p-Element definiert einen Textabsatz (engl. paragraph). Absätze dienen der Gliederung eines Textes. |
| <a href=“https://selfhtml.org“>Das ist ein Link</a> | Das a-Element stellt einen Verweis, (Hyper-)Link auf eine (andere) Web-Adresse dar. |
| <b>…</b> oder <strong>…</strong> | Das b-Element zeichnet einen Teil eines Fließtextes aus, der sich vom übrigen Text abheben soll, keine besondere Bedeutung hat und üblicherweise in Fettschrift dargestellt wird. |
Auf selfhtml findest du eine komplette Referenz aller HTML-Tags
Einseitige Tags
Neben den typischen Tags mit öffnenden und schließenden Teil gibt es einige einseitige Tags, da sie keinen Text umschließen, sondern andere Dinge wie Bilder einfügen.
| HTML-Tag | Bedeutung |
| <img src=„./bilder/affevorhaus.jpg“ alt=“Auf dem Bild ist ein Affe vor einem Haus zu sehen“> | Das img-Element ermöglicht es, Bilddateien in einem Dokument einzubinden und darzustellen |
| <hr> | Das hr-Element kennzeichnet einen thematischen Bruch (paragraph-level thematic break). Ursprünglich wurden solche Trenner als waagerechte Linien dargestellt, daher die Bezeichnung des Elements horizontal ruler, horizontales Lineal. |
| <br> | Das br-Element erzeugt einen Zeilenumbruch (engl. line break). |
Aufzählungslisten (die Grundlage für eure Navigation)
Es gibt zwei Arten von Aufzählungslisten, sortierte und unsortierte.