Anzeige
Der Agentur-Server: Das digitale Zuhause für deine Projekte.
↬ Jetzt testen ↬ Jetzt testen!
Lorenz Hohmann 12. September 2019

14 HTML Features, die du {vielleicht} noch nicht kennst

Bis heute sind insgesamt 142 HTML-Elemente vom W3C standardisiert worden, mit Ausnahme derer, die sich noch in der Phase der Standardisierung befinden und natürlich denen, die man als überholt kennzeichnet. Das bedeutet, dass man durchaus einige Elemente nicht kennt und daher nicht benutzt, obwohl sie vielleicht sehr nützlich sein könnten.

Auch im Sinne der Webstandards ist es wichtig, für gewisse Aufgaben auch dasjenige Markup zu verwenden, das für diese Aufgabe an sich vorgesehen ist. So auch die folgenden HTML Features.


1. Unabhängiges Protokoll

Wenn Du Skripte – egal ob CSS oder JavaScript – auf Deiner Seite einbindest, benutzt Du ein Protokoll. Entweder HTTP (Hypertext Transfer Protocol) oder mittlerweile eher HTTPS (Hypertext Transfer Protocol Secure).

Wenn Du Deine Seite nun auf HTTPS umstellst und noch Skripte über HTTP einbindest, werden diese nicht geladen und Fehler in der Browser Console angezeigt. Dabei hilft Dir dieser Trick, um ein unabhängiges Protkoll zu benutzen. So würde die Einbindung eines Skriptes normal (mit HTTP) aussehen:

<script src="http://example.com/js/foobar.js"></script>

Wenn Du das Protokoll weglässt und die URL mit // beginnst, nimmt der Browser das Protkoll, welches Deine Website aktuell verwendet. Damit hast Du eine potentielle Fehlerquelle (beispielsweise die „mixed content“ Warnung) beseitigt.

<script src="//example.com/js/foobar.js"></script>

Wenn Deine Seite also über HTTPS erreichbar ist, wird das Skript auch mit HTTPS eingebunden. Für HTTP gilt das gleiche.

2. Dropdown mit Suchfeld

Oft haben wir ewig lange Dropdowns mit unzähligen Einträgen. Da ist es manchmal gar nicht so einfach, den passenden Eintrag zu finden. HTML bringt von Haus aus eine Option mit, ein Dropdown „durchsuchbar“ zu machen. Hier ein Beispiel:

See the Pen Dropdown with Search by WebDEasy Trifles (@webdeasy_trifles) on CodePen.light

Alles was wir dafür tun müssen, ist eine datalist einem input zuzuordnen:

  <input list="countries" class="form-control" placeholder="Suchbegriff.." id="country">
  <datalist id="countries">
    <option value="Deutschland">
    <option value="Österreich">
    <option value="Schweiz">
    <option value="Frankreich">
    <option value="Spanien">
    <option value="Italien">
  </datalist>

Ohne jegliche Programmierung haben wir ein nettes Feature eingebaut, welches nicht nur Zeit spart, sondern auch Nerven schont.

3. Gruppierungen in Dropdowns

Wir bleiben bei den Dropdowns und schauen uns ein weiteres Feaure an: Gruppierungen.

See the Pen Pure HTML Grouped Dropdown by WebDEasy Trifles (@webdeasy_trifles) on CodePen.light

Auch dieses Feature ist simpel und genial. Wir benötigen nur den optgroup Tag. Dieses beinhaltet alle Optionen, welche einer Gruppe zugeordnet sein sollen.

<optgroup label="Priorität: Hoch">
  <option>E-Mails beantworten</option>
  <option>Trinken</option>
</optgroup>

4. Richtige Tastatur bei mobilen Inputs

Ein weiteres nützliches HTML Feature sind die richtigen Tastaturen bei mobilen Inputs. Dieses Feature wird nur auf Mobilgeräten sichtbar. Auf Desktopgeräten bleibt alles unverändert. Deshalb schau Dir dieses Beispiel am besten auf Deinem Mobilgerät an.

See the Pen Correct Mobile Keyboard Type by WebDEasy Trifles (@webdeasy_trifles) on CodePen.light

Wir bekommen eine leicht veränderte Tastatur angezeigt, die Sonderzeichen in die Schnellauswahl packt oder bei Nummern nur einen Nummernblock anzeigt.

Alles was wir dafür tun müssen, ist dem Input zusätzlich einen inputmode mit dem richtigen Wert zu setzen. Den richtigen Wert findest Du in der Dokumentation.

5. Anführungszeichen weglassen

Für jeden Webentwickler und Webdesigner ist klar, so sieht ein valider HTML Tag aus:

<p class="first-tag">Valider Paragraph</p>

Was für Dich aber neu sein könnte, das hier ist auch valides HTML:

<p class=first-tag>Valider Paragraph</p>

Wir können die Anführungszeichen also komplett weg lassen. Das gleiche gilt auch für alle anderen Attribute.

