»Usability Roundtable Hamburg«, am 02.05.2005

Peter Seliger / Entwickler

Vom Reinen, Wahren, Guten - HTML und CSS.

Der Versuch, die zum »Usability Roundtable Hamburg« gezeigte S5-Präsentation in ein Fachbuchformat zu übertragen, zeigt die Grenzen meiner eigenen CSS-Fähigkeiten, sobald Nicht-Gecko-Browser sich der Darstellung dieser Seite annehmen.

Barrierearm mit semantisch korrektem HTML.

Was ist semantisch korrektes HTML?

Standortbestimmung aus der HTML-Perspektive.

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.

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.

SELFHTML-Referenz

Elemente zur Textstrukturierung

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!

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 />

SELFHTML- Referenzen

Betone richtig!

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 />

SELFHTML-Referenz

Logische Auszeichnungen im Text

Zusammenfassung.

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.

Link ins SELFHTML Forums-Archiv

»semantisch korrektes HTML« (war: »table vs. div«)

Und wo ist jetzt das Layout?

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

Einleitende Metapher.

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

Was wird getragen? Passenden Kleidung für jeden Anlass.

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.

Alltagskleidung oder Maßgescneidertes?

Relative und 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.

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.«

Grundbausteine erklären.

Grundlegende Anzeige- und Positionierungs- Techniken in CSS.

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.

SELFHTML- Referenzen

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.

SELFHTML-Referenz

Anzeigeart bzw. Nichtanzeige ohne Platzhalter

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.

SELFHTML-Referenz

Positionsart

Ü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.

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.

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;«.

SELFHTML-Referenz

Textumfluss

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.

SELFHTML- Referenzen

Luftholen und Zurückblicken.

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

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

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!