CSS, HTML und Javascript mit {stil}

HTML-Attribute

Attribute HTML 5

Eine Reihe von HTML-Attributen richtet sich an die Browser und Suchmaschinen oder an Javascript. Diese Attribute sitzen nur in HTML-Tags innerhalb des body-Elements und

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Informationen für Browser, Anwendungen und Suchmaschinen

spellcheckRechtschreibprüfung durchführen
contenteditableBenutzer kann den Inhalt ändern
data-*Ein eigenes Attribut für individuelle Javascript-Anwendungen.
download Lädt eine Datei beim Click
draggableBenutzer kann das Element ziehen.
dropzoneZiel eines mit draggable gezogenen Elements.
Event Handleronclick, onsubmit, ontouch … Javascript Event Handler können direkt im HTML-Tag sitzen.
hiddenInhalt ist momentan nicht relevant und verborgen
loadingloading lazy für Bilder, iframe- und video-Elemente, die nicht sofort angezeigt werden sollen
translateOb das Element übersetzt werden soll oder nicht
itemscope, itemid, itemprop, itemref, itemtype Mikroformate, z.B. wie die von schema.org definiere Syntax.

loading

Bilder, iframe- und video-Elemente erst laden, wenn der Benutzer bis zu ihrem Standort im Layout gescrollt ist spart Ladezeit für die schnelle Anzeige »Over the top« und auch Bandbreite auf den mobilen Geräten, falls der Nutzer gar nicht erst scrollt, um sie zu Gesicht zu bekommen. 

<img loading="lazy" width="600" height="400" … >

Bilder, die sofort geladen werden sollen, können dem Browser ebenfalls angekündigt werden: 

<img loading="eager" width="600" height="400" … >

loading="lazy" wird von allen modernen Browsern unterstützt, nicht aber von IE11 – egal: auf jeden Fall einsetzen! Und darauf achten, dass die Browser die Angabe von width- und height-Attribut brauchen, um den Platz im Layout freizuhalten.

Mehr zu loading lazy

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

spellcheck

Schaltet die Rechtschreibprüfung für Eingabefelder ein. Die möglichen Werte sind true und false und der Wert muss gesetzt werden, wenn das spellcheck-Attribut vorhanden ist.

Schreib mal was

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

Wird von allen modernen Browsern unterstützt.

Zurück zur Liste

download

Kennzeichnet einen Link als ladbares Element anstelle eines navigierbaren Links.

Bild herunter laden? Download PNG

Bild herunter laden? <a href="image.png" download="">Download PNG</a>

download ist ein Attribut für a-Tags – mehr dazu unter HTML a Link oder Anker-Tag.

Da ältere Browser das Attribut nicht unbedingt unterstützen, andere Browser vielleicht Downloads nur von derselben Domain erlauben, sitzt besser noch eine Kurzanleitung wie "Rechts klicken zum Download" beim Download-Link.

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

Javascript Event Handler als HTML-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.

Javascript wird heute 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 verwendet.

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

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

hidden

Elemente, in denen das Attribut hidden gesetzt ist, werden vom Browser nicht angezeigt und gelten als irrelevant (z.B. bis der Benutzer eine bestimmte Aktion durchführt). hidden macht auch aria-hidden="true" überflüssig.

<img hidden id="hiddenimg" src="roses.jpg" width="450" height="174" alt="hidden attribute">

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

hidden wird von allen aktuellen Browsern unterstützt (IE ab Version 11). Für ältere Browser die Unterstützung für das hidden-Attribut einfach durch einen CSS-Attribut-Selektor nachgeführt werden:

[hidden] {display: none}

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
<div itemscope itemtype="http://schema.org/EducationEvent">
   <time itemprop="startDate" content="2019-02-14T09:15" datetime="2019-02-14T09:15">Do., 14. Feb 2019</time>
   <h3 itemprop="name">Web 3 – Homepage für Selbstständige</h3>
   <div itemprop="location" itemscope itemtype="http://schema.org/Place">
      <span itemprop="name">Mühlhausen</span>
   </div>
</div>

Mikroformate nach schema.org

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 den Suchergebnissen erscheinen.

Web 3 – Homepage für Selbstständige
web-seminar.de/schulung-homepage-marketing-pr
Do., 16. Feb 2023 Mühlhausen
Di., 31. Okt 2023 Halloween mit WordPress

Das HTML Link-Tag und das Meta-Tag können mit einem itemprop-Attribut auch im body des Dokuments eingesetzt werden.

JSON LD ersetzt die zahllosen meta-Tags und Attribute, die bei Microformats, RDF und Microdata das HTML überschwemmen.

Zurück zur Liste