HTML/Regeln/Textauszeichnung

Aus SELFHTML-Wiki
< HTML‎ | Regeln(Weitergeleitet von Semantik)
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
10min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
● HTML

HTML (HyperText Markup Language) wurde 1990 vom Web-Gründer Tim Berners-Lee als Auszeichnungssprache (Markup Language) entwickelt, die auf SGML basierte.

Standard-Hierarchie rund um XML
Standard-Hierarchie rund um XML

Eine solche Auszeichnungssprache hat die Aufgabe, die logischen Bestandteile eines textorientierten Dokuments zu beschreiben. Als Auszeichnungssprache bietet HTML daher die Möglichkeit an, typische Elemente eines textorientierten Dokuments, wie Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen, als solche auszuzeichnen. Einige dieser Elemente haben wiederum Unterelemente. So enthält ein Textabsatz zum Beispiel eine als betont markierte Textstelle, eine Aufzählungsliste besteht aus einzelnen Listenpunkten, und eine Tabelle gliedert sich in einzelne Tabellenzellen.

Die meisten dieser Elemente haben einen fest definierbaren Erstreckungsraum. So geht eine Überschrift vom ersten bis zum letzten Zeichen, eine Aufzählungsliste vom ersten bis zum letzten Listenpunkt, oder eine Tabelle von der ersten bis zur letzten Zelle. Auszeichnungen markieren Anfang und Ende von Elementen. Um etwa eine Überschrift auszuzeichnen, lautet das Schema:

[Überschrift] Text der Überschrift [Ende Überschrift]

Bei einem Element, das wiederum Unterelemente besitzt, etwa einer Aufzählungsliste, lässt sich das gleiche Schema anwenden:

[Liste]
    [Listenpunkt] Text des Listenpunkts [Ende Listenpunkt]
    [Listenpunkt] Text des Listenpunkts [Ende Listenpunkt]
[Ende Liste]

In HTML werden die Auszeichnungsmarkierungen von spitzen Klammern umschlossen:

<…>

Schließende Zeichen erhalten zusätzlich ein Slash:

</…> 

Web-Browser, die HTML-Dateien am Bildschirm anzeigen, lösen die Auszeichnungsmarkierungen auf und stellen die Elemente dann in optisch gut erkennbarer Form am Bildschirm dar. Dabei ist die Bildschirmdarstellung aber nicht die einzige denkbare Ausgabeform. HTML kann beispielsweise genauso gut ausgedruckt oder vorgelesen werden.

Semantik[Bearbeiten]

Unter Semantik versteht man im Allgemeinen die Bedeutungslehre, die die Bedeutung von Zeichen wie Wörter, Phrasen oder Symbole untersucht. Durch semantisch korrektes HTML verleiht man Inhalten eine Bedeutung. Eine Überschrift wird häufig in etwas größerer Schrift und fett dargestellt, aber nicht jeder fette und groß gedruckte Text ist zwangsläufig eine Überschrift, er könnte auch ein Motto oder ein Zitat sein.

Im Webdesign wird versucht, Seitenstrukturierung und Textstrukturierung nach semantischen Gesichtspunkten zu organisieren, d. h. den Textinhalt sinnvoll mit den dafür passenden Elementen auszuzeichnen, beispielsweise eine Überschrift 1. Ordnung mit einem h1-Element.

Setzen Sie HTML-Elemente nicht danach ein, wie der Inhalt aussehen sollen, sondern danach, was der Inhalt vom Sinn her ist: Nicht jeder groß und fett auszugebende Text muss zwangsläufig eine Überschrift sein – für ein Motto sollten Sie das p-Element benutzen, für ein Zitat hingegen das blockquote-Element. Mit HTML bestimmt man hierbei, was etwas ist, wie etwas aussehen soll, legt man mit CSS fest.

Semantische Elemente benutzen[Bearbeiten]

Semantik ist nicht kompliziert, bereits in Fließtext werden beispielsweise folgende semantische Auszeichnungen verwendet:

  • für Überschriften sollen die Überschriften-Elemente beginnend mit h1 benutzt werden
  • für Absätze soll das Absatz-Element p benutzt werden
  • Zwei aufeinanderfolgende Dinge gleicher Art (Menüpunkte, Aufzählungen, Inhaltsverzeichnisse) sind potentiell bereits eine Liste.
  • Definitionslisten (dl) gehören zu den oft übersehenen sinnvollen Elementen in HTML.
  • wichtige Textstellen kann man mit dem em-Element, noch wichtigere mit dem strong-Element hervorheben.
  • Verwenden Sie in Formularen auch label-Elemente und gruppieren Sie, wenn sinnvoll, Formulareinheiten mittels fieldset und beschriften sie diese Abschnitte mit legend.

