HTML hat mehr eingebaut als die meisten Entwickler nutzen. Dropdown-Menüs ohne JavaScript, Fortschrittsbalken ohne CSS-Tricks, editierbare Seiten auf Knopfdruck: Diese fünf Elemente und Attribute kennen die wenigsten, dabei sparen sie echte Arbeit.
Ausklappbare Inhalte ohne JavaScript: <details> und <summary>
Das <details>-Element ist eines der meistübersehenen HTML-Features. Du packst deinen Inhalt einfach rein, und er wird erst angezeigt, wenn jemand draufklickt. Das kleine Dreieck-Icon kommt automatisch, ohne JavaScript und ohne CSS.
Mit dem <summary>-Tag passt du den Klick-Text an:
<details>
<summary>Mehr Infos anzeigen</summary>
<p>Hier ist der versteckte Inhalt.</p>
</details>
Perfekt für FAQs, Accordion-Elemente oder Spoiler-Texte. Kein Event-Listener, kein Toggle-State, kein Framework nötig.
Fortschrittsbalken direkt mit HTML: <progress>
Für Ladebalken oder Fortschrittsanzeigen gibt es ein natives HTML-Element. Mit <progress value="70" max="100"></progress> bekommst du einen funktionierenden Fortschrittsbalken, der im Browser automatisch korrekt dargestellt wird.
Der Vorteil: Er ist barrierefrei, semantisch korrekt und wird von Screen-Readern unterstützt. Mit ein bisschen CSS kannst du ihn auch optisch anpassen.
Editierbare Inhalte: contenteditable
Das Attribut contenteditable="true" macht jedes HTML-Element direkt bearbeitbar, ohne ein Input-Feld. Du kannst es auf ein <div>, <p> oder sogar <table> setzen, und der Nutzer kann den Text direkt im Browser editieren.
Nützlich für Quick-Prototypen, einfache Rich-Text-Bereiche oder If you want to build a minimal in-browser editor without reaching for a library.
Automatische Vervollständigung mit <datalist>
<datalist> gibt dir eine Autocomplete-Dropdown-Liste für Input-Felder, ohne JavaScript:
<input list="sprachen" placeholder="Programmiersprache" />
<datalist id="sprachen">
<option value="JavaScript"></option>
<option value="Python"></option>
<option value="TypeScript"></option>
</datalist>
Der Nutzer kann trotzdem etwas Eigenes eingeben, bekommt aber passende Vorschläge. Für Formulare, Suchfelder oder Filterleisten eine sehr saubere Lösung.
Semantische Markierungen: <mark> und <abbr>
<mark> hebt Text visuell hervor (standardmäßig gelb), wie ein Textmarker. Sinnvoll für Suchergebnisse, wichtige Stellen oder Tutorials.
<abbr> definiert Abkürzungen mit einem Tooltip. <abbr title="Hypertext Markup Language">HTML</abbr> zeigt beim Hover die Langform an, was die Barrierefreiheit verbessert und den Text verständlicher macht.
Beide Elemente sind semantisch und helfen dabei, den Content für Screen-Reader und Suchmaschinen besser zu strukturieren.
Häufige Fragen
Welche dieser HTML-Elemente sind wirklich produktionsreif?
Alle fünf. <details>, <progress>, contenteditable, <datalist>, <mark> und <abbr> werden von allen modernen Browsern unterstützt und sind für den Produktionseinsatz geeignet. Die Browser-Kompatibilität kannst du auf MDN Web Docs nachprüfen.
Brauche ich für diese Features JavaScript?
Nein. Das ist gerade der Punkt: Alle hier vorgestellten Features funktionieren mit reinem HTML, ohne JavaScript. Das macht sie besonders wertvoll, weil sie schneller laden, barrierefreier sind und weniger Wartungsaufwand erzeugen.
Wo lerne ich weitere versteckte HTML-Features?
Die offizielle Referenz auf MDN Web Docs listet alle HTML-Elemente mit Beschreibungen und Beispielen. Wenn du tiefer in HTML, CSS und JavaScript einsteigen willst, schau dir den Frontend Fundamentals Kurs von DevKarriere an.