Globale HTML-Attribute

Die globalen oder universellen HTML Attribute von class, id, style, title bis lang im Überblick

Attribute enthalten zusätzliche Informationen und erweitern die Funktion und manchmal auch die Darstellung von HTML-Tags. Die globalen HTML-Attribute id, title, class, style, lang und dir können in fast allen HTML-Tags stehen.

Die HTML-Tags des head-Elements bilden eine Ausnahme – kaum eines der globalen Attribute passt zu head-Tags wie meta und link.

HTML Attribute

Alle HTML-Tags können durch Attribute im öffnenden Tag erweitert werden. Attribute sind immer ein Paar aus einem Namen und einem Wert name="value".

Neben den speziellen Attributen für bestimmte Tags (wie src="img.png" für das img-Tag oder href="myurl" für a- und base-Tags) gibt es die globalen oder universellen Attribute, die in nahezu jedem HTML-Tag eingesetzt werden können.

<img class="framed" src="myimg.png" width="600" height="400" alt="Ein Bild"> 
Attribute des img-Tags

Globale HTML-Attribute

accesskey
Shortkey oder Tastaturkürzel für den Zugriff auf ein Element
checkspell
Rechtschreibprüfung durchführen
class
CSS-Eigenschaften aus der CSS-Datei oder einem style-Tag
contenteditable
Benutzer kann den Inhalt ändern
contextmenu
Kontextmenü eines Elements, das sich mit einem Rechtsklick öffnen soll
data-*
Ein eigenes Attribut für individuelle Javascript-Anwendungen.
dir
definieren Sprache und Laufrichtung von Texten.
draggable
Benutzer kann das Element ziehen.
dropzone
Ziel eines mit draggable gezogenen Elements.
Momentan nicht relevant und verborgen
id
identifiziert ein HTML-Tag im Dokument eindeutig.
lang
definieren Sprache und Laufrichtung von Texten.
role
Aufgabe des Elements
style
CSS im style-Attribut für dieses spezielle HTML-Element
tabindex
Reihenfolge bei der Navigation mit der Tabulator-Taste.
title
setzt zusätzliche Informationen als Tooltip
translate
Ob das Element übersetzt werden soll oder nicht

Sonderlocken

itemscope, itemid, itemprop, itemref, itemtype
bilden Mikroformate, z.B. wie die von schema.org definiere Syntax. Das HTML Link-Tag und das Meta-Tag können mit einem itemprop-Attribut auch im body des Dokuments eingesetzt werden.
Event Handler
onclick, onsubmit, ontouch … Javascript Event Handler sind immer noch valide Attribute, auch wenn sie kaum noch benutzt werden.

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.

Zurück zur Liste

class-Attribut

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

class transportiert CSS-Eigenschaften zu einem Tag und weist dem Tag den Namen eines Klassenselektors zu.

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

Zurück zur Liste

contextmenu

contextmenu erzeugt ein Menü, das sich bei einem Rechtsklick mit der Maus öffnet. Der Wert muss die id eines Menü-Elements im DOM sein.

contextmenu wird nur von Firefox unterstützt und wird wahrscheinlich aus Mangel an Benutzerinteresse nicht weiterentwickelt. Auf der einen Seite gibt es keine Formatierung, die zeigt, dass ein Element ein Kontextmenü besitzt, auf der anderen Seite gibt es kein Äquivalent zum Rechtsklick auf Touch-Devices.

HTML Textelemente: details, menu, summary, dialog …

Zurück zur Liste

contenteditable

Schreib mal was

<p contenteditable="true" spellcheck="true">Schreib mal was</p>

Wird von allen modernen Browsern unterstützt.

HTML contenteditable mit Javascript localStorage speichern

Zurück zur Liste

checkspell

Schaltet die Rechtschreibprüfung für Eingabefelder ein.

Schreib mal was

<p contenteditable="true" spellcheck="true">Schreib mal was</p>

Wird von allen modernen Browsern unterstützt.

Zurück zur Liste

draggable

draggable erklärt ein Element zu Drag & Drop, damit es von einem Bereich der Seite in einen anderen gezogen werden kann. Die Angabe draggable alleine reicht nicht, sondern dazu wird noch Javascript gebraucht.

Javascript Drag and Drop

Alle modernen Browser, aber IE10 und Edge mit Einschränkungen.

Zurück zur Liste

dropzone

dropzone ist ein Bereich, auf den das draggable-Element gezogen werden kann und ist ein einfaches Element mit etwas CSS, um es innerhalb der Seite herauszustellen.

Javascript Drag and Drop

Alle modernen Browser, aber IE10 und Edge mit Einschränkungen.

Zurück zur Liste

data-Attribut

Das data-Attribut ist für den Einsatz mit Javascript gedacht. Die Browser ignorieren Attribute, die mit data- beginnen.

In HTML4 / XHTML konnten Informationen für Scripte und Anwendungen nur in class- und rel-Attributen untergebracht werden. Aber stellen wir uns nur einmal vor, wir hätten ein Attribut »dropzone« genannt – mit HTML5 wäre dropzone zu einem regulären Attribut geworden.

