CSS, HTML und Javascript mit {stil}

Globale HTML-Attribute für (fast) alle Tags

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.

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
liefert CSS-Eigenschaften aus der CSS-Datei oder einem style-Tag im Head an Elemente
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.
hidden
Legt fest, dass ein Element momentan nicht relevant ist.
id
identifiziert ein HTML-Tag im Dokument eindeutig und wird für CSS und JavaScript verwendet.
lang
definieren Sprache und Laufrichtung von Texten.
role
Aufgabe des Elements
style
CSS im style-Attribut für dieses spezielle HTML-Element
tabindex
legt die Reihenfolge fest, mit der ein Benutzer mit der Tabulator-Taste durch die Seite navigiert.
title
setzt zusätzliche Informationen in ein Element, die von den Browsern als Tooltip angezeigt werden.
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.

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>

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 …

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

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.

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.

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

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.

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.

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>

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) 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:

Diese role-Atribute beschreiben die Struktur der Seite:

<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"

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.

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

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.

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>

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 Di., 14. Mai 2016 WordPress-Pflege: Updates, Backups Mühlhausen Do., 17. Juni 2016 Beiträge richtig schreiben Bremerhaven
HTML-Attribute