In diesem Blog Eintrag stelle ich euch 7 HTML5 Funktionen vor, die Ihr vielleicht nicht wüsstet, auf caniuse.com Seite könnt Ihr gucken, welche Browser welche Funktionen unterstützen.
HTML5 Attribut - autofocus
Mit dem Attribut autofocus, kann man die Aufmerksamkeit einer Person auf ein bestimmtes Object setzen, sobald die Seite geladen hat. Man kann den Attribut autofocus z. B. auf einen Login Button legen, auf ein Eingabefeld etc.
Hier ein Beispiel mit einem Eingabefeld:
<input autofocus="autofocus">
HTML5 Attribut - download
Mit dem Attribut download, kann man eine Datei herunterladen ohne Direkt zu der Datei zu wechseln.
Beim Attribut href gibt Ihr den Direkten Pfad zur Datei an. Beim Attribut download gibt Ihr einen Namen für die PDF an.
In dem folgendem Beispiel heißt die Datei "MyPDFReport.pdf"
<a href="my.pdf" download="MyPDFReport">Download PDF</a>
Download PDF
HTML5 Attribut - prefetch
Mit dem prefetch Attribut, kann man eine Website im Hintergrund vorausladen lassen. Die Daten der Website werden dann im Cache gespeichert, sodass die Seite dann schneller geladen werden kann.
So sieht die Verwendung für prefetch aus:
<link rel="prefetch" href="deine/website/hier">
HTML5 Element - hidden
Funktioniert eigentlich im Prinzip wie { display: none; } in CSS, sodass der Benutzer bestimmte Elemente der Website nicht sieht, bis er z. B. eine Flagge ausgewählt hat etc. Dann kann man mithilfe von Javascript den Element hidden entfernen.
<div hidden="hidden">Versteckter Text</div>
HTML5 Attribut - spellcheck
Die Funktion spellcheck prüft die Schreibweise der Texte in einem Textfeld, außer bei Passwörtern.
Der ganze Code sieht wie folgt aus
<input type="text" spellcheck="true|false">
HTML5 Tag - datalist
Der HTML5 Tag datalist gibt eine Auswahl für den HTML Tag input an, welche der Benutzer dann auswählen kann. Die Auswahl ist solange versteckt, solange das Feld nicht fokussiert ist.
das Ganze kann wie folgt aussehen:
<form action="demo_form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
HTML5 Tag - output
Den HTML5 Tag output kann man für eine Ausgabe benutzen z. B. als Ausgabe für einen Taschenrechner, welcher mit HTML5 aufgebaut ist.
So sieht der HTML5 Tag aus:
<output name="output"></output>
Und hier ein Beispiel wie man es einsetzen kann: