Vom Reinen, Wahren, Guten - HTML und CSS.

Peter Seliger

Entwickler

Barrierearm mit semantisch korrektem HTML.

Eine Standortbestimmung aus der HTML-Perspektive.

Was ist »semantisch korrektes HTML«?

• HTML ist eine Auszeichnungssprache.
• Jedes Sprachelement gibt Dingen eine bestimmte Bedeutung, indem es diese bezeichnet.
• Werden die Elemente entsprechend ihrer Bedeutung verwendet, spricht man auch von semantisch korrektem HTML.

Barrierearm mit semantisch korrektem HTML.

Eine Standortbestimmung aus der HTML-Perspektive.

Semantik als breite Zufahrtsstraße.

• Geregelte Zuordnungen schaffen Struktur.
• Geordnete Informationen sind schneller erfassbar als unstrukturierte Inhalte und deshalb sowohl für den Menschen als auch für Maschinen leichter zugänglich.

Barrierearm mit semantisch korrektem HTML.

Eine Standortbestimmung aus der HTML-Perspektive.

Semantik als breite Zufahrtsstraße.

• herausfordernd ließe sich demnach behaupten:

  Semantisch korrekte Auszeichnung (»Markup«) allein sollte ausreichen, um Zugänglichkeit im WWW (»Web-Accessibility«) zu gewährleisten.

»Aussagekräftiges Markup«

Sprich präzise! Der Grundwortschatz.

Um sich verständlich auszudrücken, bedarf es nur weniger Vokabeln.
Recht gut *sprechen* lässt es sich schon mit:

• Überschriften

  die Elemente <h1 /> bis <h6 />

• Absätzen

  das <p />-Element

• geordneten Listen

  die Kombination <ol /><li />

• ungeordneten Listen

  die Kombination <ul /><li />

• Definitions-Listen

  die Kombination <dl /><dt /><dd />

»Aussagekräftiges Markup«

Betone richtig! Der Grundwortschatz.

Für eine genaue Betonung sorgen dann z.B.:

• Betonung (Emphase)

  <em />

• starke Betonung

  <strong />

• Zitate

  <cite />

• Definitionen

  <dfn />

• allg. Abkürzungen und Akronyme

  <abbr /> bzw. <acronym />

»Aussagekräftiges Markup«

• eine bildlich gesprochene Zusammenfassung:

  »Aussagekräftiges Markup« ist ein Weg, der in den letzten Jahren überwuchert war und nur neu beschritten und dabei Stück um Stück von seinen Wiederentdeckern freigeräumt und zu einer breiten Allee ausgebaut werden will.

Und wo ist jetzt das Layout?

Wer einen guten Umgangston pflegt sollte nicht mehr in Lumpen gehen.

• eine einleitende Metapher:

  CSS ist das Werkzeug der Wahl, um Inhalten eine visuell ansprechende Garderobe auf den »body« zu schneidern.

Und wo ist jetzt das Layout?

Von der passenden Kleidung für jeden Anlass.

Was wird getragen? CSS zweckmäßig anwenden.

Der Versuch grundlegende Techniken des CSS anhand des Schneiderhandwerks zu erklären:

• Die Gesamtheit aller CSS-Regeln z.B. im Standard- »StyleSheet« eines Browsers ist wie fallender Stoff, der das noch unbekleidete HTML-Dokument erstmals umhüllt.

Und wo ist jetzt das Layout?

Von der passenden Kleidung für jeden Anlass.

Was wird getragen? Relative oder absolute Größenangaben?

• Relative Größenangaben machen diesen Stoff elastisch, sodass er mehr Bewegungsfreiheit erlaubt und den Anzug bei leichter Zunahme im Gewicht nicht sofort überall kneifen lässt. Wirklich Dicken kann auch mal ein Gummizug im Hosenbund spendiert werden.
• Absolute Größenangaben sind wie maßgeschneiderte Kostüme - oft superschick, aber weder in der Bewegung noch im Gewicht irgendwelche Nachlässigkeiten verzeihend.

Und wo ist jetzt das Layout?

Von der passenden Kleidung für jeden Anlass.

Raffen, Abnähen, Aufsetzen, Schlitzen. Eingriffe in den Dokumentenfluss.

So wie fallender Stoff gezielt in Form gebracht werden kann, lassen sich auch Elemente aus dem natürlichen Dokumentenfluss herausnehmen. CSS bietet dafür einige Positionierungstechniken - u.a.:

• absolute und relative Positionierung sowie Fixierung.
• *fließende* Elemente (»float«).
• *Polsterung* (»margin«, »padding«).

»Positionierung ist alles.«

Grundlegende Anzeige- und Positionierungs-Techniken in CSS.

Grundbausteine erklären.