<div id="book" 
   data-title="Ab die Post" 
   data-autor="Pratchett"
   > … 
</div>
document.querySelector('#book').dataset.title 
document.querySelector('#book').dataset.autor
Einfaches Auslesen durch dataset

Die Werte von data-Attributen sind privater Natur. Die Suchmaschinen sollen diese Attribute ignorieren.

Wird von allen modernen Browsern unterstützt.

Mehr zum Javascript data-Attribut

Zurück zur Liste

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.

Zurück zur Liste

hidden

Elemente, in denen hidden gesetzt ist, werden vom Browser nicht angezeigt und gelten als irrelevant (z.B. bis der Benutzer eine bestimmte Aktion durchführt).

hidden ist ein einfacher Schalter, ähnlich wie bei CSS display:none nimmt das Element keinen Platz ein.

Zurück zur Liste

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.

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

Zurück zur Liste

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

Zurück zur Liste

role="Aufgabe"

Die Accessible Rich Internet Applications Suite (ARIA) 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 relevaten HTML-Tags gesetzt:

  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • search

Diese role-Atribute 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 Tags wie nav oder aside ist das role-Attribut überflüssig. Das nav-Tag 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-Tags pro Seite aufführen, aber nur einem Header sollte die Rolle des banner zugewiesen werden.

header role="banner" footer role="contentinfo" nav role="navigation" div role="main" aside role="complementary" form role="search"

Zurück zur Liste

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.

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.

Zurück zur Liste

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 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 mehr empfehlenswert, denn sie führen zu Sprüngen, die der Benutzer nicht nachvollziehen kann.

Formulare: input-Attribute für Eingabefelder

Zurück zur Liste

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 – &#10;&#13; 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.

Zurück zur Liste

Javascript Event Handler als HTML-Attribute

Javascript wird i.d.R. mit einem Script-Tag vom HTML-Markup getrennt oder mit einem Script-Tag aus einer externen Javascript-Datei geladen. Event-Handler, die auf Ereignisse wie ein Klick auf einem HTML-Element oder einen submit-Button reagieren, können aber auch direkt als reguläres HTML-Attribut in fast alle HTML-Tags gesetzt werden.

Diese Praxis ist mit vielen Nachteilen verbunden und wird nur in Ausnahmen verwendet. Anstelle der Event-Handler in HTML-Tags wird die Registrierung von Ereignissen nach dem DOM Level 2 verwendet.

Klick mich, touch mich!
<div class="democlick" onclick="this.classList.toggle('changebg')">
   Klick mich, touch mich!
</div>

Nicht alle Javascript-Events bilden valide HTML-Attribute für alle Elemente. Bei Touchscreen-Events wie ontouch auf einem div-Element meldet der Validator einen Fehler (HTML 5.3 Editor’s Draft, 4 July 2018).

Zurück zur Liste

itemscope, itemtype, itemprop

Mikroformate wie schema.org definieren eine Syntax – ein Schema oder eine Schablone, mit der Suchmaschinen den Inhalt besser identifizieren können. Die Mikroformate von schema.org eignen sich besonders für Inhalte aus Datenbanken wie Events, Rezepte (ja, Koch- und Backrezepte), Produkte wie Pflastermörtel oder Geschirr, Restaurants und auch den lokalen Buchhändler.

Der Einsatz der Mikroformate erfordert nur einen kleinen Eingriff in das Content Management System oder die Templates eines Online-Shops, um die zusätzlichen Attribute aufzunehmen. Hier im Beispiel erkennt die Suchmaschine aus dem verwendeten Schema eine Liste von Events.

Mikroformate nach schema.org
<div itemscope itemtype="http://www.schema.org/EducationEvent">
<table>
<tr><th>Nr</th><th>Seminartitel</th><th>Ort</th><th>Datum</th></tr>

<tr>
   <td>214</td>
   <td><span itemprop= "name" >Web 3<span></td>
   <td><span itemprop= "location" >Mühlhausen</span></td>
   <td><span itemprop= "date" content= "2013-05-14" >14.5.2012</span></td>
</tr>
…
</table>
</div>

In den Suchergebnissen geben die Suchmaschinen einen Teil der Liste wieder – und zwar nur die Events in der Zukunft. Sie heben die Events hervor – auf diese Weise können sogar kleine Bilder in die Suchergebnisse gesetzt werden.

WordPress für Mitarbeiter in Marketing und PR web-seminar.de/schulung-wordpress-marketing-pr Mi., 10. Okt 2018 Mühlhausen WordPress-Pflege: Updates, Backups Mi., 31. Okt 2018 Überall Halloween mit WordPress

Zurück zur Liste

Javascript Event-Attribute

In den Anfängen von Javascript saßen Javascript-Aufrufe als HTML-Attribute wie onclick, onmouseover und onload als Event Attribute in HTML-Tags.

<button onclick="copyField()">Kopieren</button>

function copyField () {
  document.querySelector("#feld2").value = 
    document.querySelector("#feld1").value
}

Javascript Events sind immer noch valide HTML-Attribute. Allerdings wird diese Technik heute kaum noch angewendet.

Zurück zur Liste

HTML-Attribute