Während die Entwicklung bereits vor vielen Jahren begann, kam HTML5 erst 2010 mit Web-Designern / Entwicklern zum Einsatz. Direkt hinter dem Tor fühlte sich die Sprache vielen Web-Profis an, da sie nicht alles neu zu erfinden versuchte, HTML5 aufgebaut auf dem, was vorher gekommen war. Jeder, der HTML 4.01 kannte, fand schnell heraus, dass einiges von dieser Version jetzt in HTML5 gefunden werden konnte.
Während HTML5 viele Elemente enthält, die seit einiger Zeit in HTML vorhanden sind, wurden auch einige wenige Elemente eingeführt, die in HTML5 neu waren. Für viele dieser neuen Elemente wurde ein Ansatz verwendet, der "Pflasterung der Kuhwege" genannt wurde. Dies ist ein Begriff, der in der IT häufig verwendet wird, um im Wesentlichen zu sehen, was die Leute bereits tun und das tun. Im Falle von Webdesignern bedeutete dies, zu sehen, wie sie bereits Seiten erstellten, und auf diesen Aktivitäten Entscheidungen zu treffen. Zum Beispiel würden viele Web-Profis Websites mit Abteilungen erstellen, die die ID- oder Klassenattribute "header", "nav" und "footer" verwendeten. Daher wurden diese in HTML5 als neue Elemente eingeführt, sodass Web-Profis ihren Dokumenten mehr Bedeutung verleihen können, indem sie spezielle Abschnittselemente anstelle von nur Abteilungen verwenden. Diese Kombination aus Vertrautheit und einem Ansatz, der die derzeitigen Praktiken anerkannte, hat dazu beigetragen, dass HTML5 von der Webdesignbranche schnell angenommen wurde.
Der HTML5-Doctype
Um neue HTML5-Elemente verwenden zu können, muss Ihr Dokument zunächst den HTML5-Doctype enthalten.
Sie stellen möglicherweise fest, dass dieser Doctype "HTML5" nicht ausdrücklich erwähnt, sondern lediglich die Version als "html" angibt. Dies liegt daran, dass dieser Doctype zukünftig für alle Iterationen der Sprache verwendet werden soll.
Tatsächlich soll HTML5 die letzte nummerierte Version der Sprache sein, und in der Zukunft werden konsistent neue Änderungen vorgenommen. Einige der Elemente in der folgenden Liste wurden bereits nach dem ersten Push im Jahr 2010 der Sprache hinzugefügt.
Die HTML5-Tags
| Etikett | Erläuterung | |
|---|---|---|
| Anker oder Link | ||
| Abkürzung | ||
| Adresse oder Autoren des Dokuments | ||
| Clientseitige Imagemap | ||
| Artikel | ||
| Tangentialer Inhalt | ||
| Audiostream | ||
| Fett gedruckt | ||
| Basis-URI-Pfade für Elemente im Dokument | ||
| Bidirektionaler Algorithmus | ||
| Langes Zitat | ||
| Hauptteil der Seite | ||
| Zeilenumbruch | ||
| HTML-Formularschaltfläche | ||
| Canvas für dynamische Grafiken | ||
| Kommentar | ||
| Tabellenüberschrift | ||
| Zitat | ||
| Code-Referenz | |
| Tabellenspalte | ||
| Tabellenspaltengruppierung | ||
| Befehl oder Aktion auf der Seite | ||
| Dokumenttypdefinition | ||
| Datenraster | ||
| Vordefinierte Optionen für andere Steuerelemente | ||
| Definitionslistenbeschreibung oder Diskursspanne | ||
| Gelöschter Text | ||
| Zusätzliche On-Demand-Informationen | ||
| Definition | ||
| Konversation | ||
| Logische Einteilung | ||
| Beschreibungsliste | ||
| Definitionsliste Begriff oder Dialogsprecher | ||
| Betonung | ||
| Embedded Element für Plugins | ||
| Formularsteuerungsgruppe | ||
| Die Bildunterschrift für a | ||
| Abbildung mit optionaler Bildunterschrift | ||
| Fußzeile der Seite | ||
| Bilden | ||
| Überschrift der ersten Ebene | ||
| Überschrift der zweiten Ebene | ||
| Überschrift der dritten Ebene | ||
| Schlagzeile der vierten Ebene | ||
| Schlagzeile der fünften Ebene | ||
| Schlagzeile der sechsten Ebene | ||
| Kopf des Dokuments | ||
|
| Kopf einer Seite | |
| Überschrift Gruppe | ||
| Horizontale Regel | ||
| Wurzelelement einer Webseite | ||
| Kursiver Textstil | ||
| Inline-Frame | ||
| Bild | ||
| Eingabeformularelement | ||
| Formelement für Schaltflächen | ||
| Checkbox-Formularelement | ||
| Farbeingabe | ||
| Datumseingabe | ||
| Globale Datums- und Uhrzeiteingabe | ||
| Lokale Datums- und Uhrzeiteingabe | ||
| E-Mail-Adresseingabe | ||
| Formularelement für Dateiupload | ||
| Verstecktes Formularfeldelement | ||
| Bildformularelement | ||
| Eingabe von Jahr und Monat | ||
| Zahleneingabe | ||
| Kennwort-Formularelement | ||
| Optionsfeld-Element | ||
| Ungenaue Zahleneingabe | ||
| Schaltflächenformelement zurücksetzen | ||
| Suchfeld | ||
| Button Formularelement senden | ||
| Telefonnummer eingeben | ||
| Textfeld-Formularelement | ||
| Zeiteingabe | ||
| URL-Eingabe | ||
| Eingabe für Jahr und Woche | ||
| Eingefügter Text | ||
| Vom Benutzer einzugebender Text | ||
| Generieren Sie sichere Schlüssel für die Zertifikatsverwaltung | ||
| Formularbeschriftung | ||
| Beschriftung für Feldtypen | ||
| Listenpunkt | ||
| Link zu verwandten Dokumenten | ||
| Hauptinhalt des Inhalts auf einer Seite | ||
| Clientseitige Imagemap | ||
| Markierter oder hervorgehobener Text | ||
| Liste der Befehle | ||
| Metainformationen zum Dokument | ||
| Skalaranzeige | ||
| Definieren Sie einen Bereich mit Navigationslinks | ||
| Inhalt, wenn Skripte nicht verfügbar sind | ||
| Nicht-Standardobjekt | ||
|
| Bestellte oder nummerierte Liste | |
| Gruppe von Optionen in einer Auswahlliste | ||
| Option in einer Auswahlliste | ||
| Ergebnis einer Formularberechnung | ||
| Absatz | ||
| Parameter eines Objektelements | ||
|
| Vorformatierter Text | |
| Fortschrittsanzeige | ||
| Kurzes Inline-Angebot | ||
| Ruby-Klammer | ||
| Ruby-Text | ||
| Ruby-Anmerkung | ||
| Durchgestrichener Text | ||
| Beispielausgabe | ||
| Skripte | ||
| Abschnitt einer Seite | ||
| Listen oder Dropdown-Menüs auswählen | ||
| Kleine Schriftgröße | ||
| Medienquelle | ||
| Generischer Inline-Style-Container | ||
| Starke Betonung | ||
| Style Sheets | ||
| Index | ||
| Zusammenfassung des DETAILS-Elementinhalts | ||
| Hochgestellt | ||
| Tabelle | ||
| Tabellenkörperzeilen | ||
| Tabellenzelle | ||
| Mehrzeiliges Formularelement | ||
| Tabellenfußzeilen | ||
| Tabellenkopfzelle | ||
| Tabellenkopfzeilen | ||
| Definiert die Zeit | ||
| Titel | ||
| Tischreihe | ||
|
| Ungeordnete oder aufgezogene Liste | |
| Variabler oder benutzerdefinierter Text | ||
|
Video oder Film in Seite eingebettet |
