HackMD
HTML-Elemente - Kategorische Übersicht
📋 Inhaltsverzeichnis
- Dokumentstruktur
- Textstruktur
- Listen
- Links und Navigation
- Medien
- Tabellen
- Formulare
- Semantische Elemente
- Interaktive Elemente
- Metadaten
- Skripte und Stile
- 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
- Anfänger: Fokus auf ⭐⭐⭐⭐⭐ und ⭐⭐⭐⭐ Elemente
- Fortgeschrittene: Alle Kategorien durcharbeiten
- Experten: Spezielle Anwendungsfälle der ⭐ Elemente
