Hoewel de ontwikkeling vele jaren eerder was begonnen, begon HTML5 in 2010 voor het eerst echt algemeen te worden gebruikt door webontwerpers / -ontwikkelaars. Direct uit de poort voelde de taal bij veel webprofessionals vertrouwd omdat in plaats van alles uit het niets opnieuw uit te vinden, HTML5 gebouwd op wat eerder was gekomen. Iedereen die HTML 4.01 kende, ontdekte al snel dat nogal wat van die versie nu in HTML5 te vinden was.
Hoewel HTML5 veel elementen bevat die al een tijdje in HTML bestaan, introduceerde het ook een handvol elementen die nieuw waren voor HTML5. Voor veel van deze nieuwe elementen werd een benadering gebruikt die "het bestraten van de koeienpadden" werd genoemd. Dit is een term die veel wordt gebruikt in IT om in essentie te betekenen dat je moet kijken naar wat mensen al doen en doen. In het geval van webontwerpers was dit bedoeld om te zien hoe ze al pagina's aan het opbouwen waren en om beslissingen te baseren op nieuwe elementen voor die activiteiten. Veel webprofessionals zouden bijvoorbeeld websites bouwen met divisies die ID- of Class-kenmerken van 'header', 'nav' en 'footer' gebruikten. Als zodanig heeft HTML5 deze als nieuwe elementen geïntroduceerd, waardoor webprofessionals meer betekenis aan hun documenten kunnen toevoegen door gebruik te maken van speciale sectie-elementen in plaats van alleen divisies. Deze combinatie van bekendheid en een aanpak die de huidige praktijken erkende, hielp HTML5 snel omarmd te worden door de webontwerpindustrie.
Het HTML5 Doctype
Ten eerste, om nieuwe HTML5-elementen te gebruiken, moet uw document het HTML5-doctype bevatten dat is:
U zult merken dat dit doctype niet specifiek "HTML5" vermeldt, maar in plaats daarvan eenvoudig de versie als "html" vermeldt. Dit komt omdat dit doctype is wat bedoeld is om in de toekomst voor alle iteraties van de taal te worden gebruikt.
Het is de bedoeling dat HTML5 de laatste genummerde versie van de taal is, met nieuwe wijzigingen die in de toekomst op consistente basis worden toegevoegd. Sommige elementen in de onderstaande lijst zijn zelfs toegevoegd aan de taal na die initiële push in 2010!
De HTML5-tags
Label | Uitleg | |
---|---|---|
Anker of link | ||
Afkorting | ||
Adres of auteurs van het document | ||
Client-side image map | ||
Artikel | ||
Tangentiële inhoud | ||
Audiostream | ||
Stoutmoedig | ||
Base URI-paden voor elementen in het document | ||
Bi-directioneel algoritme | ||
Lange prijsopgave | ||
Tekst van de pagina | ||
Kabelbreuk | ||
HTML-formulierknop | ||
Canvas voor dynamische afbeeldingen | ||
Commentaar | ||
Tabel titel | ||
Citaat | ||
| Codeverwijzing | |
Tabel kolom | ||
Tabelkolomgroepering | ||
Commando of actie op de pagina | ||
Document type definitie | ||
Data rooster | ||
Voorgedefinieerde opties voor andere bedieningselementen | ||
Definitie lijst beschrijving of span of discourse | ||
Verwijderde tekst | ||
Extra on-demand informatie | ||
Definitie | ||
Gesprek | ||
Logische verdeling | ||
Beschrijving lijst | ||
Definitie lijstterm of dialoog spreker | ||
Nadruk | ||
Ingesloten element voor plug-ins | ||
Formuliercontrolegroep | ||
Het onderschrift gebruikt voor een | ||
Figuur met optionele bijschrift | ||
Voettekst van de pagina | ||
Het formulier | ||
Kop op het eerste niveau | ||
Tweede niveau kop | ||
Kop op het derde niveau | ||
Vierde niveau kop | ||
Kop van het vijfde niveau | ||
Zesde niveau kop | ||
Hoofd van het document | ||
| Kop van een pagina | |
Kopgroep | ||
Horizontale regel | ||
Wortelelement van een webpagina | ||
Tekststijl in cursief | ||
Inline frame | ||
Beeld | ||
Invoer formulierelement | ||
Knop formulierelement | ||
Checkbox formulierelement | ||
Kleurinvoer | ||
Datum invoer | ||
Wereldwijde invoer van datum en tijd | ||
Lokale datum- en tijdinvoer | ||
E-mailadres invoeren | ||
Bestand upload formulierelement | ||
Verborgen veldelement | ||
Afbeelding vormelement | ||
Jaar en maand invoer | ||
Nummerinvoer | ||
Wachtwoord formulierelement | ||
Keuzerondje met knop | ||
Onnauwkeurige nummerinvoer | ||
Reset knop formulierelement | ||
Zoekveld | ||
Verstuur knop formulier element | ||
Telefoonnummer invoer | ||
Tekstveld formulierelement | ||
Tijd invoer | ||
URL-invoer | ||
Jaar- en weekinvoer | ||
Ingevoegde tekst | ||
Tekst die door de gebruiker moet worden ingevoerd | ||
Genereer beveiligde sleutels voor certificaatbeheer | ||
Formulierlabel | ||
Bijschrift formulierveldset | ||
Lijstitem | ||
Link naar gerelateerde documenten | ||
Hoofdgedeelte van inhoud op een pagina | ||
Client-side image map | ||
Gemarkeerde of gemarkeerde tekst | ||
Lijst met opdrachten | ||
Meta-informatie over het document | ||
Scalar-meter | ||
Definieer een gebied met navigatielinks | ||
Inhoud wanneer scripts niet beschikbaar zijn | ||
Niet-standaard object | ||
| Bestelde of genummerde lijst | |
Groep opties in een selectielijst | ||
Optie in een selectielijst | ||
Resultaat van een formulierberekening | ||
paragraaf | ||
Parameter van een objectelement | ||
| Voorgeformatteerde tekst | |
Voortgangsindicator | ||
Korte inline-offerte | ||
Ruby haakjes | ||
Ruby tekst | ||
Ruby-annotatie | ||
Strikeout-tekst | ||
Voorbeelduitvoer | ||
scripts | ||
Sectie van een pagina | ||
Selecteer of drop-down menulijsten | ||
Kleine lettergrootte | ||
Mediabron | ||
Generieke inline-stijlcontainer | ||
Sterke nadruk | ||
Stijlbladen | ||
Onderschrift | ||
Samenvatting van de inhoud van het DETAILS-element | ||
superscript | ||
Tafel | ||
Tabel lichaam rijen | ||
Tabelcel | ||
Meerregelig formulierelement | ||
Tabel voettekst rijen | ||
Tabelkopcel | ||
Tabelkoprijrijen | ||
Bepaalt de tijd | ||
Titel | ||
Tafel rij | ||
| Ongeordende of samengestelde lijst | |
Variabele of door de gebruiker gedefinieerde tekst | ||
Video of film ingesloten in pagina |