smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

8 HTML5 Attribute die ihr vielleicht noch nicht kennt

22. März 2013
Stephan
Vorstellung von 8 neuen HTML5 Attributen

Vor kurzem hatte ich mich, wie ihr vielleicht wisst, mit dem Thema HTML5 Link Prefetching beschäftigt.

Dabei ist mir aufgefallen, dass neben den populären sowie „größeren“ Neuheiten, wie z.B. Canvas, WebGL & WebSockets, es auch viele kleinere neue Features gibt. Beispielsweise einige HTML5 Attribute, von denen ich bisher noch gar keine Notiz genommen habe.

Diesbezüglich stelle ich euch im Folgenden 8 HTML5 Attribute vor, von denen ihr bis jetzt vielleicht noch gar nichts gehört habt.

In den jeweiligen Code-Ausschnitten sind die Attribute immer XHTML konform aufgeführt. Anstatt <element attribut="attribut">, könnt ihr bei einigen auch einfach <element attribut> schreiben.

1. hidden

Mit dem hidden-Attribut könnt ihr angeben, dass ein Element nicht relevant ist und der Browser es nicht anzeigen bzw. rendern soll.

<div hidden="hidden"></div>

Der Vorteil hierbei ist, dass hinsichtlich der Barrierefreiheit von Websites auch Screenreader zur Kenntnis nehmen, dass das entsprechende Element nicht relevant ist.

2. download

Ein weiteres mir noch nicht bekanntes HTML5 Attribut, über das ich gestoplpert bin, ist das download-Attribut. Weist ihr einem Link dieses Attribut zu, dann soll der Browser bei einem Klick auf den Link die entpsrechende Ressource nicht im Browser öffnen, sondern direkt den Download-/Speicher-Dialog anzeigen.

<a href="seo-report/746cvdu36.pdf" download="seo-report">Download: Dein SEO-Report</a>

Weiterhin ist von Vorteil, dass ihr als Wert für das download-Attribut einen individuellen Namen für die herunterzualdene Datei angeben könnt.

Ihr verweist also auf z.B. eine Datei mit kryptisch aussehenden Dateinamen und könnt über das Attribut angeben, dass ein „lesbarer“ Dateiname im Speicher-Dialog standardmäßig angezeigt wird.

3. contenteditable

Dieses Attribut dient zur Angabe, ob ein Element editierbar ist oder nicht. Dem contenteditable-Attribut lassen sich drei Werte zuweisen: true, false und inherit.

<h1 contenteditable="true"></h1>

Die h1-Überschrift würde nun editierbar sein. Wie hidden handelt es sich hierbei um ein globales HTML-Attribut, dass jedem HTML-Element zugewiesen werden kann.

4. spellcheck

Ein weiteres globales Attribut ist das spellcheck-Attribut. Mit diesem Attribut teilt ihr dem Browser mit, den Text des entsprechenden Elements auf die korrekte Rechtschreibung zu untersuchen.

<input type="text" spellcheck="true" />

Generell können folgende Texte auf ihre Rechtschreibung hin überprüft werden:

  • Text in input-Elementen (gilt nicht für Passwortelemente)
  • Text in textarea-Elementen
  • Text in editierbaren Elementen

5. placeholder

Zur Anzeige von Hinweisen für die Eingabe bei input-Elementen, dient das placeholder-Attribut.

<input type="text" name="surname" placeholder="Mustermann" />

Für nähere Informationen verweise ich mal auf meinen entsprechenden Artikel, den ich zu diesem Attribut bereits geschrieben habe: HTML5 placeholder-Attribut für Input-Felder

6. async

Beim async-Attribut handelt es sich um eine Attribut für script-Elemente. Damit wird dem Browser mitgeteilt, dass das entsprechende externe Skript asynchron ausgeführt werden soll, sobald es geladen wurde.

<script type="text/javascript" src="my-script.js" async="async"></script>

Der Vorteil dabei ist, dass der Seitenaufbau der Webseite durch die asynchrone Ausführung des Skripts nicht blockiert wird.

Ein Problem hierbei ist, dass nicht garantiert ist, dass die Reihenfolge in der die externen Skripte angegeben sind auch bei der Ausführung eingehalten wird. Außerdem kann es sein, dass innerhalb des Skript bereits auf ein DOM-Element zugegriffen wird, dass zum Zeitpunkt der Skriptausführung vom Browser noch nicht gerendert wurde.

Eine Alternative hierzu ist das defer-Attribut. Hierbei wird die Reihenfolge bei der Ausführung beibehalten (garantiert) und die Skripte werden erst ausgeführt, wenn die Seite fertig geladen ist.

Bei beiden Varianten kann es aber auch zu Problemen kommen, falls ihr zusätzlich zu den externen Skripte noch interne Skripte nutzt, die auf Funktionen der externen Skripte zugreifen.

7. autofocus

Um einem Element direkt nach dem die Seiten fertig geladen wurde den Fokus zu geben, könnt ihr das autofocus-Attribut einsetzen.

<input type="text" name="surname" autofocus="autofocus" />

8. sandbox

Ein Attribut, dass wahrscheinlich eher selten Anwendung finden wird, ist das sandbox-Attribut. Dieses Attribut könnt iFrame-Elementen zuordnen, um so für den Inhalt des iFrames bestimmte Einschränkungen festzulegen. Andersgesagt: Ihr definiert mittels dem Attribut, was das iFrame bzw. der Inhalt des iFrames darf und könnt somit Einschränkungen aktivieren.

<iframe src="example.htm" sandbox="allow-scripts" />

Folgende Attributswerte sind erlaubt:

  • „“
  • allow-same-origin
  • allow-top-navigation
  • allow-forms
  • allow-scripts

Es können auch mehrere Werte gleichzeitig – durch Komma voneinander getrennt – angegeben werden.

Fazit

Da sind doch wirklich einige interessante HTML5 Attribute dabei. Sehr interessant finde ich z.B. das async-Attribut, mit dem ich mich bestimmt demnächst mal näher beschäftigen werden.

Welche der vorgestellten HTML5 Attribute kanntet ihr schon bzw. noch nicht? Nutzt ihr eventuell schon welche davon innerhalb eurer Websites?

Kommentare  
2 Kommentare vorhanden
1 Ben schrieb am 6. April 2013 um 12:13 Uhr

Finde besonders das Download-Attribut praktisch, da teilweise automatisch Abspielprogramme sich im Browser öffnen. Es wird so zumindest die User Experience für technisch weniger versierte Nutzer erleichtert.

2 Stephan L. schrieb am 7. April 2013 um 19:01 Uhr

Hallo Ben,

stimmt, hinsichtlich der Benutzerfeunlichkeit ist das download-Attribut defintiv ein Fortschritt.

Würde ich mir z.B. auf der Download-Seite von jQuery wünschen. Jedes mal wenn ich auf Download klicke öffnet sich ein neuer Tab mit dem Inhalt der Datei. Viel lieber wäre es mir, wenn der Browser mir direkt den Dialog zum Speichern der Datei anzeigt.

Gruß

Stephan

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!