Guru 2.0 › 3.0

Heute arbeiten die meisten webDesigner mit den üblichen Tags wie DIV, A, P, TABLE, SPAN und so fort. Aber HTML hat viel mehr zu bieten als dieses “Standard-Tags”. Es gibt einige eigentlich nie oder selten benutzte Tags, welche in der einen oder anderen Situation nützlich sein können.Es ist ja nie zu spät diese einzusetzen und über die eigenen Grenzen hinauszugehen. Legen wir also los.

Aber warum sollten wir diese Tags überhaupt einsetzen? Dafür gibt es mehrere Gründe:

1. valides HTML
2. bessere Usability
3. barrierefreier Zugang
4. mehr Layoutmöglichkeiten

Es spricht also einiges dafür diese Tags zu verwenden und weiterzulesen.

1. <cite> … </cite>

Jeder von uns kennt <blockquote>. Wir brauchen in für Kommentare, für Zitate oder einfach zum Einrücken. Aber wie sieht es mit seinem kleinen Bruder <cite> aus? Dieser Tag kommt aus der Urzeit von HTML und wurde in wissenschaftlichen Texten wirklich für Zitate benutzt. Der Tag ist ein inline-Tag, er bricht also nicht um, sondern kann im Fließtext benutzt werden. Die Auszeichnung des Textes ist üblicherweise kursiv. Das kann aber mit ein wenig css jederzeit geändert werden.

Der cite-Tag ist wirklich praktisch, wenn man auf andere Texte oder Seiten referenziert. Da man damit eine eigene Layout-Vorschrift im css anwenden kann. Ausserdem wird er von allen Browsern unterstützt.

Beispiel für <cite>:

Hier steht normaler Text. Hier steht ein Zitat. Hier ist wieder ein normaler Text.

2. <optgroup>…</optgroup>

Dies ist eigentlich ein Gruppierungselement. Wie oft haben wir uns nicht bei Auswahllisten eine nicht anklickbare Überschrift zwischen den Elementen gewünscht, damit wir ein wenig Ordnung reinbringen? Mit diesem Tag ist es möglich.

Beispiel für <optgroup>:

<label for="tags">HTML-Tags</label>  
<select id="tags" multiple="65535" name="tags" size="0">
 <optgroup label="Standard">
   <option value="P">p - Paragraph</option>
   <option value="A">a - Anchor</option>
   <option value="DIV">div - Division</option>
 </optgroup>
 <optgroup label="Vergessen">
   <option value="CITE">cite - Citation</option>
   <option value="OPTGROUP">optgroup - Optiongroup</option>
  </optgroup>
</select>

Und so sieht es aus:
HTML-Tags

3. <acronym>…</acronym>

Dieser Tag kann mit “Abkürzung” übersetzt werden. Dadurch hat man die Möglichkeit Texte (Abkürzung) leichter zu erklären. Fährt der Benutzer mit der Maus über den Text zwischen den acronym-Tags, wird ein kleiner Hilfetext (ToolTip) eingeblendet.

Beispiel für <acronym>:

Es werden immer wieder nur die Standard <acronym title="HTML steht für Hypertext Markup Language">
HTML-Tags</acronym> verwendet.

Und so sieht es aus:

Es werden immer wieder nur die Standard HTML-Tags verwendet.

4. <address>…</address>

Dieser Tag ist ein wenig eigenartig, aber nicht minder nützlich. Damit kann man wie mit cite oder acronym Semantik in HTML einführen. Mit dem address-Tag kann man eine Adresse einer Person oder einer Firma auszeichnen. Auch dieser Tag setzt den Inhalt automatisch kursiv. aber für was gibt es css?

Beispiel für <address>:

<address>
Max Musterman
Musterweg 13a
A 5020 Salzburg
</address>

Und so sieht es aus:

5. <ins>…</ins> und <del>…<ins>

