CMSBlog

Zuerst einmal frage ich mich immer wieder, was wirklich semantisch richtige Inhalte für eine Definitionsliste sind. Das W3C gibt als Beispiel eine Person mit der dazu gehörigen Aussage an. Ist der Name noch eine Definition? Oder im FAQ, sind die Fragen eine Definition? Als eindeutige Anwendung fallen mir dabei Begriffserklärungen ein, oder Kontaktdaten.

Ok, hier soll es aber um Formulare gehen. Da habe ich im Normalfall eine Beschreibung – also ein Label – für das Eingabefeld und das Eingabefeld selbst. Ein Label ist eine Definition eines Elements, insofern würde ich schon sagen, dass eine Definitionsliste auf Formularelemente angewandt werden kann. Aber umgekehrt, als wie es bisher genutzt wird! Denn dann ist das Eingabeelement der Definition Term (DT) und das Label Definition Data (DD).

Nun würde ich selbst nie auf die Idee kommen, Formulare in Definitionslisten zu packen. Es ist einfach zu unpraktisch bei der Formatierung. Es scheint aber modern zu sein …

HTML und XHTML, Semantik | Keine Kommentare

Heftige Kritik wurde die Tage an WHATWG und der Umsetzung von HTML 5 laut. Bemängelt wird vor allem die mangelnde demokratische Struktur und der Umgang mit Barrierefreiheit. Einfach für Alle hat dazu einige Links zusammengestellt.

Aus meiner Sicht ein Problem, das auch XHTML 2 betrifft. Statt in kleinen Schritten neue HTML-Versionen zu verfassen und, die auch kurzfristig in neuen Browserversionen verfügbar sind, wurde mit HTML 5 der große Wurf versucht. Wenn nach jahrelanger Arbeit kein Feedback aus der Praxis kommt, ist klar, dass Frust aufkommt.

Barrierefrei, HTML und XHTML, Semantik | 2 Kommentare

Mit diesem kleinen Kursus werden die Grundlagen erklärt, wie eine Liste in eine chicke Navigation umgewandelt werden kann. CSS für Listen.

CSS, Einsteigerkurs, HTML und XHTML, Semantik | Keine Kommentare

<abbr> bedeutet abbrivation, also Abkürzung. Normalerweise wird dieser Tag also für z.B., etc., usw. verwendet (wir verwenden <arcronym> wegen dem IE ) . Die ausgeschriebene Fassung der Abkürzung steht dann im title-Attribut.

Microformate nutzen fleißig <abbr>, um bestimmte Zusammenhänge festzulegen. Definiert ist das Format in den abbr-design-pattern und datetime-design-pattern. Dabei kommt es häufiger vor, dass weder der Inhalt des Tags eine Abkürzung noch der Inhalt des title-Attributs eine Langfassung ist. Da title durch Browser angezeigt wird, kann das zu Irritationen führen, und auch der eine oder andere Screenreader dürfte nicht richtige vorlesen. Und es ist sicher auch nicht im Sinne des Erfinders, diesen Tag derartig umzunutzen.

<abbr> wurde gewählt, weil es mit dem gewünschten Tag <object> Probleme bereitete. Das gleiche gilt für <dfn>. Als einen gangbaren Weg sehe ich, <abbr> ohne Textinhalt anzubieten. Leere sematische Tags sind zwar auch nicht besonders sinnvoll, aber immer noch besser als eine falsche Anwendung.

HTML und XHTML, Microformats, Semantik | Keine Kommentare

Um eine barrierefreie Seite zu erstellen braucht es nicht viel. Wer ein paar Grundregeln einhält, der schafft es auch. Folgender Aufbau soll verdeutlichen, wie einfach das eigendlich ist. Und wer so eine Seite mal mit seinem Handy aufgerufen hat, der weiß, dass nicht nur Blinde was davon haben.

Seitentitel am Anfang

Damit die Besucher wissen, auf welcher Seite sie sich befinden, kommt als erster Textinhalt ein Seitentitel in einen H1-Tag. Das kann auch ein Bild sein mit einem entsprechenden ALT-Text.

Sprungmarken

