# HTML-Elemente - Kategorische Übersicht ## 📋 Inhaltsverzeichnis - [Dokumentstruktur](#dokumentstruktur) - [Textstruktur](#textstruktur) - [Listen](#listen) - [Links und Navigation](#links-und-navigation) - [Medien](#medien) - [Tabellen](#tabellen) - [Formulare](#formulare) - [Semantische Elemente](#semantische-elemente) - [Interaktive Elemente](#interaktive-elemente) - [Metadaten](#metadaten) - [Skripte und Stile](#skripte-und-stile) - [Eingebettete Inhalte](#eingebettete-inhalte) --- ## 🏗️ Dokumentstruktur ### Grundgerüst | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<html>` | Wurzelelement | ⭐⭐⭐⭐⭐ | | `<head>` | Metadaten-Container | ⭐⭐⭐⭐⭐ | | `<body>` | Sichtbarer Inhalt | ⭐⭐⭐⭐⭐ | | `<DOCTYPE html>` | Dokumenttyp-Deklaration | ⭐⭐⭐⭐⭐ | ### Sektionierung | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<main>` | Hauptinhalt | ⭐⭐⭐⭐⭐ | | `<header>` | Kopfbereich | ⭐⭐⭐⭐⭐ | | `<footer>` | Fußbereich | ⭐⭐⭐⭐⭐ | | `<nav>` | Navigation | ⭐⭐⭐⭐⭐ | | `<section>` | Thematischer Abschnitt | ⭐⭐⭐⭐ | | `<article>` | Eigenständiger Inhalt | ⭐⭐⭐⭐ | | `<aside>` | Seiteninhalt | ⭐⭐⭐ | | `<div>` | Generischer Container | ⭐⭐⭐⭐⭐ | --- ## 📝 Textstruktur ### Überschriften | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<h1>` | Hauptüberschrift | ⭐⭐⭐⭐⭐ | | `<h2>` | Unterüberschrift | ⭐⭐⭐⭐⭐ | | `<h3>` | Dritte Ebene | ⭐⭐⭐⭐ | | `<h4>` | Vierte Ebene | ⭐⭐⭐ | | `<h5>` | Fünfte Ebene | ⭐⭐ | | `<h6>` | Sechste Ebene | ⭐ | ### Textabsätze und -formatierung | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<p>` | Absatz | ⭐⭐⭐⭐⭐ | | `<br>` | Zeilenumbruch | ⭐⭐⭐⭐ | | `<hr>` | Horizontale Linie | ⭐⭐⭐ | | `<pre>` | Vorformatierter Text | ⭐⭐ | | `<blockquote>` | Langes Zitat | ⭐⭐ | ### Inline-Textformatierung | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<span>` | Generischer Inline-Container | ⭐⭐⭐⭐⭐ | | `<strong>` | Wichtiger Text (fett) | ⭐⭐⭐⭐ | | `<em>` | Betonter Text (kursiv) | ⭐⭐⭐⭐ | | `<b>` | Fetter Text | ⭐⭐⭐ | | `<i>` | Kursiver Text | ⭐⭐⭐ | | `<u>` | Unterstrichener Text | ⭐⭐ | | `<small>` | Kleiner Text | ⭐⭐ | | `<mark>` | Markierter Text | ⭐⭐ | | `<del>` | Gelöschter Text | ⭐⭐ | | `<ins>` | Eingefügter Text | ⭐ | | `<sub>` | Tiefgestellt | ⭐ | | `<sup>` | Hochgestellt | ⭐ | --- ## 📋 Listen | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<ul>` | Ungeordnete Liste | ⭐⭐⭐⭐⭐ | | `<ol>` | Geordnete Liste | ⭐⭐⭐⭐ | | `<li>` | Listenelement | ⭐⭐⭐⭐⭐ | | `<dl>` | Definitionsliste | ⭐⭐ | | `<dt>` | Definitionsbegriff | ⭐⭐ | | `<dd>` | Definitionsbeschreibung | ⭐⭐ | --- ## 🔗 Links und Navigation | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<a>` | Link/Anker | ⭐⭐⭐⭐⭐ | --- ## 🎬 Medien ### Bilder | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<img>` | Bild | ⭐⭐⭐⭐⭐ | | `<figure>` | Abbildung mit Beschriftung | ⭐⭐⭐ | | `<figcaption>` | Abbildungsbeschriftung | ⭐⭐⭐ | | `<picture>` | Responsive Bilder | ⭐⭐ | | `<source>` | Medienquelle | ⭐⭐ | ### Audio/Video | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<video>` | Video | ⭐⭐⭐ | | `<audio>` | Audio | ⭐⭐ | | `<track>` | Textspuren | ⭐ | --- ## 📊 Tabellen | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<table>` | Tabelle | ⭐⭐⭐⭐ | | `<thead>` | Tabellenkopf | ⭐⭐⭐ | | `<tbody>` | Tabellenkörper | ⭐⭐⭐ | | `<tfoot>` | Tabellenfuß | ⭐⭐ | | `<tr>` | Tabellenzeile | ⭐⭐⭐⭐ | | `<th>` | Tabellenüberschrift | ⭐⭐⭐ | | `<td>` | Tabellenzelle | ⭐⭐⭐⭐ | | `<caption>` | Tabellenbeschriftung | ⭐⭐ | | `<colgroup>` | Spaltengruppe | ⭐ | | `<col>` | Spalte | ⭐ | --- ## 📝 Formulare ### Formular-Container | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<form>` | Formular | ⭐⭐⭐⭐⭐ | | `<fieldset>` | Feldgruppe | ⭐⭐ | | `<legend>` | Feldgruppentitel | ⭐⭐ | ### Eingabefelder | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<input>` | Eingabefeld | ⭐⭐⭐⭐⭐ | | `<textarea>` | Mehrzeiliges Textfeld | ⭐⭐⭐⭐ | | `<select>` | Auswahlfeld | ⭐⭐⭐⭐ | | `<option>` | Auswahloption | ⭐⭐⭐⭐ | | `<optgroup>` | Optionsgruppe | ⭐⭐ | | `<button>` | Schaltfläche | ⭐⭐⭐⭐⭐ | | `<label>` | Feldbezeichnung | ⭐⭐⭐⭐⭐ | ### Formular-Unterstützung | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<datalist>` | Vordefinierte Optionen | ⭐⭐ | | `<output>` | Berechnungsresultat | ⭐ | | `<progress>` | Fortschrittsbalken | ⭐⭐ | | `<meter>` | Messbalken | ⭐ | --- ## 🏷️ Semantische Elemente | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<time>` | Zeitangabe | ⭐⭐⭐ | | `<address>` | Kontaktinformation | ⭐⭐ | | `<cite>` | Zitatquelle | ⭐⭐ | | `<q>` | Kurzes Zitat | ⭐⭐ | | `<abbr>` | Abkürzung | ⭐⭐ | | `<dfn>` | Definition | ⭐ | | `<code>` | Code | ⭐⭐⭐ | | `<kbd>` | Tastatureingabe | ⭐ | | `<samp>` | Programmausgabe | ⭐ | | `<var>` | Variable | ⭐ | --- ## 🎮 Interaktive Elemente | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<details>` | Aufklappbarer Bereich | ⭐⭐ | | `<summary>` | Zusammenfassung | ⭐⭐ | | `<dialog>` | Dialog/Modal | ⭐ | --- ## 📄 Metadaten | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<title>` | Seitentitel | ⭐⭐⭐⭐⭐ | | `<meta>` | Metadaten | ⭐⭐⭐⭐⭐ | | `<base>` | Basis-URL | ⭐ | --- ## 🎨 Skripte und Stile | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<style>` | CSS-Stile | ⭐⭐⭐⭐ | | `<link>` | Externe Ressourcen | ⭐⭐⭐⭐⭐ | | `<script>` | JavaScript | ⭐⭐⭐⭐⭐ | | `<noscript>` | Fallback ohne JavaScript | ⭐⭐ | --- ## 🌐 Eingebettete Inhalte | Element | Beschreibung | Häufigkeit | |---------|--------------|------------| | `<iframe>` | Eingebettete Seite | ⭐⭐⭐ | | `<embed>` | Eingebettete Medien | ⭐⭐ | | `<object>` | Eingebettetes Objekt | ⭐ | | `<param>` | Objektparameter | ⭐ | --- ## 📈 Häufigkeits-Legende - ⭐⭐⭐⭐⭐ Täglich verwendet - ⭐⭐⭐⭐ Sehr häufig - ⭐⭐⭐ Häufig - ⭐⭐ Gelegentlich - ⭐ Selten --- ## 🎯 Lernempfehlung 1. **Anfänger:** Fokus auf ⭐⭐⭐⭐⭐ und ⭐⭐⭐⭐ Elemente 2. **Fortgeschrittene:** Alle Kategorien durcharbeiten 3. **Experten:** Spezielle Anwendungsfälle der ⭐ Elemente