HTML Grundlagen

6 Kernkonzepte
Die wichtigsten HTML-Grundlagen für den Einstieg: Struktur · Textauszeichnung · Listen · Tabellen · Formulare · Medien HTML (HyperText Markup Language) ist die Grundlage jeder Webseite. Diese Cheatsheet deckt die essenziellen Tags und Konzepte für den Einstieg in die Webentwicklung ab.

Grundgerüst – !DOCTYPE html · html · head · body

<!DOCTYPE html> · <html> · <head> · <body>
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Meine Seite</title> </head> <body> <h1>Hallo Welt!</h1> <p>Das ist meine erste Webseite.</p> </body> </html>

Das HTML-Grundgerüst bildet die Basis jeder Webseite. Es definiert den Dokumententyp, die Sprache, Metadaten und den sichtbaren Inhalt.

Wichtige Struktur-Elemente

Tag Beschreibung
<!DOCTYPE html> Dokumenttyp (HTML5)
<html> Wurzelelement der HTML-Seite
<head> Metadaten (nicht sichtbar)
<meta charset="UTF-8"> Zeichenkodierung
<meta name="viewport"> Responsive Viewport (mobile)
<title> Titel im Browser-Tab
<body> Sichtbarer Inhalt der Seite
Beispiele
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine erste Webseite</title>
<style>
body { background-color: #f0f0f0; }
</style>
</head>
<body>
<!-- Hier kommt der sichtbare Inhalt -->
<h1>Willkommen</h1>
</body>
</html>
Tipp: Der <meta name="viewport" ...>-Tag ist essenziell für responsive Webseiten, die auf mobilen Geräten gut aussehen.

Textauszeichnung – Überschriften, Absätze, Formatierung

<h1> · <p> · <strong> · <em> · <br>
<h1>Überschrift 1</h1> <p>Dies ist ein <strong>wichtiger</strong> Text.</p> <p>Zeile 1<br>Zeile 2</p>

Textauszeichnungen strukturieren und formatieren den Textinhalt einer Webseite. Überschriften, Absätze und Hervorhebungen sind die grundlegenden Elemente.

Wichtige Text-Tags

Tag Beschreibung Beispiel
<h1> - <h6> Überschriften (1 wichtigste) <h1>Titel</h1>
<p> Absatz <p>Text</p>
<strong> Wichtiger Text (fett) <strong>wichtig</strong>
<em> Betonung (kursiv) <em>betont</em>
<br> Zeilenumbruch Zeile 1<br>Zeile 2
<hr> Horizontale Linie <hr>
<blockquote> Zitat (eingerückt) <blockquote>Zitat</blockquote>
<pre> Formatierter Text (monospace) <pre>Code</pre>
Beispiele
<!-- Überschriften -->
<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<h3>Kapitel</h3>
<!-- Absatz mit Formatierung -->
<p>Dies ist ein normaler <strong>wichtiger</strong> Text mit <em>Betonung</em>.</p>
<!-- Zeilenumbruch und Linie -->
<p>Erste Zeile<br>Zweite Zeile</p>
<hr>
<!-- Zitat -->
<blockquote>
"Programmieren ist die Kunst, Probleme zu lösen."
</blockquote>
Tipp: Verwenden Sie <h1> nur einmal pro Seite für die Hauptüberschrift. Die anderen Überschriften-Ebenen (<h2> bis <h6>) sollten hierarchisch eingesetzt werden.

Listen – Ungeordnet · Geordnet · Definition

<ul> · <ol> · <dl> · <li>
<!-- Ungeordnete Liste --> <ul> <li>Punkt 1</li> <li>Punkt 2</li> </ul> <!-- Geordnete Liste --> <ol> <li>Erster Schritt</li> <li>Zweiter Schritt</li> </ol>

Listen werden verwendet, um Aufzählungen, Schritt-für-Schritt-Anleitungen oder Definitionspaare darzustellen.

Listentypen

Tag Beschreibung Beispiel
<ul> Ungeordnete Liste (Aufzählung) • Punkt 1
• Punkt 2
<ol> Geordnete Liste (Nummerierung) 1. Schritt 1
2. Schritt 2
<dl> Definitionsliste Begriff: Definition
<li> Listen-Element (innerhalb ul/ol) <li>Element</li>
<dt> / <dd> Definitionsbegriff / -definition <dt>HTML</dt><dd>...</dd>
Beispiele
<!-- Ungeordnete Liste -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Geordnete Liste -->
<ol>
<li>Dokument erstellen</li>
<li>Inhalt hinzufügen</li>
<li>Speichern und öffnen</li>
</ol>
<!-- Definitionsliste -->
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Tipp: Listen können beliebig verschachtelt werden – Sie können also innerhalb einer Liste weitere Listen einfügen.

Tabellen – Daten tabellarisch darstellen

<table> · <tr> · <td> · <th> · <thead>
<!-- Einfache Tabelle --> <table> <tr> <th>Name</th> <th>Alter</th> </tr> <tr> <td>Anna</td> <td>30</td> </tr> </table>

Tabellen werden verwendet, um strukturierte Daten in Zeilen und Spalten darzustellen. Sie bestehen aus <table>, <tr> (Zeile), <td> (Zelle) und <th> (Kopfzelle).

Tabellen-Elemente

Tag Beschreibung
<table> Tabellen-Container
<thead> Tabellenkopf (optional)
<tbody> Tabellenkörper (optional)
<tfoot> Tabellenfuß (optional)
<tr> Tabellenzeile
<th> Kopfzelle (fett, zentriert)
<td> Datenzelle
colspan Zelle über mehrere Spalten
rowspan Zelle über mehrere Zeilen
Beispiele
<!-- Tabelle mit Kopf, Körper und Fuß -->
<table border="1">
<thead>
<tr>
<th>Produkt</th>
<th>Preis</th>
<th>Verfügbar</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>899 €</td>
<td>Ja</td>
</tr>
<tr>
<td>Maus</td>
<td>29 €</td>
<td>Nein</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Gesamt</td>
<td>928 €</td>
</tr>
</tfoot>
</table>
Tipp: Verwenden Sie colspan und rowspan, um Zellen über mehrere Spalten oder Zeilen zusammenzufassen. Für das Styling von Tabellen wird heute meist CSS verwendet.

Formulare – Eingaben und Interaktion

<form> · <input> · <button> · <label>
<!-- Einfaches Formular --> <form action="/submit" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <button type="submit">Senden</button> </form>

Formulare ermöglichen die Interaktion mit dem Benutzer – sie sammeln Eingaben über Textfelder, Auswahlboxen, Checkboxen und Buttons.

Wichtige Formular-Elemente

Tag / Attribut Beschreibung
<form> Formular-Container (action, method)
<input type="text"> Einzeiliges Textfeld
<input type="password"> Passwortfeld (verdeckt)
<input type="email"> E-Mail-Feld (Validierung)
<input type="checkbox"> Checkbox (mehrere Auswahl)
<input type="radio"> Radio-Button (eine Auswahl)
<input type="number"> Zahlenfeld
<input type="date"> Datumswahl
<textarea> Mehrzeiliges Textfeld
<select> <option> Dropdown-Auswahl
<label> Beschriftung für Eingabefelder
<button> Button (submit, reset, button)
Beispiele
<form action="/register" method="POST">
<!-- Textfeld -->
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username" required>
<!-- E-Mail -->
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email">
<!-- Checkbox -->
<input type="checkbox" id="newsletter" name="newsletter" value="ja">
<label for="newsletter">Newsletter abonnieren</label>
<!-- Dropdown -->
<label for="land">Land:</label>
<select id="land" name="land">
<option value="de">Deutschland</option>
<option value="at">Österreich</option>
<option value="ch">Schweiz</option>
</select>
<!-- Textarea -->
<label for="nachricht">Nachricht:</label>
<textarea id="nachricht" name="nachricht" rows="4" cols="30"></textarea>
<!-- Submit-Button -->
<button type="submit">Registrieren</button>
<button type="reset">Zurücksetzen</button>
</form>
Tipp: Verwenden Sie immer <label> mit dem for-Attribut, das auf die id des Inputs verweist. Das verbessert die Barrierefreiheit und Benutzerfreundlichkeit.

Medien – Bilder, Audio, Video

<img> · <audio> · <video> · <figure>
<img src="bild.jpg" alt="Beschreibung"> <video src="video.mp4" controls></video> <audio src="audio.mp3" controls></audio>

Medien-Elemente ermöglichen die Einbindung von Bildern, Audio und Video in Webseiten. Sie verbessern die Benutzererfahrung und machen Inhalte ansprechender.

Medien-Tags im Überblick

Tag Beschreibung Wichtige Attribute
<img> Bild einbinden src, alt, width, height
<figure> Medien mit Beschriftung <figcaption> für Bildunterschrift
<audio> Audiospur abspielen src, controls, loop, autoplay
<video> Video abspielen src, controls, width, height, poster
<source> Alternative Medienquellen src, type
Beispiele
<!-- Bild einbinden -->
<img src="logo.png" alt="Firmenlogo" width="200" height="100">
<!-- Bild mit Bildunterschrift -->
<figure>
<img src="landschaft.jpg" alt="Berglandschaft">
<figcaption>Wunderschöne Berglandschaft in den Alpen</figcaption>
</figure>
<!-- Video mit Steuerelementen -->
<video src="video.mp4" controls width="640" height="360" poster="vorschaubild.jpg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
Ihr Browser unterstützt kein Video.
</video>
<!-- Audio -->
<audio src="musik.mp3" controls loop></audio>
Tipp: Das alt-Attribut bei Bildern ist nicht nur für die Barrierefreiheit wichtig, sondern auch für SEO. Für Video und Audio sollten Sie mehrere Formate (z.B. MP4 und WebM) anbieten.

HTML Grundlagen im Überblick

<html> Wurzelelement
Dokumententyp
<head> Metadaten
Titel, Styles, Scripts
<body> Sichtbarer Inhalt
Text, Bilder, Tabellen
<h1> Überschriften
h1 bis h6
<form> Interaktion
Eingaben, Buttons
<img> Medien
Bilder, Audio, Video

Quick Summary

<html>
Grundgerüst
<p>
Textauszeichnung
<ul>
Listen
<table>
Tabellen
<form>
Formulare
<img>
Medien
<!DOCTYPE html> · <h1>Titel</h1> · <p>Absatz</p> · <img src="bild.jpg" alt="Beschreibung">
Alle Cheatsheets Impressum Datenschutz
Zum Drucken
© ITGrundlagen.com · HTML Grundlagen Cheatsheet · Befehlsübersicht · Schnellreferenz