Weißt du, wie viele Websites und Webseiten es auf der Welt gibt? Exakt wird das niemand sagen können, nicht einmal Google. Schätzungen zufolge existieren rund 1,1 bis 1,2 Milliarden Websites im Internet. Nimmt man einzelne Webseiten, also alle einzelnen Seiten einer Website, dann dürften wir im Bereich von mehreren zehn bis hunderten Milliarden Seiten liegen. Hundert Milliarden in Ziffern geschrieben lautet: 100.000.000.000. Eine verblüffende Zahl. 😯 Auch wenn mehrere hundert Millionen dieser Seiten nicht aktiv sind, mit diesem kleinen Zahlenspiel steigen wir heute in das erste HTML-Tutorial bei Webnumerus ein. Mit dem heutigen Tutorial kannst du deine eigene Website erstellen, ins Internet publizieren und damit Teil eines großen Ganzen werden. Steigen wir in die Grundlagen von HTML ein.
Was ist HTML?
HTML (HyperText Markup Language) ist die grundlegende Auszeichnungssprache des World Wide Web und bildet das Fundament nahezu jeder Website. Mit HTML werden Inhalte wie Überschriften, Texte, Bilder, Links, Tabellen oder Formulare strukturiert und für den Browser verständlich gemacht.
Als Werkzeug für die Webentwicklung ermöglicht HTML die Erstellung des Grundgerüsts einer Website. Es arbeitet dabei eng mit CSS und JavaScript zusammen. Während HTML die Inhalte und deren Struktur definiert, sorgt CSS für das Design und die Gestaltung.
Was brauche ich, um mit HTML zu beginnen?
Damit du eine HTML-Datei bearbeiten kannst, benötigst du einen einfachen Code-Editor, da HTML-Dateien reine Textdateien sind. Ein solcher Editor ist standardmäßig auf deinem Rechner vorinstalliert. Unter GNU/Linux (Ubuntu) heißt er Texteditor, unter macOS kannst du TextEdit verwenden und unter Windows nimmst du Notepad. Später kannst du zu einem anspruchsvolleren Quelltext-Editor wie den Visual Studio Code wechseln. Diesen nutze ich für meine Projekte.
Weiter benötigst du einen Webbrowser. Ich nutze den Browser Vivaldi, du kannst genauso mit Google Chrome, Mozilla Firefox, Safari oder einem beliebigen Browser deiner Wahl arbeiten.
Planung der Website: Rechtsanwaltskanzlei Peter Maier
Bevor wir mit der Erstellung beginnen, machen wir uns Gedanken darüber, welche Art von Website und für wen wir diese erstellen wollen. Wir planen die Website für den fiktiven Rechtsanwalt Peter Maier aus Limberlachen. Es soll eine schlichte, moderne, mehrseitige responsive Website sein, die mit HTML und CSS erstellt wurde.
Der fiktive Rechtsanwalt Peter Maier arbeitet seit vielen Jahren als Fachanwalt für Arbeitsrecht in seiner Heimatstadt Limberlachen. Nach langer Zeit hat er sich dazu entschlossen, seiner Kanzlei einen Webauftritt zu verpassen, nachdem er gesehen hatte, dass ein Rechtsanwaltskollege in der Stadt eine schicke und moderne Website hat, über die sich künftige Mandantinnen und Mandanten informieren können.
Konzepterstellung
Normalerweise entsteht eine Website nicht direkt im Code-Editor, sondern beginnt mit einer Konzeptionsphase. Zuerst wird überlegt, welche Zielgruppe angesprochen werden soll, welche Inhalte benötigt werden und welchen Zweck die Website erfüllen soll. Anschließend kann ein Moodboard erstellt werden, in dem Farben, Schriften, Bildstile und gestalterische Eindrücke gesammelt werden. Dadurch entsteht ein erstes Gefühl für die visuelle Richtung des Projekts.
Im nächsten Schritt folgt häufig ein Wireframe. Dabei handelt es sich um eine einfache schematische Skizze der Website, noch ohne ausgearbeitetes Design. Es geht vor allem darum, die Anordnung der Elemente zu planen: Wo steht das Logo? Wo befindet sich die Navigation? Wie sind Hero-Bereich, Inhalte, Call-to-Action und Footer aufgebaut? Danach kann aus dem Wireframe ein Screendesign entstehen, also ein konkreter visueller Entwurf der Website.
Diesen klassischen Weg vom Moodboard über Wireframe bis zum Screendesign habe ich in meiner Weiterbildung zum Webdesigner gelernt. In der Praxis gehe ich jedoch oft etwas direkter vor. Meistens erstelle ich nur eine kurze Skizze, um die grobe Struktur der Website festzuhalten, oder ich verwende bereits vorhandene HTML-Vorlagen als Grundlage. Diese passe ich anschließend nach Belieben an.
So sieht die fertige Website für unser Tutorial aus. Das ist das Ziel, da wollen wir hin.
Grundinformationen: Text und Struktur
Herr Maier hat sich überlegt, was auf seiner Website stehen sollte und welche Informationen er künftigen Mandantinnen und Mandanten bereitstellen will. Nachfolgend ist sein Text, wie mit der Schreibmaschine erstellt.
Peter Maier | Arbeitsrecht & Mietrecht
Probleme mit dem Arbeitgeber?
Wir unterstützen Sie verständlich, zuverlässig und zielorientiert bei arbeitsrechtlichen und mietrechtlichen Fragen.
Unsere Rechtsgebiete
Klare Beratung, strukturierte Vorgehensweise und persönliche Betreuung in wichtigen rechtlichen Lebenssituationen.
Arbeitsrecht
Kündigung, Abmahnung, Aufhebungsvertrag oder offene Lohnansprüche: Wir prüfen Ihre Situation und zeigen Ihnen die nächsten sinnvollen Schritte.
Mietrecht
Ob Mieterhöhung, Kündigung, Kaution oder Mängel in der Wohnung: Wir beraten Sie verständlich und vertreten Ihre Interessen konsequent.
Kontaktieren Sie uns jetzt!
Das sind wir
Moderne Kanzlei, klare Kommunikation
Unsere Arbeitsweise verbindet persönliche Rechtsberatung mit einfachen digitalen Abläufen. So behalten Sie jederzeit den Überblick.
Schnelle Ersteinschätzung
Wir erfassen Ihr Anliegen strukturiert und erklären Ihnen verständlich, welche Möglichkeiten bestehen.
Transparente Schritte
Sie erfahren, welche Unterlagen benötigt werden, welche Fristen wichtig sind und wie der weitere Ablauf aussieht.
Persönliche Betreuung
Sie haben einen festen Ansprechpartner und erhalten klare Rückmeldungen.
Sie brauchen rechtliche Unterstützung?
Schildern Sie uns Ihr Anliegen. Wir melden uns zeitnah zurück und besprechen gemeinsam die nächsten Schritte.Das ist schonmal viel Text und Herr Maier hat sich ordentlich Gedanken zu seiner Website gemacht und diese Gedanken in den ersten Textentwurf einfließen lassen. Er stellt sich selbst vor, seine Tätigkeit sowie seine Kanzlei und die einzelnen Tätigkeitsgebiete. Er hat mit „Kontaktieren Sie uns jetzt“ sogar eine Handlungsaufforderung (Call-to-Action, CTA). Noch fehlt ein klares Alleinstellungsmerkmal (unique selling proposition, USP), aber das können wir im Laufe des Projekts jederzeit ändern. Fürs Erste lassen wir den Text so stehen und speichern diesen ab.
📍 Aufgabe
Kopiere den Text des Rechtsanwalts Maier, fügen diesen in einen Editor deiner Wahl ein und speichere diesen auf deinem Rechner als index.txt ab. Da wir im Laufe dieses Tutorials mehrere Dateien erstellen werden, lege dir am besten einen Ordner auf dem Rechner an. Diesen kannst du z. B. Webprojekt nennen.
Schließe den Editor und öffne diesen anschließend im Browser. Jetzt wirst du feststellen, dass der Browser den Text in der Datei genauso dargestellt hat, wie du diesen eingefügt hast. Die Zeilenumbrüche und Leerstellen wurden beibehalten. Das liegt daran, dass die Datei nicht als HTML gespeichert wurde.
Benenne jetzt die .txt-Datei in .html um, also index.html und öffne diese erneut im Browser. Jetzt kannst du sehen, dass die Zeilenumbrüche nicht berücksichtigt wurden und der Text ein einziger Block ist. Die Erklärung dafür ist ganz einfach, der Browser weiß gar nicht, was eine Überschrift und ein Absatz ist. Dies müssen wir dem Browser durch HTML-Tags erst mitteilen.
Tags sind Bestandteile eines HTML-Elements. Ein Element besteht aus einem öffnenden Tag wie <p>, dem Inhalt, z. B. Das ist ein Absatz und einem schließenden Tag, in diesem Fall </p>. Zusammen ergibt das ein HTML-Element:
<p>Da ist ein Absatz</p>Genauso deklarieren wir eine Überschrift, hier z. B. die Überschrift erster Ordnung H1.
<h1>Das ist die Überschrift erster Ordnung</h1>Wir müssen also die Inhalte mit HTML strukturieren, damit wir zu einem Ergebnis kommen. Im nächsten Schritt beginnen wir damit, in dem wir dem HTML-Dokument ein Grundgerüst geben.
HTML-Grundgerüst
Wir haben unsere Datei mit dem Text des Rechtsanwalts Maier zwar als HTML gespeichert, aber im Dokument selbst deutet nichts darauf hin, dass es sich um ein solches Dokument handelt. Wir haben also keine Basis, um weiterzuarbeiten und eine Website zu erstellen. Diese Grundlage bauen wir jetzt.
Das HTML-Grundgerüst habe ich in diesem Blogartikel ausführlich beschrieben. Für unser Tutorial und die Website der Rechtsanwaltskanzlei Peter Maier aus Limberlachen verwenden wir an dieser Stelle zunächst das minimale Grundgerüst. Dieses werden wir im Laufe des Tutorials sinnvoll ausbauen.
📍 Aufgabe
Öffne jetzt die Datei index.html mit dem Editor, kopiere den vorhandenen Inhalt (Text des Rechtsanwalts Maier) und füge diesen in die Zwischenablage oder in eine separate Datei. Wichtig ist, dass der Text erhalten und griffbereit bleibt und die index.html-Datei leer ist. In die leere Datei fügst du jetzt das minimale HTML-Grundgerüst ein:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
</head>
<body>
</body>
</html>Das Grundgerüst bauen wir noch ein wenig aus und fügen folgende Zeilen ein:
<!-- robots noindex für Crawler = keine Google-Indexierung! -->
<meta name="robots" content="noindex">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">Jetzt sieht das Grundgerüst so aus:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<!-- robots noindex für Crawler = keine Google-Indexierung! -->
<meta name="robots" content="noindex">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
</head>
<body>
</body>
</html>Was haben wir hier gemacht? Mit <meta name="robots" content="noindex"> geben wir dem Crawler der Suchmaschine die Anweisung, unsere Website nicht zu indexieren. Hier handelt es sich um ein Schulungsprojekt und diese Website soll nicht in den Suchergebnissen der Suchmaschinen gefunden werden können. Bei einer produktiven Website, angenommen, Peter Maier wäre ein richtiger Anwalt mit einer richtigen Kanzlei, sollte eine solche Anweisung auf gar keinen Fall eingesetzt werden, da sie den Zweck der Website – im Internet gefunden zu werden – komplett eliminieren würde.
Mit <link rel="icon" href="favicon.ico"> bestimmen wir ein Favicon, welches wir aber noch gar nicht erstellt haben und mit <link rel="stylesheet" href="style.css"> binden wir eine externe CSS-Datei ein, welche es ebenfalls noch nicht gibt. Wir arbeiten hier ein wenig vor.
Jetzt wollen wir dem HTML-Dokument einen Titel geben. Aus <title>Titel</title> machen wir:
<title>Peter Maier | Arbeitsrecht & Mietrecht</title>Jetzt wollen wir den gesamten Text, den wir vorhin in die Zwischenablage geschoben haben, innerhalb des Dokumentkörpers, also dem Body-Bereich, unterbringen.
Da der Text des Rechtsanwalts keinerlei Informationen zu Navigation und einem Fußbereich (Footer) enthält, habe ich diesen entsprechend ergänzt. Auf dieser Grundlage können wir weiterarbeiten.
Ich kopiere den ergänzten Text und füge diesen innerhalb von <body></body> ein.
Unser HTML-Dokument sieht jetzt wie folgt aus:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<!-- robots noindex für Crawler = keine Google-Indexierung! -->
<meta name="robots" content="noindex">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Peter Maier | Arbeitsrecht & Mietrecht</title>
</head>
<body>
Rechtsanwalt Peter Maier
Start
Rechtsgebiete
Kanzlei
Kontakt
Bestmögliche Strategie für Sie
Probleme mit dem Arbeitgeber?
Wir unterstützen Sie verständlich, zuverlässig und zielorientiert bei arbeitsrechtlichen und mietrechtlichen Fragen.
Kontakt aufnehmen
Was wir Ihnen anbieten
Unsere Rechtsgebiete
Klare Beratung, strukturierte Vorgehensweise und persönliche Betreuung in wichtigen rechtlichen Lebenssituationen.
Arbeitsrecht
Kündigung, Abmahnung, Aufhebungsvertrag oder offene Lohnansprüche: Wir prüfen Ihre Situation und zeigen Ihnen die nächsten sinnvollen Schritte.
Mietrecht
Ob Mieterhöhung, Kündigung, Kaution oder Mängel in der Wohnung: Wir beraten Sie verständlich und vertreten Ihre Interessen konsequent.
Kontaktieren Sie uns jetzt!
Das sind wir
Moderne Kanzlei, klare Kommunikation
Unsere Arbeitsweise verbindet persönliche Rechtsberatung mit einfachen digitalen Abläufen. So behalten Sie jederzeit den Überblick.
Schnelle Ersteinschätzung
Wir erfassen Ihr Anliegen strukturiert und erklären Ihnen verständlich, welche Möglichkeiten bestehen.
Transparente Schritte
Sie erfahren, welche Unterlagen benötigt werden, welche Fristen wichtig sind und wie der weitere Ablauf aussieht.
Persönliche Betreuung
Sie haben einen festen Ansprechpartner und erhalten klare Rückmeldungen.
Jetzt handeln
Sie brauchen rechtliche Unterstützung?
Schildern Sie uns Ihr Anliegen. Wir melden uns zeitnah zurück und besprechen gemeinsam die nächsten Schritte.
Kontakt
Rechtsanwalt Peter Maier
Peter Maier ist Fachanwalt für Arbeitsrecht und kann auf jahrelange Berufserfahrung zurückblicken. Zusammen mit seinem Team bietet er in der Kanzlei in Limberlachen Rechtsberatung für Arbeitsrecht und Mietrecht mit klarer Sprache und persönlicher Betreuung.
Navigation
Start
Rechtsgebiete
Kanzlei
Kontakt
Kontakt
Birkenallee 12
74030 Limberlachen
kontakt@kanzlei-limberlachen.de
© 2026 Rechtsanwaltskanzlei Peter Maier. Alle Rechte vorbehalten.
</body>
</html>Wenn du jetzt das Dokument im Browser öffnest, wirst du keinerlei optische Veränderungen gegenüber vorher sehen. Der Text wird genauso ungeordnet dargestellt. Unter der Haube haben wir aber einiges getan. Wir haben das bis dato reine und undeklarierte Textdokument zu einem richtigen HTML-Dokument deklariert und diesem ein Grundgerüst verpasst. Einen ersten Schritt haben wir somit hinter uns.
HTML-Struktur
Wir machen weiter mit der Strukturierung unseres HTML-Dokuments und der Aufteilung in Bereiche. Es gibt keine verbindliche Regel, was im Webdesign zuerst gemacht wird. Manche Webdesigner zeichnen zuerst die Überschriften und Verlinkungen aus und kümmern sich dann um die Struktur und Bereiche.
In der Webentwicklung hat sich die Vorgehensweise bewährt, dass zuerst die Struktur geplant wird, dann die semantischen Bereiche erstellt werden, anschließend der Inhalt eingefügt wird und zum Schluss das Design und der Feinschliff mit CSS gestaltet wird. So gehen wir auch vor, auch wenn wir bereits mit dem Inhalt begonnen und diesen eingefügt haben.
Der Aufbau unserer Website wird aus drei großen Bereichen oder Container-Elementen bestehen:
- Kopfbereich:
<header> - Hauptbereich:
<main> - Fußbereich:
<footer>
Innerhalb dieser Bereiche wird es weitere Unterbereiche wie <section>, <div> und <article> geben, wir legen aber zuerst die Hauptbereiche fest. Im Editor gehen wir wie folgt vor:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<!-- robots noindex für Crawler = keine Google-Indexierung! -->
<meta name="robots" content="noindex">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Peter Maier | Arbeitsrecht & Mietrecht</title>
</head>
<body>
<header>
Rechtsanwalt Peter Maier
Start
Rechtsgebiete
Kanzlei
Kontakt
Bestmögliche Strategie für Sie
Probleme mit dem Arbeitgeber?
Wir unterstützen Sie verständlich, zuverlässig und zielorientiert bei arbeitsrechtlichen und mietrechtlichen
Fragen.
Kontakt aufnehmen
</header>
<main>
Was wir Ihnen anbieten
Unsere Rechtsgebiete
Klare Beratung, strukturierte Vorgehensweise und persönliche Betreuung in wichtigen rechtlichen
Lebenssituationen.
Arbeitsrecht
Kündigung, Abmahnung, Aufhebungsvertrag oder offene Lohnansprüche: Wir prüfen Ihre Situation und zeigen Ihnen
die
nächsten sinnvollen Schritte.
Mietrecht
Ob Mieterhöhung, Kündigung, Kaution oder Mängel in der Wohnung: Wir beraten Sie verständlich und vertreten Ihre
Interessen konsequent.
Kontaktieren Sie uns jetzt!
Das sind wir
Moderne Kanzlei, klare Kommunikation
Unsere Arbeitsweise verbindet persönliche Rechtsberatung mit einfachen digitalen Abläufen. So behalten Sie
jederzeit den Überblick.
Schnelle Ersteinschätzung
Wir erfassen Ihr Anliegen strukturiert und erklären Ihnen verständlich, welche Möglichkeiten bestehen.
Transparente Schritte
Sie erfahren, welche Unterlagen benötigt werden, welche Fristen wichtig sind und wie der weitere Ablauf
aussieht.
Persönliche Betreuung
Sie haben einen festen Ansprechpartner und erhalten klare Rückmeldungen.
Jetzt handeln
Sie brauchen rechtliche Unterstützung?
Schildern Sie uns Ihr Anliegen. Wir melden uns zeitnah zurück und besprechen gemeinsam die nächsten Schritte.
Kontakt
</main>
<footer>
Rechtsanwalt Peter Maier
Peter Maier ist Fachanwalt für Arbeitsrecht und kann auf jahrelange Berufserfahrung zurückblicken. Zusammen mit
seinem
Team bietet er in der Kanzlei in Limberlachen Rechtsberatung für Arbeitsrecht und Mietrecht mit klarer Sprache
und
persönlicher Betreuung.
Navigation
Start
Rechtsgebiete
Kanzlei
Kontakt
Kontakt
Birkenallee 12
74030 Limberlachen
kontakt@kanzlei-limberlachen.de
© 2026 Rechtsanwaltskanzlei Peter Maier. Alle Rechte vorbehalten.
</footer>
</body>
</html>Die Darstellung im Browser hat sich nur minimal geändert. Wir müssen also weiter unterteilen. Der Header enthält drei Bereiche, <nav> für die Navigation und eine <section>, die wiederum zwei <div> enthält (div steht für Division, englisch für „Bereich“, „Abschnitt“ oder „Unterteilung“).
Der Main-Bereich enthält drei <section> Bereiche, die wiederum jeweils <div> Bereiche enthalten, innerhalb derer sich <article> Bereiche befinden. Es mag vielleicht etwas verwirrend sein, aber der Blick auf den Code im Editor dürfte für Klarheit sorgen.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<!-- robots noindex für Crawler = keine Google-Indexierung! -->
<meta name="robots" content="noindex">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Peter Maier | Arbeitsrecht & Mietrecht</title>
</head>
<body>
<header>
<nav>
Rechtsanwalt Peter Maier
Start
Rechtsgebiete
Kanzlei
Kontakt
</nav>
<section>
<div>
Bestmögliche Strategie für Sie
Probleme mit dem Arbeitgeber?
Wir unterstützen Sie verständlich, zuverlässig und zielorientiert bei arbeitsrechtlichen und
mietrechtlichen Fragen.
Kontakt aufnehmen
</div>
<div>
</div>
</section>
</header>
<main>
<section>
Was wir Ihnen anbieten
Unsere Rechtsgebiete
Klare Beratung, strukturierte Vorgehensweise und persönliche Betreuung in wichtigen rechtlichen
Lebenssituationen.
<div>
<article>
Arbeitsrecht
Kündigung, Abmahnung, Aufhebungsvertrag oder offene Lohnansprüche: Wir prüfen Ihre Situation und
zeigen Ihnen die nächsten sinnvollen Schritte.
</article>
<article>
Mietrecht
Ob Mieterhöhung, Kündigung, Kaution oder Mängel in der Wohnung: Wir beraten Sie verständlich und
vertreten Ihre Interessen konsequent.
</article>
</div>
<a>Kontaktieren Sie uns jetzt!</a>
</section>
<section>
<div>
Das sind wir
Moderne Kanzlei, klare Kommunikation
Unsere Arbeitsweise verbindet persönliche Rechtsberatung mit einfachen digitalen Abläufen. So behalten
Sie jederzeit den Überblick.
<div>
<article>
Schnelle Ersteinschätzung
Wir erfassen Ihr Anliegen strukturiert und erklären Ihnen verständlich, welche Möglichkeiten
bestehen.
</article>
<article>
Transparente Schritte
Sie erfahren, welche Unterlagen benötigt werden, welche Fristen wichtig sind und wie der weitere
Ablauf aussieht.
</article>
<article>
Persönliche Betreuung
Sie haben einen festen Ansprechpartner und erhalten klare Rückmeldungen.
</article>
</div>
</div>
</section>
<section>
<div>
Jetzt handeln
Sie brauchen rechtliche Unterstützung?
Schildern Sie uns Ihr Anliegen. Wir melden uns zeitnah zurück und besprechen gemeinsam die nächsten
Schritte.
</div>
<a>Kontakt</a>
</section>
</main>
<footer>
<div>
<div>
Rechtsanwalt Peter Maier
Peter Maier ist Fachanwalt für Arbeitsrecht und kann auf jahrelange Berufserfahrung zurückblicken.
Zusammen mit seinem Team bietet er in der Kanzlei in Limberlachen Rechtsberatung für Arbeitsrecht und
Mietrecht mit klarer
Sprache und persönlicher Betreuung.
</div>
<div>
Navigation
Start
Rechtsgebiete
Kanzlei
</div>
<div>
Kontakt
Birkenallee 12
74030 Limberlachen
kontakt@kanzlei-limberlachen.de
</div>
</div>
<p>© 2026 Rechtsanwaltskanzlei Peter Maier. Alle Rechte vorbehalten.</p>
</footer>
</body>
</html>Wir haben das Dokument in Bereiche unterteilt und wie beim Bau eines Hauses für eine räumliche Trennung gesorgt. Als Nächstes werden wir weitere HTML-Elemente auszeichnen.
Überschriften, Listenelemente, Ankerelemente, Bilder
Wir tauchen nun tiefer in die Auszeichnung des HTML-Dokuments ein. Wir wollen uns um die Überschriften kümmern, Hyperlinks zu anderen Seiten erstellen, Listen erstellen um bspw. die Navigation auszuzeichnen, Absätze erstellen, Inhalte mit Span-Elementen auszeichnen und Bilder einfügen. Klingt nach viel Arbeit, ist es aber nicht. Wir arbeiten uns Stück für Stück vor.
Diese HTML-Elemente verwenden wir in diesem Abschnitt:
<h1> bis <h6> | Überschriften | Strukturieren Inhalte nach Hierarchie |
<a> | Link (Anchor) | Verweist auf andere Seiten oder Bereiche |
<p> | Absatz (Paragraph) | Enthält Fließtext |
<span> | Inline-Container | Gruppiert Textteile ohne Zeilenumbruch |
<img> | Bild (Image) | Bindet Bilder in die Webseite ein |
<ul> | Ungeordnete Liste | Aufzählungen ohne feste Reihenfolge |
In diesem Projekt beschäftigen wir uns nicht mit einem grafischen Logo, auch wenn wir später die CSS-Klasse „logo“ erstellen werden. Ein grafisches Logo kann jederzeit nachgefügt werden, stattdessen verwenden wir den Namen der Rechtsanwaltskanzlei und geben diesem einen Hyperlink, der zur Hauptseite (Homepage) führt.
📍 Aufgabe
Zeichne den verbliebenen Inhalt im Editor mit HTML-Elementen aus, so wie ich es im Code gemacht habe. Kopiere den Text nicht einfach, sondern füge jedes Element manuell ein, so prägst du dir es besser ein und hast einen besseren Lerneffekt.
So sieht der neue Code aus:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<!-- robots noindex für Crawler = keine Google-Indexierung! -->
<meta name="robots" content="noindex">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Peter Maier | Arbeitsrecht & Mietrecht</title>
</head>
<body>
<header>
<nav>
<a>Rechtsanwalt Peter Maier</a>
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="rechtsgebiete.html">Rechtsgebiete</a></li>
<li><a href="kanzlei.html">Kanzlei</a></li>
<li><a href="impressum.html">Kontakt</a></li>
</ul>
</nav>
<section>
<div>
<span>Bestmögliche Strategie für Sie</span>
<h1>Probleme mit dem Arbeitgeber?</h1>
<p>Wir unterstützen Sie verständlich, zuverlässig und zielorientiert bei arbeitsrechtlichen und
mietrechtlichen Fragen.</p>
<a href="">Kontakt aufnehmen</a>
</div>
<div>
<img src="anwalt.jpg" alt="Rechtsanwalt">
</div>
</section>
</header>
<main>
<section>
<span>Was wir Ihnen anbieten</span>
<h2>Unsere Rechtsgebiete</h2>
<p>Klare Beratung, strukturierte Vorgehensweise und persönliche Betreuung in wichtigen rechtlichen
Lebenssituationen.</p>
<div>
<article>
<h3>Arbeitsrecht</h3>
<p>Kündigung, Abmahnung, Aufhebungsvertrag oder offene Lohnansprüche: Wir prüfen Ihre Situation und
zeigen Ihnen die nächsten sinnvollen Schritte.</p>
</article>
<article>
<h3>Mietrecht</h3>
<p>Ob Mieterhöhung, Kündigung, Kaution oder Mängel in der Wohnung: Wir beraten Sie verständlich und
vertreten Ihre Interessen konsequent.</p>
</article>
</div>
<a>Kontaktieren Sie uns jetzt!</a>
</section>
<section>
<div>
<span>Das sind wir</span>
<h2>Moderne Kanzlei, klare Kommunikation</h2>
<p>Unsere Arbeitsweise verbindet persönliche Rechtsberatung mit einfachen digitalen Abläufen. So
behalten Sie jederzeit den Überblick.</p>
<div>
<article>
<h3>Schnelle Ersteinschätzung</h3>
<p>Wir erfassen Ihr Anliegen strukturiert und erklären Ihnen verständlich, welche Möglichkeiten
bestehen.</p>
</article>
<article>
<h3>Transparente Schritte</h3>
<p>Sie erfahren, welche Unterlagen benötigt werden, welche Fristen wichtig sind und wie der
weitere Ablauf aussieht.</p>
</article>
<article>
<h3>Persönliche Betreuung</h3>
<p>Sie haben einen festen Ansprechpartner und erhalten klare Rückmeldungen.</p>
</article>
</div>
</div>
</section>
<section>
<div>
<span>Jetzt handeln</span>
<h2>Sie brauchen rechtliche Unterstützung?</h2>
<p>Schildern Sie uns Ihr Anliegen. Wir melden uns zeitnah zurück und besprechen gemeinsam die nächsten
Schritte.</p>
</div>
<a>Kontakt</a>
</section>
</main>
<footer>
<div>
<div>
<h3>Rechtsanwalt Peter Maier</h3>
<p>Peter Maier ist Fachanwalt für Arbeitsrecht und kann auf jahrelange Berufserfahrung zurückblicken.
Zusammen mit seinem Team bietet er in der Kanzlei in Limberlachen Rechtsberatung für Arbeitsrecht
und Mietrecht mit klarer Sprache und persönlicher Betreuung.</p>
</div>
<div>
<h4>Navigation</h4>
<a href="index.html">Start</a>
<a href="rechtsgebiete.html">Rechtsgebiete</a>
<a href="kanzlei.html">Kanzlei</a>
<a href="impressum.html">Kontakt</a>
</div>
<div>
<h4>Kontakt</h4>
<p>Birkenallee 12<br>
74030 Limberlachen</p>
<p>kontakt@kanzlei-limberlachen.de</p>
</div>
</div>
<p>© 2026 Rechtsanwaltskanzlei Peter Maier. Alle Rechte vorbehalten.</p>
</footer>
</body>
</html>Die Ausgabe im Browser sieht jetzt wesentlich anders aus als vorher. Die Überschriften sind groß, es sind Zeilenumbrüche vorhanden und allgemein ist eine erste kleine Struktur zu erkennen. Der Inhalt ist aber immer noch nicht ansprechend, weil jedes Design fehlt. Wir haben aber den Aufbau des HTML-Dokuments weitestgehend abgeschlossen, das heißt, der Rohbau für unser Haus steht. Und damit haben wir schon einiges erreicht.
Beim Eintippen des Codes hast du ein Gefühl und das Verständnis für den Aufbau und die Struktur von HTML bekommen. Je mehr Projekte du erstellst und je länger du mit HTML (und später CSS) arbeitest, desto besser und sicherer wirst du. Die HTML-Versionen ändern sich, aber das Grundprinzip bleibt dasselbe. Auf diese Art und Weise habe ich das HTML-Handwerk vor 20 Jahren gelernt.
Und ganz ehrlich, ein bisschen wie ein kleiner Coder kommt man sich schon vor. 😉
CSS-Klassen
Wir sind mit dem HTML-Dokument fast am Ende, nur noch eine wichtige Sache müssen wir erledigen. Es geht um CSS-Klassen. Ohne CSS-Klassen können wir die Website des Rechtsanwalts nicht gestalten und diese würde auf ewig ein hässliches Textdokument bleiben. Was sind aber CSS-Klassen?
CSS-Klassen dienen dazu, HTML-Elemente zu kennzeichnen und gezielt mit CSS zu gestalten. Eine Klasse wird im HTML-Dokument mit dem Attribut class vergeben. Mehrere Elemente können dieselbe Klasse erhalten und dadurch ein einheitliches Design bekommen. Beispiel:
<p class="highlight">Wichtiger Text</p>Um eine CSS-Klasse zu gestalten, wird in der CSS-Datei ein sogenannter Klassenselektor erstellt. Dieser beginnt immer mit einem Punkt (.), gefolgt vom Klassennamen. Der Selektor wählt alle HTML-Elemente aus, denen die entsprechende Klasse zugewiesen wurde. Beispiel:
.highlight {
color: red;
font-weight: bold;
}In diesem Fall werden alle Elemente mit der Klasse highlight rot und fett dargestellt.
Nachfolgend werden wir Klassen erstellen und die HTML-Elemente damit kennzeichnen, um im nächsten Kapitel in der CSS-Datei Klassenselektoren zu erstellen und die Website optisch zu gestalten.
📍 Aufgabe
Wir gehen an die letzte Aufgabe in diesem Teil des Tutorials und erstellen CSS-Klassen. Im Code sieht es wie folgt aus:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<!-- robots noindex für Crawler = keine Google-Indexierung! -->
<meta name="robots" content="noindex">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Peter Maier | Arbeitsrecht & Mietrecht</title>
</head>
<body>
<header class="site-header">
<nav class="navbar">
<a class="logo" href="index.html">Rechtsanwalt Peter Maier</a>
<ul class="nav-links">
<li><a href="index.html">Start</a></li>
<li><a href="rechtsgebiete.html">Rechtsgebiete</a></li>
<li><a href="kanzlei.html">Kanzlei</a></li>
<li><a class="nav-button" href="impressum.html">Kontakt</a></li>
</ul>
</nav>
<section class="hero" id="start">
<div class="hero-text">
<span class="eyebrow">Bestmögliche Strategie für Sie</span>
<h1>Probleme mit dem Arbeitgeber?</h1>
<p>Wir unterstützen Sie verständlich, zuverlässig und zielorientiert bei arbeitsrechtlichen und
mietrechtlichen Fragen.</p>
<a class="button glow-button" href="impressum.html">Kontakt aufnehmen</a>
</div>
<div class="hero-image">
<img src="anwalt.jpg" alt="Rechtsanwalt">
</div>
</section>
</header>
<main>
<section class="features" id="leistungen">
<span class="eyebrow">Was wir Ihnen anbieten</span>
<h2>Unsere Rechtsgebiete</h2>
<p class="section-intro">Klare Beratung, strukturierte Vorgehensweise und persönliche Betreuung in wichtigen
rechtlichen Lebenssituationen.</p>
<div class="card-grid">
<article class="card glow-card">
<h3>Arbeitsrecht</h3>
<p>Kündigung, Abmahnung, Aufhebungsvertrag oder offene Lohnansprüche: Wir prüfen Ihre Situation und
zeigen Ihnen die nächsten sinnvollen Schritte.</p>
</article>
<article class="card glow-card">
<h3>Mietrecht</h3>
<p>Ob Mieterhöhung, Kündigung, Kaution oder Mängel in der Wohnung: Wir beraten Sie verständlich und
vertreten Ihre Interessen konsequent.</p>
</article>
</div>
<a class="button glow-button" href="impressum.html">Kontaktieren Sie uns jetzt!</a>
</section>
<section class="platform" id="kanzlei">
<div class="platform-content">
<span class="eyebrow">Das sind wir</span>
<h2>Moderne Kanzlei, klare Kommunikation</h2>
<p>Unsere Arbeitsweise verbindet persönliche Rechtsberatung mit einfachen digitalen Abläufen. So
behalten Sie jederzeit den Überblick.</p>
<div class="feature-list">
<article>
<h3>Schnelle Ersteinschätzung</h3>
<p>Wir erfassen Ihr Anliegen strukturiert und erklären Ihnen verständlich, welche Möglichkeiten
bestehen.</p>
</article>
<article>
<h3>Transparente Schritte</h3>
<p>Sie erfahren, welche Unterlagen benötigt werden, welche Fristen wichtig sind und wie der
weitere Ablauf aussieht.</p>
</article>
<article>
<h3>Persönliche Betreuung</h3>
<p>Sie haben einen festen Ansprechpartner und erhalten klare Rückmeldungen.</p>
</article>
</div>
</div>
</section>
<section class="cta-box" id="kontakt">
<div>
<span class="eyebrow">Jetzt handeln</span>
<h2>Sie brauchen rechtliche Unterstützung?</h2>
<p>Schildern Sie uns Ihr Anliegen. Wir melden uns zeitnah zurück und besprechen gemeinsam die nächsten
Schritte.</p>
</div>
<a class="button light-button" href="mailto:kontakt@kanzlei-limberlachen.de">Kontakt</a>
</section>
</main>
<footer class="site-footer">
<div class="footer-grid">
<div>
<h3>Rechtsanwalt Peter Maier</h3>
<p>Peter Maier ist Fachanwalt für Arbeitsrecht und kann auf jahrelange Berufserfahrung zurückblicken.
Zusammen mit seinem Team bietet er in der Kanzlei in Limberlachen Rechtsberatung für Arbeitsrecht
und Mietrecht mit klarer Sprache und persönlicher Betreuung.</p>
</div>
<div>
<h4>Navigation</h4>
<a href="index.html">Start</a>
<a href="rechtsgebiete.html">Rechtsgebiete</a>
<a href="kanzlei.html">Kanzlei</a>
<a href="impressum.html">Kontakt</a>
</div>
<div>
<h4>Kontakt</h4>
<p>Birkenallee 12<br>
74030 Limberlachen</p>
<p>kontakt@kanzlei-limberlachen.de</p>
</div>
</div>
<p class="copyright">© 2026 Rechtsanwaltskanzlei Peter Maier. Alle Rechte vorbehalten.</p>
</footer>
</body>
</html>Wenn du den Code sorgfältig bearbeitet hast, wird dir aufgefallen sein, dass dort neue Elemente vorhanden sind, wie z. B. id. Was ist der Unterschied zwischen class und id?
In HTML dienen sowohl class als auch id dazu, Elemente zu kennzeichnen und gezielt mit CSS zu gestalten oder mit JavaScript anzusprechen. Der wichtigste Unterschied besteht darin, dass eine Klasse (class) mehrfach verwendet werden kann, während eine ID (id) innerhalb eines HTML-Dokuments eindeutig sein sollte. Mehrere Elemente dürfen dieselbe Klasse besitzen, aber eine bestimmte ID sollte nur einmal vorkommen.
Du kannst die Klassennamen natürlich selbst bestimmen, in der Webentwicklung haben sich jedoch kurze, englische Namen durchgesetzt wie „eyebrow“ oder „nav-button“. Es steht dir selbstverständlich frei, diese Klassen „Augenbraue“ oder „Navigationsknopf“ zu nennen.
Haben wir sauber gearbeitet? Der Code-Check
Unser HTML-Dokument ist nun komplett fertig und wir könnten ab sofort mit der Gestaltung mit CSS beginnen. Bevor wir das Dokument „freigeben“, wollen wir schauen, ob der Code sauber umgesetzt ist und den W3C-Webstandards entspricht. Dazu verwenden wir den Markup Validation Service von W3C und lassen den Code überprüfen.
Wir nutzen die Option „Validate by File Upload“ und laden die index.html Datei hoch. Dann klicken wir auf den Button „Check“.
Nach einigen Sekunden erhalten wir die Rückmeldung und die Ausgabe:
Document checking completed. No errors or warnings to show.
Hervorragend! 👍 Wir haben sauber gearbeitet und haben ein komplettes HTML-Dokument, welches den Webstandards entspricht.
Hiermit endet das Tutorial zum Einstieg in HTML. Im zweiten Teil werden wir die Website mit CSS gestalten und diese fertigstellen. Ursprünglich wollte ich das Tutorial in einem Stück veröffentlichen, doch dieses hat bereits über 4000 Wörter, sodass ich mich dafür entschieden habe, mehrere Teile zu veröffentlichen. Sonst wäre es zu unübersichtlich geworden.
Einstieg in HTML – Fazit
In diesem ersten Teil hast du die wichtigsten Grundlagen von HTML kennengelernt und Schritt für Schritt ein vollständiges HTML-Dokument aufgebaut. Dabei hast du erfahren, wie Inhalte strukturiert, semantische Bereiche angelegt und wichtige HTML-Elemente wie Überschriften, Absätze, Listen, Links und Bilder eingesetzt werden. Außerdem hast du gelernt, wie ein modernes HTML-Grundgerüst aufgebaut ist und warum CSS-Klassen für die spätere Gestaltung einer Website unverzichtbar sind.
Auch wenn die Website der Rechtsanwaltskanzlei Peter Maier optisch noch schlicht wirkt, steht der Rohbau nun auf einem soliden Fundament. Genau wie beim Hausbau kommt es zunächst auf eine saubere Struktur an, bevor Farbe, Einrichtung und Design hinzukommen. Im nächsten Teil widmen wir uns deshalb CSS und verwandeln das bisherige HTML-Dokument in eine moderne, responsive Website mit ansprechendem Layout und professionellem Erscheinungsbild.
![Einstieg in CSS: Wir bauen eine moderne Website für einen Rechtsanwalt [Teil 2] 🚀](https://www.webnumerus.de/wp-content/uploads/2026/05/Aufbau_CSS-Selektor-300x225.jpg "Einstieg in CSS: Wir bauen eine moderne Website für einen Rechtsanwalt [Teil 2] 🚀")
![Was ist HTML? Die Sprache hinter jeder Website einfach erklärt [2026]](https://www.webnumerus.de/wp-content/uploads/2024/09/Webdesign-Grundlagen-300x168.jpg "Was ist HTML? Die Sprache hinter jeder Website einfach erklärt [2026]")
Schreiben Sie einen Kommentar