Kategorien
Design HTML/CSS Webdesign

10 coole Sachen, die man mit HTML-Elementen machen kann

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. In diesem Beitrag stellen wir Ihnen daher einige wenig genutzte Elemente vor, die Ihnen jedoch viel Arbeit bei der Entwicklung neuer Websites und Anwendungen abnehmen und somit hilfreich 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.

coolesachen-html-teaser_DE

1. Map-Grafiken

Das HTML <map> Element können Sie verwenden, um Grafik-Maps zu erstellen. Grafik-Maps sind im Grunde genommen Bilder, die anklickbare Bereiche aufweisen, die wiederum zu einer anderen Unterseite einer Website oder zu einem externen Ziel verlinken. Sie können festlegen, welche Bereiche eines Bildes anklickbar sind, indem Sie einfach die XY-Koordinaten der entsprechenden Punkte innerhalb des <area> Tags eingeben.

Hinweis: Die anklickbaren Bereiche können nicht durch CSS gestaltet werden. Sie sollten diese Arbeiten daher in einem Bildbearbeitungsprogramm wie Photoshop erledigen. Ebenfalls können Sie innerhalb von Photoshop die benötigten Koordinaten ermitteln. In dem Open-Source Programm Gimp funktioniert das ebenfalls.

die-sieben-kontinente

2. Input Vorschläge

Das <datalist> Element kann dazu genutzt werden, eine Reihe von relevanten Vorschlägen zu zeigen, die nach erster Eingabe eines Buchstabens in das Input-Element erscheinen.

Data-Input

3. Highlight Text

Markierter Text hat in der Regel eine dunkle und langweilige Farbe auf einem hellen Hintergrund. Der Farbeffekt ist natürlich auch mit Markup zu erreichen, jeder Text innerhalb des <mark> Elements kann mit jeder möglichen Farbe hervorgehoben werden. Sie können die Hintergrundfarbe mit der CSS-Eigenschaft background-color bestimmen und die Text-Farbe mit color.

Highlight text

4. Templates definieren

Zusammen mit HTML5 kam auch der neue <template> Tag. Das <template> Element sorgt dafür, dass das eingeschlossene Markup nicht von den Browsern gerendert wird, sondern zum Generieren dynamischen Inhalts in der Seite mit JavaScript dient.

Ein Beispiel: Sie haben eine Tabelle, in der die Spalten dynamisch hinzugefügt werden können.

template-tag

5. Kleingedrucktes

Kleingedrucktes ist in der Regel ein Textbereich eines Dokuments, der eine sehr kleine Schriftgröße aufweist und Informationen enthält wie: Bedingungen, Einschränkungen, EULAS, Rechte und so weiter. Der <small> Tag kann verwendet werden, um dieses Kleingedruckte ohne zusätzliche Arbeiten zu realisieren. Seit HTML5 zeigt der <small> Tag die semantisch gleiche Definition wie rechtliche Hinweise und Warnungen.

small-html-element

6. Eine Basis-URL zuweisen

Das <base> Element ist recht praktisch, wenn es darum geht, mehrere Links in einem Dokument mit den gleichen Domain-URLs auszustatten. Das Element ermöglicht Ihnen, eine Basis-URL zu definieren und andere Links nur mit relativen URLs zu versehen.

Base-Element

7. Responsive Bilder und Grafiken

Responsive Webentwicklung liegt im Trend mit immer größer werdenden mobilen Zugriffen. Bilder können für unterschiedliche Bildschirmgrößen mit Markup umgeschaltet werden. Das <picture> HTML5-Element ermöglicht Ihnen verschiedene Bildquellen für eine Darstellung zu definieren, so wird immer das richtige Bild für das richtige Ausgabemedium abgerufen.

Hinweis: Dies funktioniert derzeit nur in Chrome. Für eine Funktion in Firefox setzen Sie dom.image.picture.enable auf true.

das-picture-html5-element

8. Color Picker

HTML5 brachte uns eine ganze Menge neuer Elemente und Funktionen. Unter anderem wurden auch einige neue Input-Elemente mit in den Standard aufgenommen. Das Color-Input Element ist eines davon. Es lässt Sie eine bestimmte Farbe auf einer Website mit Hilfe eines Color-Pickers auswählen.

html5-color-picker

9. Gruppierungs-Optionen

Sollten Sie sehr viele Optionen in einer Dropdown-Liste integriert haben, dann kann das <optgroup> Element hilfreich sein, um diese zu gruppieren und übersichtlicher darzustellen. Die erstellten Gruppen können mit CSS gestaltet werden.

gruppierungs-optionen-mit-optgroup

10. Das <noscript> Element

Das <noscript> Element wird nur dann vom Browser gerendert, wenn in dem betreffenden Browser das JavaScript ausgeschaltet wurde. Das Element kann dazu genutzt werden, den Besucher darauf hinzuweisen, dass die Website nur mit aktiviertem JavaScript zu 100% läuft. Allerdings kann es auch für alternative Komponenten, wie ein spezielles CSS, genutzt werden.

noscript-element

Fazit

Die Möglichkeiten, die den Entwicklern bereits mit HTML5 gegeben wurden, sind schon gewaltig. Ich hoffe, ich konnte Sie mit dem einen oder anderen Tag noch überraschen, es würde mich freuen, wenn mehr Entwickler diese Tags nutzen würden, um Webstandard-gerechte Websites damit zu erstellen.

Link zum Beitrag

New HTML5 Elements – W3C

(dpe)

Von Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

2 Antworten auf „10 coole Sachen, die man mit HTML-Elementen machen kann“

Hallo Andreas,
eine schöne Übersicht.
Einige Elemente wie optgroup oder base sind wirklich nicht sehr geläufig, da kann es nicht schaden, wenn man diese hier einmal kennen lernt.
Gruss
Martin

Schreibe einen Kommentar

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