Die wichtigsten HTML-Attribute: class, id, style

Globale HTML-Attribute für CSS

Die meistgenutzten HTML-Attribute richten sich an die Darstellung der Elemente und an Skripte:

▶ class	CSS-Eigenschaften aus der CSS-Datei oder einem style-Element
▶ id	identifiziert ein HTML-Element im Dokument eindeutig.
▶ style	CSS im style-Attribut für dieses spezielle HTML-Element

class-Attribut

Alle HTML-Elemente außer base, basefont, head, html, meta, param, script, style, title

class transportiert CSS-Eigenschaften zu einem HTML-Element und weist dem Element einen CSS-Klassen-Selektor zu.

 <style type="text/css"> 
 .rot { color: red; } 
 </style> 
 ... 
 <p class="rot"> Der HTML-Code in diesem Beispiel ist rot. </p>

⇪

HTML id-Attribut

Alle Tags außer base, head, html, meta, script, style, title

id (Identifier) weist einem Tag einen Namen zu. id-Attribute werden als Ziel für CSS-Eigenschaften, interne Links innerhalb einer Seite und zur eindeutigen Identifizierung eines HTML-Elements in Javascript verwendet.

<button type="button" id="littleBox">Klick!</button>
              …
<script>
let littleBox = document.getElementById('littleBox');
littleBox.onclick = function() {
   document.getElementById("demobox").classList.toggle("showbox");
}
</script>

⇪

style-Attribut

Alle Tags außer base, basefont, head, html, meta, param, script, style, title

style erzeugt CSS-Inlinestile innerhalb eines HTML-Tags, um die Darstellung des HTML-Elements zu ändern oder um Werte der globalen CSS-Datei an einer Stelle zu überschreiben.

<h2 style="border-bottom: 2px solid sivler">

Das Attribut style darf nicht mit dem <style>-Tag verwechselt werden. Das HTML style-Tag wird im head-Tag des HTML-Dokuments benutzt, um einer HTML-Seite globale Stile zuzuweisen oder CSS-Regeln aus der CSS-Datei zu importieren.

⇪

href – Verweis auf eine URL

a-Element, base-Element

Das href-Attribut nimmt eine URL – eine Adresse – auf. Wenn ein a-Element kein href-Attribut enthält, ist es kein Link.

Absolute URL – verweist auf eine andere Webseite, z.B. https://www.mediaevent.de/css/
Relative URL – verweist auf eine Seite innerhalb der der Domaine, z.B. href="kernattribute.html"
Link zu einem Element mit einer id innerhalb der aktuellen Seite, z.B. href="#base"
URL für ein anderes Protokoll, z.B. mailto:
href="#top" oder href="#" verweisen auf den Anfang der aktuellen Seite

dir – Laufrichtung von Texten

Alle Tags außer base, bdo, br, iframe, param, script

Das HTML dir-Attribut gibt die Richtung des Textes an. Dazu passt das Kernattribut lang, das die verwendete Sprache definiert. Die Angabe der Sprache durch das Attribut lang reicht aber alleine nicht aus, um auch die Richtung des Textflusses zu steuern.

Die folgenden Werte können verwendet werden:

dir="ltr" ltr (Vorgabe) und setzt den Textfluss von links nach rechts.
dir="rtl" rtl Textfluss im Browser von rechts nach links.

<html dir="rtl" lang="he">
<body> 
  hier wird ein Text eingesetzt, 
  der von rechts nach links läuft
  …
</body>
</html>

Wenn das dir-Attribut im html-Tag des HTML-Dokuments angegeben ist, wird es auf das gesamte Dokument angewandt. In allen anderen Tags wirkt sich dir ausschließlich auf die Texte innerhalb des jeweiligen Tags aus. Beim <table>-Tag wird die erste Spalte der Tabelle auf der rechten Seite liegen und weitere Spalten werden sich zur linken Seite hin anschließen.

Dieser Text läuft mit dir="rtl" von rechts nach links.

