HTML Erste Schritte – Lektion 8 – Universelle Attribute von Tags
Wir haben bereits besprochen, dass verschiedene Tags eigene Attribute haben. Jetzt wollen wir darüber sprechen, dass verschiedene Tags auch gemeinsame, universelle Attribute besitzen. Schauen wir uns die bekanntesten davon an.
Attribut id
Das Attribut id gibt einem Tag einen eindeutigen Namen. Diese Namen dürfen nicht mehrfach vergeben werden, da sonst Probleme bei der Arbeit mit jQuery oder Javascript auftreten können. Hier einige Beispiele zur Nutzung von id:
... <ul id="menu1"> <li id="item1">lorem</li> <li id="item2">ipsum</li> <li id="item3">привет</li> <li id="item4">мир</li> </ul> ... <div id="header"></div>
Mit id kann man CSS-Stile gezielt für einzelne Blöcke, Menüs, Menüpunkte oder andere Tags festlegen. Außerdem werden ids in Javascript (jQuery) verwendet.
Attribut class
Das Attribut class kennzeichnet die Zugehörigkeit zu einer Klasse von Tags. Wie bei id kann man damit CSS-Stile festlegen, die auf alle Tags dieser Klasse angewendet werden. Während id einzigartig ist, kann die gleiche Klasse vielen Tags zugewiesen werden:
<ul id="menu1"> <li class="item">lorem</li> <li class="item">ipsum</li> <li class="item">привет</li> <li class="item">мир</li> </ul>
Attribut style
Das Attribut style dient dazu, CSS-Stile direkt im Tag zu schreiben. Sie müssen sich jetzt nicht allzu sehr mit den Details beschäftigen, wir werden es im CSS-Lehrbuch ausführlich behandeln. Hier nur ein paar verständliche Beispiele:
... <div style="width: 200px; height: 100px; background: #dddddd"> Block </div> ... <p style="font-size: 14px; color: #333333"> Text </p>
Das erste Beispiel erzeugt einen Block mit 200 Pixel Breite, 100 Pixel Höhe und Hintergrundfarbe #dddddd (ein helles Grau). Das zweite Beispiel zeigt einen Absatz mit Schriftgröße 14 Pixel und Farbe #333333 (dunkelgrau).
Attribut title
Es wird für einen Tooltip verwendet, der angezeigt wird, wenn man mit der Maus über ein Element fährt:
... <img src="./images/image.jpg" alt="photo" title="das bin ich" /> ... <a href="html2.html" title="meine Seite">Link</a> ... <h2 title="Überschrift">Hallo, Welt!</h2>
Natürlich gibt es noch weitere universelle Attribute: accesskey, contenteditable, contextmenu, dir, hidden, lang, spellcheck, tabindex. Mit diesen werden Sie später beim Erstellen mehrsprachiger Seiten zu tun bekommen. Für den Anfang genügt es, die wichtigsten universellen Attribute zu kennen.