Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Lorenz Hohmann 31. Juli 2019

Diese 9 HTML Features kennst Du (vielleicht) noch nicht

Es ist verrückt, was wir mittlerweile alles im Web umsetzen können. Dabei wird es oft zu kompliziert gemacht, obwohl die Lösung bereits auf der Hand liegt. So auch die folgenden HTML Features.

Anzeige


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

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

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

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

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

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

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. 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 WebDEasy Trifles (@webdeasy_trifles) on CodePen.0

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;

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

Ich bin Webentwickler & Server Administrator. Damit reicht mein Aufgabengebiet von der Gestaltung des Frontends bis hin zum Schreiben von Shell-Skripten.

7 Kommentare

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

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

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

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

  5. 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? ;-)

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

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