Sinnvoll sind Sprungmarken zum Inhalt, zur Navigation und zur Suche. Folgt nach dem Sprungmarken kein zusätzlicher Text mehr, genügt die Sprungmarke zum Seiteninhalt.

Suche

Soweit sie vorhanden ist, folgt sie am besten nach den Sprungmarken.

Navigation

Eine ein- oder mehrteilige Navigation. Mehrteilige Navigationselemente können mit Überschriften voneinander getrennt werden (H2 bis H6, da H1 nur für den Titel verwendet wird).

Zusätzlicher Text vor dem Inhalt

Steht zwischen Navigation und Inhalt weiterer Text (auch ALT-Texte für Bilder), muss er mit Strukturelementen wie Überschriften deutlich von der Navigation getrennt werden.

Inhalt

Der Inhalt ist der zweite Hauptabschnitt nach der Navigation, er beginnt also mit H2.

Weiterer Text, Fußzeile

Dieser dritte Abschnitt, soweit vorhanden, sollte ebenfalls von Inhalt mit einer H2-Überschrift getrennt werden. Wenn in dem Abschnitt Zusatzinfos für den Inhalt stehen, wird er mit h3 dem Inhalt zugeordnet.

Struktur als HTML-Code

Die folgende Struktur kann natürlich noch ergänzt werden mit DIV-Containern für die Gestaltung.

<h1>Titel</h1>
<ul>
<li><a href="#inhalt">Zum Inhalt</a></li>
<li>(Suchformular)</li>
</ul>

<h2>Navigation</h2>
<ul>(Liste(n) mit den Links innerhalb der Seite)</ul>

<h2>Weiterer Text</h2>
<p>... Text ...</p>

<h2>Inhalt</h2>
<p>... Text ...</p>
<ul>(Liste(n))</ul>

<h2>Infos</h2>
<p>... Text ...</p>
<ul>(Liste(n))</ul>

<p>Fußzeile</p>
<ul>(Liste(n) in der Fußzeile)</ul>

Barrierefrei, Einsteigerkurs, HTML und XHTML, Semantik | Keine Kommentare

Früher, in den Achtzigern, war das noch einfach. Es gab kein Internet, kein Handy und keine anderen Computernetze für das Fußvolk. Adressen kannte man entweder oder sie wurden in kleine Büchlein geschrieben. In Zeltlagern soll das teilweise noch erhalten geblieben sein.

Heute haben wir unsere diversen Emailadressen, unsere Handy-, Fax-, ICQ- und Wasauchimmernummern, unsere IP- und MAC-Adressen oder gar einen GUID. Und diese Adressen mal getauscht, mal verborgen werden. Es wird also kompliziert.

Drauf gekommen bin ich auf das Thema, weil ich gerade eine Kontaktdatenbank plane. Mit den politischen Diskussionen um mehr Überwachung erhalten die Austauschformate sicher wieder neue Relevanz.

Inhalt

• Wie wird ausgetauscht?
• Formate für den Druck und die Darstellung: Excel, PDF, OpenOffice, Datenbanken
• Austauschformate: vCard, hCard, XML/RDF, LDIF, CSV
• Datenschutz
• Nutzen und Gefahren

(weiterlesen…)

Microformats, Programmierung, CSS, HTML, Semantik | Keine Kommentare

Das ist eine alte Streitfrage. Soll nun eine Definintionsliste verwendet werden? Oder eine Tabelle? Was gäbe es noch?

Eine Definitionsliste zeichnet Definitionen und deren Beschreibungen aus. Das ist bei Bildunterschriften nur in seltenen Fällen der Fall. Eine Tabelle macht ebenfalls wenig Sinn. Wer eine ausführliche Bildutnerschrift setzt und das Bild nicht verlinkt, dann braucht das Bild keinen Alt-Text und textlich gesehen ist dann eine Tabellenzelle leer.

Sicher sind auch schon einige auf geordnete oder ungeordnete Listen gekommen. Seit der Entdeckung der Listen vor ein paar Jahren wird ja inzwischen fast alles gelistet.
(weiterlesen…)

HTML und XHTML, Microformats, Semantik | 3 Kommentare