CSS, HTML und Javascript mit {stil}

HTML Attribute von id bis style

Die wichtigsten HTML-Attribute

Attribute erweitern die Funktion von HTML-Tags und setzen zusätzliche Informationen ein. Die HTML-Attribute id, title, class, style, lang und dir können in fast allen HTML-Tags vorkommen. Die HTML-Tags des head-Elements bilden eine Ausnahme – kaum eines der globalen Attribute passt zu head-Tags.

Alle HTML-Tags können durch Attribute im öffnenden Tag erweitert werden. Neben den speziellen Attributen für bestimmte Tags (wie src="img.png" für das img-Tag oder href="myurl" für a-Tags) gibt es die Kernattribute oder universelle Attribute, die in nahezu jedem HTML-Tag eingesetzt werden könne.

Globale HTML-Attribute

accesskey

Ein Shortkey oder Tastaturkürzel für den Zugriff auf ein Element

<a href="index.html" accesskey="h">HTML5</a>

id

identifiziert ein HTML-Tag im Dokument eindeutig und wird für CSS und JavaScript verwendet.

<div id="extended">Erweiterungen</div>

tabindex

legt die Reihenfolge fest, mit der ein Benutzer mit der Tabulator-Taste durch die Seite navigiert

<a href="index.html" tabindex="1">Home</a>

title

setzt zusätzliche Informationen in ein Element, die von den Browsern als Tooltip angezeigt werden

<section title="HTML-Attribute">

class, style

setzen CSS-Regeln und liefern generelle bzw. individuelle CSS-Eigenschaften an Elemente.

<header style="background: ivory">

lang, dir

definieren Sprache und Laufrichtung von Texten.

<head lang="de">

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>

HTML dir-Attribut

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.

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 id="littleBox">Klick!</button>

var littleBox = document.getElementById('littleBox');
littleBox.onclick = function() {
	alert('Treffer!');
}

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> 

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.

title

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

HTML title weist einem HTML-Tag eine Zeichenkette 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="title-Tag einer HTML-Seite">title • Titel des Dokuments</a>

Ähnlich funktioniert das title-Attribut in Tags wie <abbr>, das eine Abkürzung oder ein Acronym in einem kleinen Hilfefenster erklärt. Platzieren Sie den Mauszeiger über dem farbig hinterlegten Text. Nach kurzer Zeit erscheint für rund 10 Sekunden ein kleines Fenster mit einer Erklärung.

<abbr title="eng: Abbreviation – Abkürzung"
      style="outline: 1px dotted red;">
   abbr-Tag
</abbr>

Tipp: Benutzen Sie das abbr-Tag, um eine Abkürzung zu erklären.

Die Zeichenfolge &#10;&#13; ist eine – wenn auch eingeschränkte – Möglichkeit, einen Zeilenumbruch in die Ausgabe des Browsers einzubringen, funktioniert aber nicht in allen Browsern.

Neue Attribute in HTML5

In HTML5 sind neue Attribute hinzugekommen:

contenteditable

Benutzer kann den Inhalt ändern

contextmenu

Kontextmenü eines Elements. Der Wert muss die id eines Menü-Elements im DOM sein.

data-*

Ein eigenes Attribut für individuelle Anwendungen.

draggable

Benutzer kann das Element ziehen.

dropzone

Ziel eines mit draggable gezogenen Elements.

hidden

Legt fest, ob ein Element weiterhin relevant ist.

inert

Erklärt ein Element als inaktiv. Der Browser soll sich verhalten, als ob das Element nicht vorhanden ist (z.B. den Text eines Blocks nicht durchsuchen).

itemscope, itemid, itemprop, itemref, itemtype

bilden Mikroformate, z.B. wie die von schema.org definiere Syntax. Das HTML Link-Tag und Meta-Tag können mit einem itemprop-Attribut auch im body des Dokuments eingesetzt werden.

checkspell

Rechtschreibprüfung durchführen

translate

Text oder der Wert eines Attributs sollen übersetzt werden, wenn die Seite übersetzt wird.

role

Aufgabe des Elements

Früher wurden Javascript-Ereignisse und -Aktionen wie den Aufruf einer Javascript-Funktion als HTML-Attribut in HTML-Tags gesetzt. Diese Praxis ist mit vielen Nachteilen verbunden und wird nicht mehr angewendet. Anstelle der Event-Handler in HTML-Tags wird die Registrierung von Ereignissen nach dem DOM Level 2 verwendet.

data-Attribut

Mit HTML5 gibt es das data-Attribut, das für den Einsatz mit Javascript gedacht ist. 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>

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

data-Attribute sind in erster Linie zur Auswertung durch Javascript gedacht und werden durch getAttribute und setAttribute gelesen und gesetzt – oder noch einfacher durch dataset gelesen.

document.querySelector('#book').dataset.title 
document.querySelector('#book').dataset.autor

Auch jQuery hat eine eigene Methode für data-Attribute – data() – und erspart das Ausschreiben des data-Präfix.

var note = $('#note').data("account");

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

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

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"

contextmenu

contextmenu erzeugt ein Menü, das sich bei einem Rechtsklick mit der Maus öffnet. contextmenu wird zurzeit nur von Firefox unterstützt. 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.