HTML dir funktioniert nicht wie die Ausrichtung durch die CSS-Eigenschaft text-align: Der Punkt liegt auf der linken Seite vor dem Text.

⇪

Attribute zur Benutzer-Unterstützung

Attribute wie accesskey und tabindex unterstützen den Besucher bzw. Benutzer.

role	Aufgabe des Elements
accesskey	Shortkey oder Tastaturkürzel für den Zugriff auf ein Element
tabindex	Reihenfolge bei der Navigation mit der Tabulator-Taste.
spellcheck	Rechtschreibprüfung durchführen
translate	Ob das Element übersetzt werden soll oder nicht
hidden	Der Inhalt ist momentan nicht relevant und verborgen
dir	definiert Sprache und Laufrichtung von Texten.
lang	definiert die Sprache und Laufrichtung von Texten.
title	setzt zusätzliche Informationen als Tooltip

Früher konnten Meta-Informationen zur Seite nur über Meta-Tags im Head-Element notiert werden.

itemscope, itemid, itemprop, itemref, itemtype

Mikroformate, z.B. in der von schema.org definieren Syntax.

Das name-Attribut identifiziert Eingaben gegenüber Anwendungen auf dem Server.

name	heute nur noch für Formularfelder eingesetzt

accesskey

Das Tastaturkürzel, mit dem der Benutzer direkt zu einem Bereich der Seite springen kann, weicht in den verschiedenen Betriebssystemen und Browsern leicht voneinander ab.

<a href="#role" accesskey="r">role</a>
<a href="#role" accesskey="r">role</a>
<a href="#style" accesskey="s">style</a>

Unter Windows ist es [alt] zusammen mit dem festgelegten Zeichen, auf dem Mac [ctrl][alt], In Firefox Windows und Unix [alt][shift].

Benutzer müssen über die Existenz der accesskeys und der jeweiligen Shortcodes unterrichtet werden.

⇪

HTML lang

Alle Tags außer base, br, iframe, param, script

lang definiert die Basissprache für den Text und die Zeichen einer Webseite.

Sprachen werden durch einen Code aus zwei Buchstaben zugewiesen, z.B. "en" für Englisch und "el" für Griechisch. Ein oder mehrere Werte können durch einen Bindestrich angehängt werden, um eine regionale oder ethnische Ausprägung der Sprache zu deklarieren, z.B. "en-us" für US-Englisch.

<span lang="el"> hier wird ein Text in einer fremden Sprache eingesetzt </span>

Und wenn der Text in keiner Sprache ist, sondern lange Artikelnummern oder Blindtext? Selbst für keine Sprache gibt es einen Language Code bei IANA:

<span lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>

Type: language
Subtag: zxx
Description: No linguistic content

⇪

role="Aufgabe"

Die Accessible Rich Internet Applications Suite (ARIA, auch als Landmarks bezeichnet) steuert das Attribut role zu, das in vielen Browsern bereits funktioniert. Wenn nicht, dann richtet role auch nichts an.

Diese role-Attribute werden in die relevanten HTML-Tags gesetzt:

banner
complementary
contentinfo
form
main
navigation
search

Diese role-Attribute beschreiben die Struktur der Seite:

article
columnheader
definition
directory
document
group
heading
img
list
listitem
math
note
presentation
region
row
rowheader
separator
toolbar

Mehr bei WAI-ARIA Overview

<hr role="separator">

In HTML-Elementen wie nav oder aside ist das role-Attribut überflüssig. Das nav-Element trägt die Rolle navigation bereits in sich, header braucht kein zusätzliches role="heading", aside braucht kein role="complementary":

<nav role="navigation">
<aside role="complementary">

Erste Regel für die Benutzung von ARIA:

Wenn ein natives HTML-Element oder -Attribut mit der Bedeutung und dem Verhalten des ARIA-Attributs existiert, das HTML-Element anstelle von role="[ARIA]" benutzt werden.