Die Browser verwenden besondere Darstellungen für die Elemente, die allerdings von einander abweichen können.

Für die Strukturierung einer Seite gibt es diverse in HTML5 neu eingeführten Elemente zur Seitenstrukturierung, wie beispielsweise nav für einen Navigationsbereich oder footer für den Fuß eines Abschnitts.

Auch für Interaktion mit dem Nutzer gibt es semantisch passende Elemente:

  • mit dem a-Element kann man auf andere Seiten oder Stellen auf der aktuellen Seite verweisen
  • mit Buttons lassen sich Aktionen auslösen, etwa Formulare absenden und JavaScript-Programme ausführen

In dem unwahrscheinlichen Fall, dass sich für einen Anwendungszweck kein semantisch passendes Element finden lässt, muss man dieses selbst bauen und mittels WAI-ARIA auszeichnen.

Die Elemente div und span sind als Elemente ohne semantische Bedeutung geeignet, um als Ansatzpunkt für die Gestaltung durch CSS zu dienen, falls sich hierfür kein passendes semantisches Element findet. Sie sind also Präsentations-bezogenes Markup.

Negativ-Beispiele[Bearbeiten]

Folgende gängige Herangehensweisen widersprechen der Idee von semantischem Einsatz von HTML und sollten daher gemieden werden:

  • Framesets und Tabellen-Layouts: Zur Gestaltung wurden eigens Präsentations-bezogene Elemente und Attribute definiert bzw. für tabellarische Daten bestimmte Elemente zu Layout-Zwecken missbraucht
    (siehe auch: HTML/Tutorials/Alternativen zu Tabellen)
  • Bilder und Texte mit JavaScript anklickbar machen, damit sie sich wie Buttons verhalten; bessere Alternative: Buttons, diese bringen bereits die passende sematische Bedeutung und Tastaturfokus bereits mit.
    Für Interaktion mit dem Nutzer kann man auch ein Formular einsetzen, das dann mit JavaScript „angereichert“ wird, aber auch ohne funktioniert (vgl. Progressive enhancement)
  • Verzichten Sie auf Elemente, die reine Verzierung enthalten. Sie können solche Elemente mittels der CSS-Pseudoelemente ::before und ::after erzeugen und auf Wunsch stylen.
  • Vermeiden Sie unnötige Verschachtelungen von div-Elementen. Oftmals können Sie unnötige Wrapper-Elemente vermeiden, indem Sie die html und body-Elemente entsprechend stylen.

Vorteile von semantisch sinnvollem HTML[Bearbeiten]

  • semantisches HTML wird dank der im Browser-Stylesheet verankerten Standard-Darstellung auch ohne weiteres CSS seinem Inhalt nach angemessen dargestellt, z. B. Quelltext-Blöcke in einer Schriftart mit konstanter Buchstabenbreite.
  • Ladezeiten verkürzen sich durch semantisches HTML erheblich, da das Markup kompakter ist und kein JavaScript oder CSS nötig ist, um die Funktionen von semantischem HTML nachzubauen
  • Programme können den Inhalt besser aufbereiten:
    • Screenreader können Inhalte besser aufbereiten (Barrierefreiheit), weil deren Bedeutung bekannt ist
    • Suchmaschinen können die Struktur eines Dokuments besser erfassen
    • Browser können einen Lesemodus anbieten, der nur die Hauptinhalte einer Seite darstellt
    • Programme können automatisch Inhaltsverzeichnisse erstellen, weil sie „wissen“, dass ein Abschnitt in einem Dokument mit einer als solchen ausgezeichneten Überschrift beginnt
  • bei interaktiven Elementen wie Buttons müssen nicht Eigenschaften wie Tastaturbedienung mühsam nachgebaut werden, was Arbeit spart

Guter HTML-Stil[Bearbeiten]

Generell sollten Sie sich bemühen sich an bewährte Konventionen zu halten, damit Ihr HTML-Code für Sie, andere Entwickler und Browser übersichtlich und für spätere Änderungen pflegeleicht ist.

Valider Code[Bearbeiten]

Ihr HTML-Markup sollte fehlerfrei und gültig (valide) sein, damit es von Browsern und anderen Parsern wie Screenreadern gelesen werden kann. HTML ist nur validierbar, wenn Sie eine Doctype-Angabe verwenden. Wenn Sie einen Doctype spezifizieren, dann validieren Sie Ihr Dokument auch, entweder beim maßgebenden Validator des W3C oder durch ein entsprechendes Browser-Plugin.