Mehrere Klassen kann man mit dieser Methode aber nicht einfügen. Dazu müssen wir wieder auf unsere Anführungszeichen zurückgreifen. Generell ist es also in meinen Augen nur „Nice to know!“ und keine wirkliche Alternative.

6. Nicht-notwendiger Zeilenumbruch mit <wbr>

Jeder Webentwickler/Webdesigner kennt den <br> Tag, mit dem wir einen einfachen Zeilenumbruch in unseren Text einfügen können. Weniger bekannt ist hingegeben der <wbr> Tag. Dieser Tag fügt einen Zeilenumbruch nur dann ein, wenn es wirklich notwendig ist.

Im folgenden Beispiel ist im linken Text der <wbr> und im rechten Text der <br> Tag in dem fett markierten Wort eingefügt.

See the Pen HTML Different between
and
by WebDEasy Trifles (@webdeasy_trifles) on CodePen.light

Öffne den CSS Tab des Pens und stelle die Breite des p Tags einmal auf 33px und einmal auf 34px. Du wirst sehen, dass der rechte Texte dauerhaft umgebrochen ist, der linke hingegen nur dann, wenn die Breite zu gering für das komplette Wort ist.

7. Inhalt ohne Input bearbeiten

Wie soll das denn gehen, fragst Du dich bestimmt!? Ich verrate es Dir: mit contenteditable. Dieses Attribut kann man einem beliebigen HTML Element geben und dadurch das Bearbeiten zulassen.

Der Text im folgenden Beispiel sieht aus wie ein normaler Paragraph, ist er auch. Mit dem Zusatz, dass er das Attribut contenteditable hat. Du kannst mit der Maus reinklicken und sieht schon den Cursor. Der Text lässt sich wie bei einem input oder textarea frei bearbeiten.

See the Pen HTML Contenteditable by WebDEasy Trifles (@webdeasy_trifles) on CodePen.light

Diese Funktion ist beispielsweise beim Programmieren eines eigenen WYSIWYG Editors sehr nützlich.

Kleiner Tipp: Wenn Du den folgenden Befehl in der JavaScript Console über die Entwicklertools (F12) eingibst, kannst Du die aktuelle Seite nach belieben bearbeiten. Und keine Angst, nach einem Reload ist alles wieder normal, nichts wird dadurch beschädigt.

document.body.contentEditable = true;

8. Löschen und Einfügen von Text anzeigen

Texte und Blog-Einträge sollten stets auf dem aktuellen Stand gehalten werden. Dabei ist es oft sinnvoll die veralteten Texte nicht komplett zu löschen, sondern nur markieren, dass sie veraltet sind. Und dafür können wir die HTML Tags del und ins optimal nutzen.

So setzt Du beispielsweise die Tags für die Veränderung der Farbe ein:

<p>Dieses Tuch hat die Farbe <del>rot</del><ins>blau</ins>!</p>

Dadurch erhalten wir dieses Ergebnis, welches dem Nutzer direkt wichtige Informationen zu alten und neuen Angaben liefert:

Dieses Tuch hat die Farbe rot blau!

9. Kleingedrucktes

Oftmals vergessen oder mißachtet, und doch so einfach und stark: das <small> Element für Angebotsbedingungen, Fussnoten, EULAS und so weiter. Das HTML dazu sieht so aus:

<h2>Schlussverkauf, 50% auf Alles!<sup>*</sup></h2>
<p>* Ausser Hundefutter</p>

Und das Ergebnis sieht dann so ähnlich aus wie folgt:

10. Einfacher Color Picker

Bei Einstellungs-UIs sieht man häufig Felder, um eine Farbe für z.B. einen Banner oder Hintergrund auszuwählen. Diese sind oft mit zusätzlichen Plugins erstellt oder selber programmiert. Dabei bringt HTML von Haus aus einen eigenen Color Picker mit.

See the Pen HTML Color Picker by Dr. Web Trifles (@drweb) on CodePen.light

Natürlich haben wir die Möglichkeit im JavaScript darauf zuzugreifen, um mit den Benutzereingaben zu arbeiten. In diesem Beispiel selektiere ich den Color Picker einfach über das erste Input.

const color = document.getElementsByTagName('input')[0].value;

11. Eine Dialog-Box einbauen

Die Verwendung des Elements <dialog> ist sehr einfach und sieht in seiner Grundform so aus:

<dialog open="">
Das ist eine Dialogbox!
</dialog>

Das Attribut “open” sorgt dafür, dass die Dialogbox auch tatsächlich angezeigt wird. Mit etwas CSS und Javascript kann die Box dann so aussehen:

See the Pen HTML only – Dialog by Dr. Web (@drwebmagazin) on CodePen.light

Auf Dr. Web haben wir zu dem Element einen eigenen Artikel verfasst, der sich dem Aussehen und der Interaktion mit einer Dialog-Box widmet.

  • Sie überlagert den Seiteninhalt
  • positioniert sich mittig
  • …und wird von umgeben von einem Rahmen, dessen Größe sich über den Inhalt der Box bestimmt
  • Solange die Box angezeigt wird, ist keine Interaktion mit den Inhalten außerhalb der Box möglich ist.