Einige role-Attribute sollten nur einmal auf der Seite vorkommen – so z.B. banner und contentinfo. Wir können also mehrere header-Elemente pro Seite aufführen, aber nur einem Header sollte die Rolle banner zugewiesen werden.

⇪

title-Attribut

Alle Tags außer base, basefont, head, html, meta, param, script, style, title

HTML title weist einem HTML-Tag einen kurzen Text zu und wird vom Browser als Tooltip benutzt. Die Browser zeigen ein kleines Fenster mit einem Hilfetext, wenn der Mauszeiger über dem HTML-Element liegt. Innerhalb der Zeichenkette können HTML-Zeichen benutzt werden – 
 z.B. erzeugen einen Textumbruch bei der Darstellung.

Das title-Attribut darf nicht mit dem <title>-Tag im Header der Seite verwechselt werden, der einer HTML-Seite einen Titel für die Browserleiste zuweist.

<a href="title.html" 
   title="Extern: Mehr zum title-Tag im Kopf des Dokuments">
   title • Titel des Dokuments</a>

Das title-Attribut sollte nicht denselben Text haben wie der Inhalt des HTML-Tags – die Wiederholung bringt weder Besuchern noch den Suchmaschinen einen Informationsgewinn, sondern ist sinnlose Last für die Ladezeit der Seite.

Davon abgesehen ist es überhaupt eine Frage, was ein Title-Attribut bringt. Auf Touchscreens wird es nicht angezeigt. Auf dem Desktop-Monitor wird der Wert des title-Attributs zwar angezeigt, wenn die Maus kurze Zeit über dem Element hovert, bringt aber selten einen erkennbaren Mehrwert für den Benutzer.

⇪

name-Attribut von Formularfeldern

Vor HTML5 gehörte auch das name-Attribut zu den Attributen, die in den meisten HTML-Tags eingesetzt werden durfen – nämlich wenn das HTML-Element das Sprungziel für einen internen Link – einen Ankerlink – war.

Jetzt beschränkt sich das name-Attribut auf Elemente von Formularen und richtet sich an die verarbeitende Anwendung auf dem Server, z.B. ein PHP-Programm, dem die Eingaben aus Formularfelder über $_GET oder $_POST als name / value-Paar übermittelt werden.

<input type="text" name="text" value="">

⇪

tabindex

tabindex legt fest, in welcher Reihenfolge Elemente bei einer Navigation mit der Tastatur (und zwar mit der Tabulator-Taste) angesteuert oder fokussiert werden. Diese Navigation ist unabhängig von der Reihenfolge der Elemente im HTML und wird auch durch eine Positionierung mit CSS nicht beeinflusst.

Mit tabindex="0" ist ein Element fokussierbar und wird mit der Tabulator-Taste in der natürlichen Reihenfolge der Elemente erreicht.
Mit tabindex="-1" ist ein Element fokussierbar, aber soll beim Drücken der Tabulator-Taste nicht erreicht werden.

Größere Werte als 0 sind nicht empfehlenswert, denn sie führen zu Sprüngen, die der Benutzer nicht nachvollziehen kann.

Formulare: input-Attribute für Eingabefelder

Viele gute Hinweise von WordPress, wie eine Seite barrierefrei gestaltet werden kann: https://make.wordpress.org/accessibility/handbook/best-practices/quick-start-guide/

⇪

Attribute für Javascript

class, id und style können in nahezu jedem HTML-Element innerhalb des body-Elements eingesetzt werden. Dasselbe gilt für HTML-Attribute, die in erster Linie für Javascript gedacht sind.

contenteditable	Benutzer kann den Inhalt ändern
contextmenu	Kontextmenü eines Elements, das sich mit einem Rechtsklick öffnen soll
data-Attribut	Ein eigenes Attribut für individuelle Javascript-Anwendungen.
draggable	Benutzer kann das Element ziehen.
dropzone	Ziel eines mit draggable gezogenen Elements.
Event Handler	onclick, onsubmit, onput … Javascript Event Handler sind immer noch valide Attribute, auch wenn sie kaum noch benutzt werden.