Dies Tags werden üblicherweise gemeinsam benutzt, obwohl das nicht zwingend ist. Sie sind besonders interessant, wenn man Überarbeitungen eines Textes zeigen will. Den der Text zwischen den ins-Tags wird mit einer Unterstreichung hervorgehoben. Das Gegenteil passiert mit dem Text zwischen den del-Tags. Er wird durchgestrichen.

Beispiel für <ins> und <del>:

Wir verwenden <del>ab und zu</del> <ins>immer</ins> die
Tags ins (insertion) und del (delete) um unsere Texte besser
darzustellen.

Und so sieht es aus:

Wir verwenden ab und zu immer die Tags ins (insertion) und del (delete).

6. <label>…</label>

Gerade bei den Tags für Formulare werden nur die notwendigsten verwendet. Warum ist mir schleierhaft. Aber der wirklich unterschätzte Tag ist label. Mit diesem Tag ist es möglich ein Formularelement mit einer Beschriftung zu versehen. Verwendet man zusätzlich das for-Attribut im öffnenden label-Tag wird das gesamte Element anklickbar. Dadurch wird die semantische Auszeichnung des Dokument besser und auch die Usability steigert sich.

Beispiel für <label>:

<label for="uName">Benutzername</label>  
<input id="uName" type="text" />

Und so sieht es aus:
Einfach auf das Wort „Benutzername“ klicken!
Benutzername

7. <fieldset>…</fieldset> und <legend>…</legend>

Mit diesem Attribut kann man Felder innerhalb eines Formulars logisch gruppieren. Standardmäßig zieht dieser Tag einen Rahmen um die enthaltenen Elemente und kann zusätzlich ein legend-Element zur genaueren Beschreibung enthalten.

Beispiel für <fieldset>:

<form>
   Eine kleine Frage! 
  <fieldset style="padding-left:10px">
    <legend style="padding: 0px 10px 0px 10px">Wirst Du ab jetzt diese Tags verwenden?</legend>  
 
<input id="optJa" name="optFrage" type="radio" value="ja" />
      <label for="optJa">Ja</label>
 
 
<input id="optNein" name="optFrage" type="radio" value="nein" />
      <label for="optNein">Nein</label>
 
 
<input id="optJein" name="optFrage" type="radio" value="jein" />
      <label for="optJein">Vielleicht</label>
 
 
  </fieldset>
</form>

Und so sieht es aus:

8. <abbr>…</abbr>

Der abbr-Tag (abbrevation, Abkürzung) wird ähnlich wie der acronym-Tag verwendet. Der Unterschied zwischen den beiden ist eigentlich gering. Ein Akronym ist eine Abkürzung welche als eigenes Wort gesprochen wird (zum Beispiel TFT), eine Abkürzung ist eine Buchstabenkombination, welche lang ausgesprochen wird (zum Beispiel DI für Diplomingenieur). Der Unterschied für normale Browser ist nicht merkbar, aber bei Screenreadern, bei Rechtschreibprüfungen oder Suchmaschinen ist er wichtig.

Beispiel für <abbr>:

Sehr geehrter Herr <abbr title="Diplomingenieur">DI</abbr> Guru 2.0!

Und so sieht es aus:

Sehr geehrter Herr DI Guru 2.0!

9. <wbr />

Auf den wbr-Tag (word break, weicher Zeilenumbruch) sind sicher die wenigsten von Euch bisher gestossen. Er wird eigentlich so gut wie nie benutzt. Er wird dort gesetzt wo ein Zeilenumbruch sinnvoll wäre, aber nur wenn das Zeilenende erreicht wird. Dies ist ideal wenn der Browser die Zeilenumbrüche setzt und man im Layout horizontale Scrollbalken vermeiden will. Da sind wir aber auch gleich beim Problem: Der Tag und seine Ersatz-Entitäten &#8203; bzw. &shy; werden nicht von allen Browsern unterstützt.
Das ganze sieht dann so aus:

