HTML einfach erklärt
HTML ist die Grundlage jeder Webseite. Es beschreibt nicht, wie etwas aussieht, sondern was es ist. Eine Überschrift ist eine Überschrift, ein Absatz ist ein Absatz und ein Link bleibt ein Link. Genau diese klare Trennung macht HTML so robust.
Wenn du HTML lernst, lernst du kein Programmieren im klassischen Sinn. Du lernst Struktur. Und Struktur entscheidet darüber, ob eine Seite verständlich ist oder chaotisch wirkt. Viele Probleme im Web entstehen nicht durch falsche Farben sondern durch schlechte Struktur.
HTML ist das Skelett deiner Webseite. Alles andere baut darauf auf.
Der Aufbau einer HTML-Datei
Eine HTML-Datei besteht immer aus denselben Grundbestandteilen. Du musst sie nicht auswendig können, aber du solltest wissen, wofür sie da sind.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine Seite</title>
</head>
<body>
<h1>Hallo Welt</h1>
<p>Das ist ein Absatz.</p>
</body>
</html>
Alles, was Besucher sehen, steht im <body>. Der <head> enthält Infos über die Seite selbst: Titel, Meta-Angaben und Verknüpfungen zu CSS-Dateien.
HTML-Tags öffnen und schließen
Die meisten HTML-Elemente funktionieren paarweise. Erst wird ein Tag geöffnet, dann kommt der Inhalt, danach wird er wieder geschlossen.
<p>Das ist ein Absatz</p>
Wenn ein schließender Tag fehlt, versucht der Browser zu raten. Manchmal klappt das, manchmal wird der ganze Rest der Seite plötzlich fett oder verlinkt. Darum: sauber schließen, dann ist Ruhe.
Überschriften: h1 bis h6
Überschriften geben deiner Seite Struktur. Es gibt sechs Ebenen. In der Praxis reichen meist drei.
<h1>Seitentitel</h1> <h2>Abschnitt</h2> <h3>Unterpunkt</h3>
Eine Seite sollte in der Regel nur eine <h1> haben. Danach folgen logisch gegliederte Abschnitte. Überschriften sind keine Deko, sie sind Orientierung.
Text formatieren: <b>, <strong> und <u>
Mit <b> wird Text optisch fett dargestellt. Mit <strong> wird Inhalt inhaltlich hervorgehoben. Sieht oft gleich aus, meint aber was anderes.
<p>Das ist <b>fett</b>.</p> <p>Das ist <strong>wichtig</strong>.</p>
Unterstreichen funktioniert mit <u>, sollte aber sparsam genutzt werden, da unterstrichener Text schnell wie ein Link aussieht.
<p>Ein <u>unterstrichenes</u> Wort</p>
Farben in HTML
Farben werden heute meist über CSS gesteuert. Trotzdem ist es hilfreich zu wissen, wie Farben grundsätzlich angegeben werden. Am häufigsten nutzt man Hex-Werte.
<span style="color:#ff0000;">Roter Text</span>
Kleine Farbtabelle
Hier sind 20 Basics, die man ständig braucht. Du kannst die Werte einfach kopieren und testen.
| Farbe | Hex | Vorschau | Wofür gut |
|---|---|---|---|
| Schwarz | #000000 | █ | Text |
| Weiß | #FFFFFF | █ | Flächen |
| Grau hell | #D9D9D9 | █ | Boxen |
| Grau | #808080 | █ | Rahmen |
| Silber | #C0C0C0 | █ | Leisten |
| Rot | #FF0000 | █ | Warnung |
| Dunkelrot | #990000 | █ | Akzent |
| Grün | #00AA00 | █ | OK |
| Dunkelgrün | #006600 | █ | ruhig |
| Blau | #0000EE | █ | Link |
| Dunkelblau | #000080 | █ | seriös |
| Türkis | #00AAAA | █ | Highlight |
| Cyan | #00FFFF | █ | knallig |
| Gelb | #FFFF00 | █ | Achtung |
| Orange | #FF9900 | █ | CTA |
| Beige | #F1E9B6 | █ | Hintergrund |
| Braun | #AA5500 | █ | erdig |
| Violett | #990099 | █ | Kontrast |
| Magenta | #FF00FF | █ | sehr laut |
| Gold | #FACC15 | █ | Markierung |
Mini-FAQ
Zum Schluss noch ein paar Fragen, die ständig auftauchen. Kurz und knackig, damit du direkt weiter machen kannst.
Was ist HTML?
HTML ist Struktur: Überschriften, Absätze, Links, Bilder. Der Browser baut daraus die Seite.
Warum ist sauberes Schließen so wichtig?
Weil sonst der Browser “weiterdenkt” und Elemente länger wirken als geplant. Dann wird’s schnell wirr.
Nutze ich eher <b> oder <strong>?
<b> ist optisch fett. <strong> ist inhaltlich wichtig. Für sauberen Inhalt eher <strong>.
Wie setze ich eine Textfarbe?
Einfach per Inline-Style: style="color:#ff0000;". Später besser über CSS.