Die HTML-Spezifikation unterscheidet die zwei Element-Klassen »block« und »inline«. Jedes HTML-Element ist einer dieser Klassen zugeordnet und unterliegt damit - von Ausnahmen abgesehen - auch deren Verschachtelungsregeln, die stark verallgemeinert so lauten könnten:

• Inline-Elemente dürfen nur Inline-Elemente enthalten.
• Blöcke dürfen Inline-Elemente und andere Blöcke enthalten.
• Nur Block-Elemente erzeugen Absätze im Dokumentenfluss.

»Positionierung ist alles.«

Grundlegende Anzeige- und Positionierungs-Techniken in CSS.

Wirkungsweise der CSS-Eigenschaft »display« verstehen.

Für »display« ist eine Vielzahl an Werten definiert. Die bei weitem wichtigsten und in der heutigen Praxis wohl auch meistbenutzten lauten »block«, »inline« und »none«.

Diese Werte ändern die Position eines jeden Elements, die dieses im natürlichen Dokumentenfluss standardmäßig einnähme. Ausdrücklich sei darauf hingewiesen, daß die jeweilige Klassenzugehörigkeit(»inline«, »block«) des Elements keinerlei Veränderung erfährt.

»Positionierung ist alles.«

Grundlegende Anzeige- und Positionierungs-Techniken in CSS.

Werte für die CSS-Eigenschaft »position«.

Der Eigenschaft »position« können die Werte »absolute«, »relative«, »fixed« sowie der Standardwert »static«, den jedes sich im natürlichen Dokumentenfluss befindende Element automatisch mit sich führt, zugewiesen werden.

»Positionierung ist alles.«

Grundlegende Anzeige- und Positionierungs-Techniken in CSS.

Über die Relativität absoluter Positionierung.

»absolute« legt die Position eines Elements zum linken oberen Bezugspunkt des jeweils nächstgelegenen Elternelements fest, welches als erstes selbst von der Standardpositionierung (»static«) abweicht.

Die Positionierung erfolgt also durchaus relativ, wenn auch nach anderen Regeln, wie gleich zu sehen ist.

»Positionierung ist alles.«

Grundlegende Anzeige- und Positionierungs-Techniken in CSS.

Relative und fixe Positionierung.

»relative« bezieht sich auf die Position, die das Element im aktuellen Dokumentenfluss einnimmt. Weitere Positionsangaben wie z.B. »left: 1em;« oder »top: 5px;« verschieben das Element dann von dieser Normalposition um den jeweils angegebenen Wert.

»fixed« wird leider erst massentauglich, wenn Microsofts »Internet Explorer« es schafft, ein Element gemessen am Browserfenster fest zu positionieren, sodass es nicht weg-scrolled.

»Positionierung ist alles.«

Grundlegende Anzeige- und Positionierungs-Techniken in CSS.

Wirkungsweise der CSS-Eigenschaften »float« und »clear« verstehen.

»float« beeinflusst ebenfalls die Standard-Darstellung eines natürlichen Dokumentenflusses. Die Werte dieser Eigenschaft lösen aber nicht das Element selber, sondern alle ihm nachfolgenden Elemente aus deren Normalposition heraus, bis dieses Verhalten durch den Wert der Eigenschaft »clear« von einem dieser Elemente ausdrücklich zurückgesetzt wird.

Horizontale Navigationslisten sind ein typischer Anwendungsfall für »float: left;«.

»Positionierung ist alles.«

Weitere wichtige Anzeige- und Positionierungs-Techniken in CSS.

• »margin« und »padding«

  Ellenbogenfreiheit durch Innen- und Außenabstände.

• »overflow«

  Wohin mit dem Fett? Übergroße Inhalte handhaben.

Luftholen und Zurückblicken.

Am Ende des steilen Anstiegs zum Höhenweg der Web-Standards.

Ein Blick ins Gipfelbuch. Warum sich solch eine Klettertour lohnt.

Stefan Walter war schon vor uns da und hinterließ umfangreiche Einträge, die er mit diesen Worten eröffnete:

Die Vorteile von Web-Standards für Ihre Besucher, Ihre Kunden und Sie selbst!

Für offline Vorträge muß man sich der hier lokal verlinkten *geklauten* Kopie bedienen.

Danksagung und Rückweg.

• Ein Ausdrückliches Dankeschön gilt der Seilschaft, die hinter der gerade benutzten S5-Präsentation-Technik steht.
• Ein Gruß geht auch an die Redaktion der Online-Referenz SELFHTML 8.1, deren Quellen diesen Vortrag zu einem großen Teil absichern halfen.
• Nochmals erwähnen möchte ich Stefan Walter, dem mit seiner Übersetzung aus dem englischen Original »The benefits of Web Standards to your visitors, your clients and you!« eine Art deutsche Erstbesteigung gelang.

Der hier verlinkte Abstieg ist eine Erstbeschreitung führt aber zum Ausgangspunkt unserer Reise zurück.