Willkommen zu HTML!

HTML (HyperText Markup Language) ist die Sprache, mit der du Webseiten aufbaust. Sie beschreibt die Struktur des Inhalts — also Überschriften, Absätze, Bilder, Links und vieles mehr.

Was du hier lernst:

Wie ein HTML-Dokument aufgebaut ist
Wie du Tags und Attribute verwendest
Wie du Listen, Tabellen und Formulare erstellst

Grundstruktur einer HTML-Seite

Eine HTML-Datei hat immer denselben Grundaufbau: <html> umschließt alles, <head> enthält Metadaten und der <body> den sichtbaren Inhalt.

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

Tags & Attribute

HTML besteht aus sogenannten Tags. Die meisten haben ein öffnendes und ein schließendes Tag. Attribute geben einem Element zusätzliche Informationen, z. B. src oder href.

<h1>Überschrift</h1>
<p>Das ist ein <strong>wichtiger</strong> Absatz.</p>

<img src="bild.jpg" alt="Beschreibung des Bildes">
<a href="https://example.com">Link zu einer Seite</a>

Listen

Mit Listen kannst du Aufzählungen darstellen: geordnet (<ol>) oder ungeordnet (<ul>).

<h3>Einkaufsliste</h3>
<ul>
  <li>Brot</li>
  <li>Milch</li>
  <li>Äpfel</li>
</ul>

<h3>Schritte</h3>
<ol>
  <li>Ofen vorheizen</li>
  <li>Teig kneten</li>
  <li>Backen</li>
</ol>

Links & Bilder

Mit <a> erstellst du Links, mit <img> bindest du Bilder ein.

<a href="https://openai.com">Besuche OpenAI</a>

<img src="katze.jpg" alt="Eine niedliche Katze">

Live-Demo:

Zur MDN-Webdokumentation →
Katze

Tabellen

Tabellen strukturieren Daten in Zeilen und Spalten. Du nutzt <table>, <tr> (Zeile), <th> (Überschrift) und <td> (Zelle).

<table>
  <tr>
    <th>Name</th>
    <th>Alter</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ben</td>
    <td>30</td>
  </tr>
</table>

Name	Alter
Anna	25
Ben	30

Formulare

Mit Formularen sammelst du Benutzereingaben. Jedes Feld wird mit einem <input>, <textarea> oder <select> erstellt.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Absenden</button>
</form>