• <wbr>
  • Safari 3.0, Win: buggy
  • Opera 9.5: nein
• &#8203;
  • IE 5 und 6: buggy
• &shy;
  • FireFox 2+: nein

Die schlaueste Lösung ist daher auf &#8203; auszuweichen, da diese Entität von allen wichtigen Browsern unterstützt wird und der IE 6 über kurz oder lang verschwinden wird. Für weitere Infos könnt Ihr auch bei QuirksMode nachlesen.
Eine andere Lösung geht über css-Stile. Man verwendet in einem css den Pseudo-Selektor :after. Aber auch das ist nicht die sauberste Lösung wie man bei Gogjomo nachlesen kann.

Beispiel für <wbr />:

Hier steht ein sehr langer Text, der sich mit den
Zeilenumbrüchen anpassen soll.
Unglücklicherweise ist das aber nicht Cross-
Browserkompatibel. Daher muss man dafür
auch irgendwelche Kunstgriffe verwenden.

Und so sieht es aus:

Hier steht ein sehr langer Text, der sich mit den Zeilenumbrüchen anpassen soll. Unglücklicherweise ist das aber nicht Cross-Browserkompatibel. Daher muss man dafür auch irgendwelche Kunstgriffe verwenden.

10. <dl><dt>…</dt><dd>…</dd></dl>

Die Definitionsliste ist auch eine oft unterschätzte Tag-Kombination. Sie ermöglicht mit dem dl-Tag (definition list) eine Liste zu beginnen. Der dt-Tag (definition [list] term) legt den Begriff fest und der dd-Tag (definition [list] definition) definiert den Term genauer. Durch Verschachtelung lassen sich damit auch baumartige Strukturen abbilden. Aber viel interessanter ist der Einsatz für Bilder mit Beschriftungen. Mit ein paar css-Definition dazu lassen sich so optisch ansprechende Bild-Beschriftungs-Kombinationen erzeugen.

Beispiel für <dl> <dt> <dt>:

<dl class="imageleft">
<dt>
    <img title="Ein Bild" src="bild.gif" alt="Ein Bild" />
  </dt>
<dd>Abbildung 1.1</dd>
</dl>

/* Bild links ausrichten */
dl.imageleft {
  width: 210px;
  text-align: center;
  float: left;
  vertical-align: top;
}
.imageleft dt img {
  width: 200px;
}
.imageleft dd {
  font-weight: bold;
  font-size:1em;
  color: #000000;
  vertical-align: top;
}
/* Bild rechts ausrichten */
dl.imageright {
  width: 210px;
  text-align: center;
  float: right;
  vertical-align: top;
}
.imageright dt img {
  width: 200px;
}
.imageright dt {
  font-weight: bold;
  font-size:1em;
  color: #000000;
  vertical-align: top;
}

11. <dfn>…</dfn>

Der dfn-Tag (definition, Definition) führt Fachausdrücke oder Spezialwörter beim Anwender ein. Die Hervorhebung ist auch wieder ein kurisv gesetzter Text. Aber mit css ist das leicht zu ändern. Der Text im title-Attribut des Tags wird bei MouseOver wieder als kleines Fenster angezeigt.

Beispiel für <dfn>:

Es werden immer wieder nur die Standard
<dfn title="Tag ist ein Merker, eine Kennzeichnung">
HTML-Tags</dfn> verwendet.

Und so sieht es aus:

Es werden immer wieder nur die Standard HTML-Tags verwendet.

12. <var>…</var>

Der var-Tag (variable, Variable) wird eigentlich nur bei der Darstellung von Programmcode verwendet. Die Standarddarstellung ist kursiv und kennzeichnet eine Variable des Codes.

Beispiel für <var>:

Die Variable <var>uName </var> wird zum Ablegen
des Benutzernamens verwendet und ist vom Typ
<dfn title="Text, alphanumerische Zeichen">
string</dfn>.

