Unverzichtbare Tags, damit HTML wie erwartet funktioniert

• Damit eine Webseite im Browser wie erwartet dargestellt wird, müssen einige grundlegende HTML-Tags unbedingt enthalten sein
• `` stellt Rendering im Standards Mode sicher und verhindert Fehler bei der Layoutberechnung
• `` verbessert durch Sprachinformationen Barrierefreiheit, Suche und Übersetzungsqualität
• und steuern jeweils Zeichenkodierung und mobile Darstellungsgröße
• Diese Tags sind nicht bloß formale Elemente, sondern zentrale Bausteine für Webstandards und eine konsistente User Experience

---

Grundstruktur von HTML und Überblick über unverzichtbare Tags

• Der Beitrag wurde inspiriert von Alex Petros’ Vortrag „Incantations that make HTML work correctly“
  • Der Autor fasst ein Grund-Snippet zusammen, das immer enthalten sein sollte, wenn man eine HTML-Datei direkt im Browser öffnet
  • Die als Beispiel gezeigte Grundstruktur sieht so aus

• Jedes dieser Tags hilft dem Browser dabei, HTML standardkonform zu interpretieren und darzustellen
  • Fehlen sie, kann der Browser in den nicht standardkonformen Modus (quirks mode) wechseln, oder es treten Probleme wie fehlerhafte Zeichen oder eine verkleinerte mobile Darstellung auf

`` — Deklaration des Standards Mode

• `` ist eine Deklaration, die den Browser anweist, im Standards Mode zu rendern
  • Fehlt diese Deklaration, wechselt der Browser in den quirks mode und emuliert veraltetes, nicht standardkonformes HTML-Verhalten
  • Dadurch ändern sich Berechnungen für Layout, Größe und Ausrichtung, was zu unerwarteten Darstellungsfehlern führt
• ist nicht case-sensitive und wird in Formen wie oder `` ebenfalls erkannt
  • Der Autor scherzt, wer Markup im Stil von 1998 schreiben wolle, könne es gern in Großbuchstaben schreiben

`` — Dokumentensprache festlegen

• `` ist ein Tag, das die Standardsprache des Dokuments angibt
  • Diese Information wird von Browsern, Suchmaschinen, Screenreadern und vielen anderen Tools genutzt
• Wichtige Anwendungsbeispiele
  • Screenreader wählen die korrekte Aussprache und Stimmlage
  • Suchmaschinen verbessern Indexierung und Übersetzungsgenauigkeit
  • Locale-basierte Funktionen wie die Rechtschreibprüfung werden korrekt angewendet
• Auch wenn das Weglassen des Sprachattributs visuell keine Probleme zu verursachen scheint, können umliegende Tools die Seite falsch verarbeiten
  • Deshalb ist es sinnvoll, es explizit im HTML anzugeben
• Sprachinformationen lassen sich zwar auch über Response-Header des Servers übermitteln, beim direkten Öffnen lokaler Dateien ist die Angabe im HTML jedoch sicherer
  • Beispielcode

    return new Response(
        "Hello world
    
    

", { status: 200, headers: { "Content-Type": "text/html; charset=utf-8" }, } ); ```

`` — Zeichenkodierung festlegen

• `` sorgt dafür, dass der Browser die Zeichenkodierung des Dokuments erkennt
  • Dadurch werden Nicht-ASCII-Zeichen wie é, ü, ñ, ©, ™, ®, …, 👍 korrekt dargestellt
• Fehlt dieses Tag, können Sonderzeichen oder typografische Anführungszeichen im Dokument fehlerhaft angezeigt werden
  • Der Autor nennt als Beispiel aus seinem Blog einen Fall, in dem „smart quotes“ kaputt dargestellt wurden
• Vergleich der Beispiele
  • Ohne ``: Sonderzeichen und Emojis werden fehlerhaft dargestellt
  • Mit dem Tag: Alle Zeichen erscheinen korrekt
• Im Blog ist ein Screenshot enthalten, der beide Fälle gegenüberstellt

`` — Mobile Viewport-Einstellungen

• Dieses Tag steuert in mobilen Browsern Bildschirmbreite und Zoomfaktor
  • Fehlt es, wird die Seite auf mobilen Geräten verkleinert und sehr klein dargestellt
• Der Autor beschreibt den typischen Fall: „Auf dem Desktop sieht alles gut aus, aber auf dem Smartphone wirkt alles winzig“ — ein Beispiel für ein vergessenes meta-viewport-Tag
  • Mit einem Vergleichs-Screenshot links (ohne Tag) und rechts (mit Tag) wird der Unterschied visuell gezeigt
• Deshalb sollte auch ein einfacher Prototyp dieses Tag enthalten, um die erwarteten Layout-Proportionen beizubehalten

Abschluss — Die echten HTML-Grundlagen

• Zum Schluss macht der Autor den Witz, er habe „das wichtigste Snippet vergessen“
  • Als Beispiel zeigt er den folgenden Code

• Das ist eine ironische Anspielung auf die in moderner Webentwicklung häufig verwendete JavaScript-basierte App-Struktur
• Insgesamt betont der Beitrag, dass diese grundlegenden HTML-Tags entscheidende Elemente sind, um standardkonformes Verhalten im Web sicherzustellen

[ahwjdekf]

Wenn sie unverzichtbar sind, warum funktionieren sie dann nicht standardmäßig? Wie auch immer, das Web ist wirklich seltsam. Es hat eine ganz eigene Denkweise.

[dongho42]

Liegt es nicht vielleicht an der Abwärtskompatibilität? Wenn man das Standardverhalten einfach ändert, könnten Dinge kaputtgehen, die vorher problemlos funktioniert haben.

[GN⁺]

Hacker-News-Kommentare

• Interessante Tatsache: HN und paulgraham.com werden beide im Quirks Mode gerendert, weil die DOCTYPE-Deklaration fehlt. Das lässt sich in den Entwicklerwerkzeugen mit document.compatMode prüfen. Ich nutze ein Userscript, um den Text eines per Mouseover hervorgehobenen Elements leicht zu kopieren, aber im Quirks Mode funktioniert es unzuverlässig. Mit document.write("" + document.documentElement.innerHTML) kann man es zwar erzwingen, aber das setzt das ganze Dokument zurück und verursacht Probleme. Ich frage mich, ob es aus Nutzersicht einen saubereren Weg gibt, den Standards Mode zu erzwingen.
  • Ich wünschte, dang würde etwas an der Usability von HN verbessern. Die Standard-Schriftgröße liegt etwa bei 12px und wirkt auf den meisten modernen Geräten viel zu klein. Es scheint auch, als würde immer noch derselbe CSS-Code wie im vor etwa 13 Jahren veröffentlichten alten Code verwendet.
  • Das lässt sich mit einem uBlock-Filter lösen. Beispiel: `||news.ycombinator.com/*$replace=/