Außergewöhnlich anmutig anmutende HTML-Attribute

Egal, ob Du gelegentlich selbst die ein oder andere Zeile schreibst oder Dich im Rahmen von Analysen durch Quellcode wühlst: HTML-Grundkenntnisse haben viele SEOs.

Der Fokus liegt typischerweise auf title, description, rel-Attributen, h-Tags & Co. – dabei gibt es noch viele weitere Elemente zu entdecken!

Louis Lazaris hat sich einmal durchwühlt und einen Haufen cooler Attribute zusammengestellt. Ein paar besonders interessante davon zeige ich Dir hier.

Das enterkeyhint-Attribut

Wenn Du auf einem Mobilgerät ein Formular ausfüllst, erscheint dazu ein virtuelles Keyboard auf dem Bildschirm. Dieses hat natürlich auch eine Enter-Taste. Soweit, so klar. Aber wusstest Du, dass Du den Text dieser Enter-Taste beeinflussen kannst? So kannst Du das Passende wählen, je nachdem, welche Aktion beim Ausfüllen des Formulars durchgeführt wird. Dabei gibt es sieben fest definierte Werte:

• enter

• done

• go

• next

• previous

• search

• send

Sie werden einfach mit enterkeyhint an das Feld angehängt:

<input type=\"text\" enterkeyhint=\"...\">

Das sieht dann zum Beispiel so aus:

enterkeyhint ist "done"

enterkeyhint ist "next"

Das cite-Attribut

Als Erweiterung für Zitate – egal ob <blockquote> oder <q> – kannst Du das cite-Attribut nutzen. Es dient dazu, die Quelle des Zitats als URL direkt zu hinterlegen.

<blockquote cite=\"<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#attr-cite>\"> A URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote. </blockquote>

Ach ja – cite kann auch für <del> Deletions und <ins> Insertions genutzt werden. In dem Fall ist auch eine zusätzliche Kombination mit datetime möglich. Hier kannst Du mehr dazu lesen.

Obercoole Ordered Lists

Festhalten, jetzt wird es richtig interessant: Es liegt in Deiner Hand, wie die Nummerierung in einer <ol> aussieht.

• Mit reversed drehst Du die Sortierung einfach um, also von low --> high zu high --> low

• Mit start legst Du fest, mit welcher Zahl es los geht

• Mit type wählst Du zwischen Zahlen, Buchstaben oder römischen Zahlen

• Mit value kannst Du den Wert eines spezifischen Listenelements angeben

Louis hat dazu einige Anwendungsbeispiele dokumentiert.

Das download Attribut

Die meisten Links sind dazu gedacht, um sich von einer URL auf die nächste zu bewegen. Manche Links verweisen jedoch auf Inhalte, die nicht besucht, sondern heruntergeladen werden sollen.

Vorhang auf für das download-Attribut!

Entweder Du klebst es einfach so an Dein <a>-Element:

<a href=\"/example.pdf\" download>Download File</a>

Oder Du erweiterst es noch um einen Wert:

<a href=\"/example.pdf\" download=\"my-download.pdf\">Download File</a>

Dieser wird dann als Dateiname beim Herunterladen vorgeschlagen.

Louis geht hier sogar noch einen Schritt weiter:

As a bonus trick involving this attribute, you can combine this feature with some JavaScript to create a way for the user to download content they create themselves.

Das label-Attribut

Vielleicht nicht ganz so unbekannt, aber auf jeden Fall eine Erinnerung wert: Mit dem optgroup-Element kannst Du die Optionen in einem Dropdown-Menü in Kategorien clustern. Diese erhalten dann mittels label-Attribut einen Namen.

Die imagesizes und imagescrset Attribute

Diese beiden Attribute lassen sich gemeinsam mit rel=\"preload\" und as im link Element einbinden.

Das sieht dann zum Beispiel so aus:

      as=\"image\"
      imagesrcset=\"images/example-480.png 480w,
             images/example-800.png 800w,
             images/example.png 2000w\"
     imagesizes=\"(max-width: 600px) 480px,
            (max-width: 1000px) 800px,
            1000px\"
     src=\"images/example.png\"
     alt=\"Example Image\">```

So wird direkt das richtige Bild vorgeladen.

Wenn Dir das noch nicht genug ist, hat Marko Denic auch noch [ein paar Tipps](https://markodenic.com/html-tips/) für Dich:

-   [meter-Element](https://markodenic.com/html-tips/#:~:text=4.%20The%20%60meter%60%20element) zum Anzeigen von einfach Quantitätsindikatoren

-   [details-Element](https://markodenic.com/html-tips/#:~:text=to%20create%20sliders.-,12.%20HTML%20Accordion,-You%20can%20use) zur Erzeugung eines nativen HTML-Accordions

-   [mark-Tag ](https://markodenic.com/html-tips/#:~:text=native%20HTML%20accordion.-,13.%20%60mark%60%20tag,-You%20can%20use)zum Highlighten von Text

-   [poster-Attribut](https://markodenic.com/html-tips/#:~:text=Copy-,16.%20Video%20thumbnail,-Use%20the%20poster) um ein Bild zu referenzieren, das angezeigt wird, während ein Video geladen wird oder bevor der Play-Button geklickt wurde

Bleibt nur eine Frage offen: Welche dieser Attribute wirst Du für Deine Website oder zum Beeindrucken des Dev-Teams nutzen?