Und so sieht es aus:

Die Variable uName wird zum Ablegen des Benutzernamens verwendet und ist vom Typ string.

13. <samp>…</samp>

Der samp-Tag (sample, Beispiel) wird auch bei der Darstellung von Programmcode verwendet. Die Standarddarstellung ist in einer Schrift mit fester Laufweite und zeigt eine beispielhafte Ausgabe eines Programms.

Beispiel für <samp>:

Falls die Datei nicht gefunden wurde, zeigt die
Applikation die Meldung <samp>File not found</samp>
am Bildschirm an.

Und so sieht es aus:

Falls die Datei nicht gefunden wurde, zeigt die Applikation die Meldung File not found am Bildschirm an.

14. <kbd>…</kbd>

Der kbd-Tag (Keyboard, Tastatur) wird für Benutzereingaben verwendet. Die Standarddarstellung ist in einer Schrift mit fester Laufweite und zeigt dem Benutzer an, welche Tasten er drücken soll.

Beispiel für <kbd>:

Um die angezeigte neuzuladen und den
<dfn title="Zwischenspeicher">Cache</dfn> zum umgehen,
verwenden Sie die Tasten [<kbd>STRG</kbd>]+[<kbd>R</kbd>].

Und so sieht es aus:

Um die angezeigte neuzuladen und den Cache zum umgehen, verwenden Sie die Tasten [STRG]+[R].

15. rel-Attribute

Selbstverständlich habt Ihr recht, das rel-Attribute (relative, verwandt) ist kein Tag sondern ein Attribut eines Tags. Aber trotzdem nehme ich es auf, das es gerne vergessen wird. Dieses Attribut hat zwei Anwendungsgebiete. Einerseits kennzeichnet es die “Verwandstaftsbeziehung” zwischen Dateien, wie hier gezeigt.

Andererseits kann es auch für JavaScript oder css-Anwendungen benutzt werden.

<a rel="intern" href="hilfe.html">Das ist ein interner Link</a>

Jetzt kann man mit JavaScript durch das DOM gehen und sich alle Objekte mit der Verwandschaftsbeziehung intern heraussuchen. Andererseits können auch css-Stile auf diese A-Tags angewendet werden.

a[rel="external"] {
  background: url(../images/intern.png) 100% 40% no-repeat;
  padding-right: 15px;
}

Weiterführende Links

• 10 Rare HTML-Tags You Really Should Know [EN]
• Marking External Links With CSS [EN]
• SelfHTML – Definitionsliste
• Image Captions on WebPages [EN]
• WBR [EN]
• Cross-browser invisible word-break in HTML/CSS [EN]
• The 5 Most Under-Used HTML Tags [EN]
• HTML: The Top 5 Forgotten Elements [EN]
• Web Standards Trifle [EN]
• Are You Ready For Web 3.0? [EN]
• Bulletproof HTML: 37 Steps to Perfect Markup [EN]
• HTML 4.01 Specification [EN]
• Elements of XHTML [EN]

ähnliche Posts:

• 8 Tipps für WebDesigner
• Wie schaut deine webSite aus?
• Daily Code Poem #12
• Daily Code Poem #25
• Ein wenig Dynamik mit Scriptaculous

Dieser Eintrag wurde

• am Dienstag, 24. März 2009 um 16:27 erstellt und wurde unter Hilf mir!, Tutorials zum mehr Wissen abgelegt.
• Der Post besitzt diese Tags: Auszeichnen, Barrierefreiheit, HTML, Semantik, Tags, Usability
• Du kannst alle Antworten darauf mit dem RSS 2.0 Feed verfolgen.
• Du kannst eine Antwort schreiben.
• Du kannst einen TrackBack von Deinem eigenen Blog setzen.
•  drucken

Der Artikel hat Dir geholfen?

Warum spendierst Du mir nicht einen Kaffee?