HTML ist die Struktursprache des Webs – mit ihr sagst du dem Browser, wo Überschriften, Absätze und Bilder stehen. Die gute Nachricht: Die Grundprinzipien sind überschaubar und lassen sich in unter 30 Minuten lernen. Es ist deshalb der perfekte Einstiegspunkt, wenn du deine Karriere als Web Developer starten willst.
Was ist HTML und wozu brauchst du es?
HTML ist die Sprache des Webs. Nicht im Sinne von Logik oder Berechnungen, sondern im Sinne von Struktur. Du sagst dem Browser: Hier ist eine Überschrift. Hier ist ein Absatz. Hier ist ein Bild.
Das klingt simpel, und das ist es auch. Ein Element besteht aus einem öffnenden Tag (<p>) und einem schließenden Tag (</p>). Was dazwischen steht, wird angezeigt.
HTML lässt sich in kurzer Zeit lernen, weil die Grundprinzipien überschaubar sind. Es ist deshalb der logische erste Schritt, wenn du in die Webentwicklung einsteigen willst.
Den Code Editor einrichten: VS Code für Einsteiger
Bevor du loslegst, brauchst du einen Code Editor. Die Empfehlung für Einsteiger: Visual Studio Code, kurz VS Code. Kostenlos, weit verbreitet und mit einer Autovervollständigung, die dir eine Menge Tipparbeit spart.
Nach der Installation erstellst du einen Ordner auf deinem Desktop, zum Beispiel “html-test”, öffnest ihn in VS Code und legst eine neue Datei mit der Endung .html an. Die Dateiendung ist wichtig, damit der Browser weiß, womit er es zu tun hat.
Ein kleiner Trick: Wenn du in VS Code ein Ausrufezeichen tippst und dann Tab drückst, bekommst du sofort die komplette HTML-Grundstruktur eingefügt.
Die wichtigsten HTML-Elemente
Das sind die Elemente, mit denen du als Einsteiger die meiste Zeit verbringen wirst:
Texte und Überschriften
<p>für normale Absätze<h1>bis<h6>für Überschriften. H1 ist die Hauptüberschrift, nur einmal pro Seite. H2 strukturiert Abschnitte, H3 Unterabschnitte. H5 und H6 brauchst du in der Praxis kaum.<strong>macht Text fett,<em>macht ihn kursiv.
Trennungen und Abstände
<hr>fügt eine horizontale Linie ein.<br>erzeugt einen Zeilenumbruch.
Diese beiden sind selbstschließende Elemente. Sie brauchen kein schließendes Tag, weil sie keinen Inhalt umschließen.
Listen
<ul>für eine ungeordnete Liste mit Bullet Points<ol>für eine nummerierte Liste<li>für jeden Listeneintrag, immer innerhalb von<ul>oder<ol>
Links