12. Details ein- / ausblenden

Details auf einer Website ein- und auszublenden, beispielsweise für eine Inhaltsverzeichnis, wird oftmals über ein Javascript gesteuert. Das ist aber in der Regel nicht barrierefrei, sodass Anwender mit schlechtem Augenlicht oder ohne Maus aussen vor bleiben. Das ist nicht schön und sollte vermieden werden.

Mithilfe der HTML Elemente <details> und <summary> lässt sich sowas direkt in HTML umsetzen. Und zwar so:

See the Pen HTML – Details & Summary by Dr. Web (@drweb) on CodePen.light

13. Einen Link mit Telefonnummer einbauen

Das mailto: Attribut dürfte den meisten Leuten bereits bekannt sein. Doch wie kann man aus einer Telefonnumer einen anklickbaren Link machen? Das geht einfacher als du denkst!

<a href="tel:+4976151462470">(0)761 / 51462470</a>

Im HTML muss immer die Ländervorwahl im Format +49, ohne 0 in der Ortsvorwahl und zusammengeschrieben werden.

14. Datumsauswahl nur mit HTML

Wichtig wie bei allen Formfeldern ist nicht nur das reine HTML, sondern vor allem auch, dass du sie richtig beschriftest. Beispielsweise sollte ein Platzhalter (DD/MM/YYYY) direkt im Feld vorhanden sein, damit die Besucher wissen, um welches Feld es sich genau handelt, auch wenn sie gerade unter Stress oder Zeitdruck stehen. Aus demselben Grund sollte auch über dem Feld nochmal das Label (hier: Datum) drüberstehen.

Das HTML dazu sieht so aus:


  <h1>Datumsauswahl</h1>
<div class="field ">
  <label for="date">
    <span class="field-label">Wähle ein Datum:</span><br>
  </label>
  <input type="date" id="date" name="date" value="" placeholder="DD/MM/YYYY">
</div>

Auf Desktop und Mobile sieht das Resultat dann so aus:

Der Date Picker im Firefox Browser auf Desktop
So sieht der Date Picker in Firefox (Desktop) aus.
Der Date Picker auf dem Handy
Und so auf dem iPhone.

Fazit

Ein paar Features waren Dir sicherlich schon bekannt. Andere sind für Dich hoffentlich neu gewesen und finden zukünftig einen Weg auf Deine Website. Wie gesagt: Denk‘ nicht so kompliziert, oft liegt die Lösung schon auf der Hand!

Lorenz Hohmann

Lorenz ist Webentwickler & Server Administrator. Damit reicht sein Aufgabengebiet von der Gestaltung des Front-ends bis hin zum Schreiben von Shell-Skripten.

10 Kommentare

  1. Tatsächlich ein netter Artikel. Ich war skeptisch bei der Überschrift, aber wahrhaft waren 60 Prozent der Dinge neu und sind gut im Hinterkopf zu haben:) VG

  2. Zu 9. small-Element: Selbiges sollte im Beispiel auch auftauchen. Vermutlich sollte es innerhalb des p-Tags eingesetzt werden?

    * Ausser Hundefutter

    Wichtig zu erwähnen: das small-Element ist ein inline-Element und dient der Textauszeichnung wie beispielsweise b, i, strong, em, del, ins usw. Es sollte daher nicht(!) für komplette Sätze oder Absätze benutzt werden. Im oben genannten Beispiel wäre es daher besser, dem p-Absatz eine Klasse mitzugeben, über die die Darstellung gestylt wird.

  3. Vielen Dank für den Beitrag. Ich, die sich nur hin und wieder und nicht jeden Tag mit HTML und CSS beschäftigt, bin immer neugierig, erfreut und dankbar für solche Anregungen. Viele Grüße

  4. Der colorpicker wird von vielen Browsern gar nicht unterstützt. Sollte man also nicht für öffentliche Webseiten verwenden oder eine alternative bereitstellen.

  5. Mir war die Suchfunktion im Dropdown menü nicht bekannt. Erspart so einiges wenn man autocomplete entwickeln möchte^^

  6. Doch ja, zwei Sachen waren neu, bzw. hatte ich wieder vergessen. Nette kleine Erinnerung.

  7. Erstens kennen das vermutlich die meisten Web Entwickler, zweitens funktioniert einiges davon auf IE nicht.
    Und wieso benutzen die Form Fields hier nicht den „richtigen“ Inputmode? ;-)

  8. Mal wieder eine reißerische Überschrift, die in meinem Fall sogar zu 100% falsch ist.
    Wenn man schreibt, sollte man nicht über das wissen seiner Leser mutmaßen, geschweige denn behaupten, dass sie etwas nicht wüssten.

Schreibe einen Kommentar zu Prov94 Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.