Beispiel: Doctypedeklaration für HTML5
<!doctype html>
Empfehlung:

Erstellen Sie HTML5-Dokumente.

  • Sie können sowohl die neuen HTML5-Elemente nutzen als auch bestehenden HTML4-Code weiterverwenden.
  • Der doctype ist kürzer und übersichtlicher.

Von XML entlehnte Tugenden[Bearbeiten]

Wohlgeformte Syntax erleichtert das Lesen und ermöglicht das Verarbeiten als XML:

  • Alle Elementnamen, Attributnamen und deren Werte sind klein geschrieben.
  • Attributwerte sind immer in doppelte Anführungszeichen ("") eingefasst.
  • Verwenden Sie „sprechende“ Klassennamen, die die Funktion und nicht die Art und Weise der Gestaltung beschreiben.
  • Elemente, die in HTML auch ohne schließendes Tag notiert werden dürfen (p, th, td, dt, dd, li), werden immer mit schließendem Tag notiert.
Beachten Sie: Da XHTML ein XML-Dialekt ist, sind obenstehende Punkte in XHTML zwingend einzuhalten, während sie in HTML „nur“ zum guten Stil gehören.

Exkurs: SVG[Bearbeiten]

Im Wiki gibt es oft Beispiele von inline-SVG in HTML5-Dokumenten. Hier sind alle SVG-Attribute klein geschrieben. Wenn Sie diese Codebeispiele aber in SVG-Dokumenten verwenden, müssen diese Attribute XML-konform geschrieben werden.

So wird das viewbox-Attribut in einem SVG-Dokument ignoriert, da es das viewBox-Attribut in case-sensitiver Schreibweise erwartet.

Strukturierter Quelltext[Bearbeiten]

Ihr Quelltext ist Gegenstand von Debuggingtools. Manchmal muss Quellcode in Ausschnitten in ein Formular kopiert werden. In Foren möchten andere Ihren Code einsehen um Ihnen zu helfen.

Besonders in der Entwicklungsphase sollten Sie folgende Richtlinien beachten:

  • Entfernen Sie nicht alle Zeilenumbrüche. Zeilen(nummern) sind ein wichtiger Indikator für Fehler-Berichte.
  • Notieren Sie Leerzeilen zwischen Hauptabschnitten des Dokuments.
  • Tabulatoren versus Leerzeichen ist seit jeher ein Streitthema. Für und gegen Leerzeichen spricht, dass alle Abstände fest definiert sind. Für und gegen Tabs spricht, dass ihre Weite individuell eingestellt werden/sein kann und bei zu großer Tab-Weite lange Zeilen die „magische Grenze“ von 80 Zeichen pro Zeile überschreiten können sowie Code-Ausrichtungen gestört werden können. Wofür auch immer Sie sich entscheiden, seien Sie konsequent und mischen Sie nicht Leerzeichen und Tabs zur Ausrichtung.
  • Vermeiden Sie insbesondere Tab-Ausrichtungen rechts von einem Nicht-Tab Zeichen, also alle Ausrichtungen jenseits des Zeilenanfangs (auch wenn sie Tabulatoren zur Einrückung des Zeilenanfangs verwenden).

Beachten Sie jedoch, dass Quellcode-Formatierung kein Selbstzweck ist. Bestimmte Inhalte haben ihre eigene Erfordernis nach Whitespace:

Performance-Optimierung[Bearbeiten]

  • Vermeiden Sie JavaScript-Code in HTML-Seiten, lagern sie den Code in externe Ressourcen aus (Stichwort: Unobtrusive JavaScript).
  • Binden Sie CSS und JavaScript als externe Ressourcen ein.
  • Vermeiden Sie Inline-CSS, außer bei begründeten Ausnahmen.
  • Vermeiden Sie Eventhandler-Attribute. Minimieren Sie, wenn es nicht anders geht, den Code auf das absolut Notwendige.
  • Optimieren Sie die Zahl der eingebundenen Ressourcen.
  • Binden Sie Scripte als letztes im body-Element ein. Dadurch wird das Dokument dargestellt und gestylt, bevor JS-Aktionen starten.


Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

  • woodshed productions: Der Suchmaschinen-Robot und der Webdesigner
    Ein etwas älterer Artikel, der die Wichtigkeit von Semantik anhand eines fiktiven Dialogs zwischen einem Webdesigner und einem Suchmaschinen-Robot veranschaulicht.
  • Heydon Pickering: Reinventing The Hyperlink
    Zeigt, wie aufwändig es ist, ein vorhandenes Element in HTML mit JavaScript und CSS mit allen Funktionen nachzubauen. Bitte nicht nachmachen ;-)