Tastaturkürzel
Shortcuts und Programmtipps

Lotus-Software

Microsoft-Software

OpenOffice

Andere


Infos


DFÜ


Befehlszeilenparameter
und Programmtipps


Hardware


Fristenlisten


Obligatorisches


Downloads


 

 

XHTML-Tipps

Inhalt

Vorwort

Diese XHTML-Tipps dienen einer groben Übersicht über die kleinen Unterschiede zwischen HTML und XHTML. So können die gröbsten Schnitzer vermieden werden. Einige Tags werden in XHTML 1.1 nicht von HTML 4 übernommen.
Grundsätzlich implementiert XHTML 1.1 nicht uneingeschränkt HTML 4. Zu diesen depricated Tags, also abgelehnten Tags, gehören  <font>, <basefont>, <center>, <dir>, <isindex>, <menu>, <s>, <strike>, <u>.
Ein gutes Webdesign wird durch die Trennung von Inhalt und Layout, so wie es XHTML vorsieht, einfacher. Und es ist auch schon der halbe Weg zur barrierefreien Gestaltung, weswegen diese Themen in einer Frist zusammengefasst werden.
Mit gängigen Weg-Editoren ist das XHTML-konforme Design nicht einfach, das besonders grafische Editoren das Bearbeiten im Quelltext schwierig machen. Text-Editoren sind zwar einfacher, aber auch diese verwenden fast ausschließlich HTML-konforme oder gar proprietäre, also Browser-spezifische Tags. Hilfreich ist es, wenn man viele HTML-Seiten auf einen Rutsch bearbeiten kann, um so zum Beispiel die <br>-Tags in <br />-Tags zu verändern. Aber gerade das Bearbeiten von Tabellen und Grafiken ist im Quelltext mühselig. Auf der anderen Seite werden Informationen für Suchdienste besser zugänglich und die Indizierung vereinfacht.
Barrierefreien Design erlaubt es nicht nur sehbehinderten, die Seiten besser lesen zu können, sondern wird von vielen Firmen gewünscht, Seiten, die von öffentlicher Hand finanziert werden, müssen sogar per Gesetz ab dem 31. Dezember 2005 barrierefrei gestaltet sein.

Grundlegendes

Framesets vermeiden
Framesets werden nicht eingesetzt. Man kann Inhaltsverzeichnisse und Texte zum Beispiel durch die von vielen Webhostern unterstützten SSIs zusammenbasteln, siehe auch SelfHTML. Fortgeschrittenes Zusammenstellen der verschiedenen Inhalte, die man sonst in Rahmen stecken würde, kann man auch mit PHP, Perl, ASP oder Python realisieren.
Tabellen nicht als Layout-Hilfe einsetzen
Tabellen werden nicht als Layouthilfe, sondern nur für tabellarische Inhalte verwendet, da Screenreader ansonsten überfordert werden.
Tags klein schreiben
Laut XHTML-Standard werden tags ausschließlich klein geschrieben
Tags immer schließen
Alle tags müssen in XHTML geschlossen werden. Deshalb werden alle tags, die in HTML nicht geschlossen durch entsprechende Tags ersetzt:
<hr> wird zu <hr />
<br> wird zu <br />
<img …> wird zu <img … />
<b>…</b> wird durch <strong>…</strong> ersetzt.
Doctype angeben
- HTML -
Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

- XHTML -
Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Zeichenkodierung angeben
XHTML-Dateien sollen im Kopf neben der Kennzeichnung als ebensolche auch die Zeichenkodierung enthalten: <?xml version="1.0" encoding="ISO-8859-1"?> oder <?xml version="1.0" encoding="UTF-8"?>. Einige ältere Browser kommen damit aber leider nicht klar.

Fortgeschrittenes

Validatoren einsetzen
Mit Hilfe verschiedener Validatoren lässt sich die Konformität des Quelltextes überprüfen. Siehe Linkliste am Ende des Dokuments.
Akronyme kennzeichnen
Akronyme werden von Screenreadern wie zusammen geschriebene Worte behandelt. Deshalb werden diese Abkürzungen mit dem tag <acronym title="Ausgeschriebenes Akronym"> versehen. Zum Beispiel: <acronym title="Union der Sozialistischen Sowjetrepubliken">UdSSR</acronym>.
Links durchnummerieren
Links werden in der jeweiligen Seite mit der Tabulator-Taste von einem zum nächsten bewegt. Man kann diese Links, genau wie auch bei Formularen, aber in eine vorgegebene Reihenfolge bringen. Dazu dient hier wie dort das Attribut tabindex, zum Beispiel <a hef="verlinkteseite.shtm" tabindex="1">Hier und dort</a>. Ein sinnvoller Einsatz diese Attributes ist nicht nur eine Erleichterung für Sehbehinderte, sondern für jeden Betrachter einer Seite, der nicht nur mit der Maus kickt, sondern gerne auch die Tastatur benutzt.
Tabellen betiteln
Der Titel einer Tabelle steht in caption-Tags vor dem ersten td- oder th-Tag und wird im allgemeinen über die Tabelle geschrieben. Im Style-Sheet kann die Position entsprechen verändert werden.
Tabellen-Inhalte differenzieren
In Tabellen kann eine Zelle Daten oder eine Überschrift enthalten. Für Überschriften ist das Tag <th>, Für Daten das Tag <th> zuständig. Dadurch können auch hier zentrale Formate in den CSS-Dateien erstellt werden.
Abkürzungen in Tabellen kennzeichnen
mit Hilfe des abbr-Attributes kann man Abkürzungen in th-Tabellenzellen ausgeschrieben eintragen, damit ein Screen-Reader nicht die Abkürzungen vorließt, z.B.: <th abbr="Hamburg">HH</th>

 

Umgang mit Bildern

Bilder immer mit alt-Tag versehen
Bilder werden immer mit alt-Tag versehen, es wird immer ein title-Tag gesetzt und bei wichtigen Bildern wird longdesc verwendet. Die Benutzung des  alt-Tags ist in XHTML vorgeschrieben, title- und longdesc-Tags dienen der Übersicht und sind bei Benutzung eines Screenreaders sinnvoll. Die Unterschiede zwischen den einzelnen Attributen stehen hier.


 


Linkliste Validatoren:


verwendete Abkürzungen

| [17. Juli 2008]