HTML vs HTML5. Wat is het grote verschil? Als je aan front-end development wilt doen of met code wilt werken in WordPress, is het natuurlijk belangrijk dat je het verschil kent. Wat voor veel verwarring zorgt, is het feit dat sommige mensen de twee termen door elkaar gebruiken. Maar hoewel ze verwant zijn, zijn het technisch gezien twee verschillende dingen.
Laten we eens kijken naar de verschillen tussen HTML en HTML5, welke beter is, en wat er is veranderd met de grootste update van de populaire opmaaktaal.
Wat is HTML?
HTML staat voor HyperText Markup Language. Het vormt de bouwsteen van het web en is waarschijnlijk de meest bekende coderingstaal die er is.
HTML is de standaardtaal die voor webontwikkeling wordt gebruikt. Hiermee kan je de basisstructuur van een webpagina maken met behulp van korte tags, markup-tags genaamd. Om bijvoorbeeld een stuk tekst cursief te maken, kun je het als volgt in HTML tags verpakken:
Italicized text.
De meeste HTML is eenvoudig en leesbaar, zodat zelfs niet-ontwikkelaars er gemakkelijk mee kunnen werken. Rekening houdend met het belang voor het World Wide Web is het verbazingwekkend eenvoudig om HTML te leren.
Het is onmogelijk een website te maken zonder HTML te gebruiken. Hoewel er websitebouwers zijn die je een site kunnen laten ontwerpen zonder enige code aan te raken, inclusief WordPress, behandelen ze nog steeds HTML code voor je achter de schermen.
Dus als je webontwikkelaar wilt worden of je wilt verdiepen in tools zoals WordPress, moet je natuurlijk HTML leren.
HTML wordt vaak gecombineerd met andere talen zoals CSS en JavaScript om de functionaliteit uit te breiden. Met CSS kun je HTML stylen door kleuren, lay-outs en meer toe te voegen, terwijl JavaScript een meer traditionele programmeertaal is waarmee je geavanceerde functies kan toevoegen.
Hoewel deze twee talen goed samengaan met HTML, zijn ze niet strikt noodzakelijk om een website te maken. HTML is wel vereist, en daarom is het de belangrijkste webtaal.
Wat is HTML5?
HTML5 is geen afzonderlijk systeem, maar eigenlijk de nieuwste versie van de HTML technologie. De voorganger ervan, HTML4, werd voor het eerst en voor het laatst bijgewerkt in december 1999. HTML5 zelf is eigenlijk niet zo nieuw en werd enkele jaren geleden uitgebracht, in 2014.
Dus wat is het grote verschil? Waarom die hype? Hoewel veel van de markup-tags ongewijzigd blijven (repareer niet wat niet kapot is), zijn verschillende ervan vereenvoudigd, zodat het veel gemakkelijker en sneller is om code te schrijven. Het is gebaseerd op een geheel nieuwe standaard en de parsing is ook geheel anders.
In tegenstelling tot oudere versies van HTML, waarmee je vooral statische sites kon maken die je moest opleuken met CSS en JavaScript, is HTML5 veel dynamischer en bevat het multimedia-elementen. Het ondersteunt van nature video en audio en je kunt er zelfs spelletjes of animaties mee maken.
Met andere woorden, HTML5 is volledig in staat dingen te doen die voorheen met oude hulpmiddelen zoals JavaScript, Flash of Silverlight moesten worden gedaan. Dit betekent dat jouw site veiliger is en minder vatbaar is voor aanvallen door personen die toegang willen krijgen tot je site.
En hoewel CSS en JavaScript zeker nog nodig zijn om een volwaardige website te maken, hoef je er niet langer op te vertrouwen om überhaupt iets dynamisch te doen.
HTML5 is niet langer alleen een website-bouwer. Het is een hele applicatie-bouwer op zich.
In plaats van dat de volgende update uitkomt als “HTML6”, wordt HTML5 voortdurend bijgewerkt als een taal die zich mee-evolueert met de vereisten van het internet. Het is de nieuwste en beste versie van deze langdurige technologie en het zal er nog lang zijn.
HTML vs HTML5: Wat zijn de verschillen?
Wanneer de meeste mensen het over “HTML” hebben, verwijzen ze naar de technologie als geheel, inclusief de nieuwste versie: HTML5. Hoewel het in veel opzichten heel anders is, is HTML5 eigenlijk gewoon een gepolijste update van de oude standaard.
Hoewel HTML en HTML5 deel uitmaken van hetzelfde systeem, bracht de grote update verschillende verbeteringen aan de oude coderingstaal waardoor deze nog efficiënter werd. Hier zijn slechts een paar voorbeelden van wat er is toegevoegd.
Compatibiliteit
Toen HTML5 voor het eerst uitkwam, was compatibiliteit een grote zorg en een belangrijke reden waarom velen ervoor kozen hun site nog niet te upgraden. Als de browser niet weet hoe een HTML5 tag moet worden geparsed, kan dit resulteren in kapotte of vreemd uitziende pagina’s.
Het tegenovergestelde is echter dichterbij de realiteit: websites die zijn geschreven in de oude HTML4 standaarden falen vaak in moderne browsers, omdat browsers de ondersteuning voor verouderde functies al lang geleden hebben laten vallen. Als je compatibel wilt blijven met de browsers van de meeste mensen, is HTML5 de juiste keuze.
Hoewel oudere versies van HTML goed werken in browsers zoals Internet Explorer, worden deze verouderde versies niet langer ondersteund of gebruikt door een meerderheid van de gebruikers. De meeste mensen hoeven een website niet te coderen voor dergelijke oude browsers dus het is niet nodig om HTML4 te gebruiken.
Zoals je hier kan zien, worden HTML5 en de meeste functies ervan ondersteund door alle moderne browsers. De nieuwe tags worden volledig of gedeeltelijk ondersteund in alle versies, behalve in Internet Explorer versies 6–8 en Firefox 2, die allemaal uit het begin van de jaren 2000 stammen en tegenwoordig zelden worden gebruikt.
Hoewel alle moderne browsers HTML4 technisch ondersteunen, is de ondersteuning voor verouderde tags niet optimaal. Je moet het gebruik van verouderde standaarden dus vermijden en overschakelen naar HTML5.
Multimedia-ondersteuning
Een van de grootste dingen die HTML5 op tafel legt, is ondersteuning voor multimedia-elementen zoals audio, video, vectorafbeeldingen, animaties en games.
Vroeger was het voor het plaatsen van een simpele animatie op je site meestal JavaScript, Flash of een andere technologie nodig. Nu kan je het in HTML of CSS doen zonder jezelf open te stellen voor mogelijke exploits.
Met video en audio is het insluiten van een speler niets meer dan een kwestie van het plaatsen van een eenvoudige tag. Er is veel bovendien veel configuratie mogelijk, zoals automatisch afspelen inschakelen of bedieningselementen voor de speler toevoegen.
HTML5 ondersteunt ook het insluiten van SVG vectorafbeeldingen die in elke resolutie kunnen worden veranderd zonder pixelvorming. SVG’s worden steeds populairder voor het online weergeven van afbeeldingen omdat ze uitgetrokken kunnen worden om elk schermformaat te vullen.
Ten slotte kun je volwaardige videogames maken met HTML5, vooral als je het combineert met JavaScript. Veel tools voor het maken van games kunnen zelfs worden overgezet naar HTML5 zodat je het resultaat op jouw website kan insluiten.
Deze multimedia-ondersteuning maakt HTML5 de ideale kandidaat om veel verouderde technologieën te vervangen, waaronder Java Web Start, Silverlight en recentelijk Flash. Bijna alles wat je met deze systemen kan doen, kan eenvoudiger en efficiënter worden gedaan in HTML5.
SGML
De oorspronkelijke HTML-taal (tot versie 4) was sterk gebaseerd op de SGML-standaard of Standard Generalized Markup Language.
Hoewel SGML bedoeld is om opmaak te standaardiseren, verwarring te elimineren en zowel HTML als XML heeft geïnspireerd, stamt het af van een taal die in de jaren zestig is gemaakt. Het is oud en dus niet ontworpen met het oog op moderne webapplicaties.
HTML5 is geëvolueerd om niet langer te voldoen aan SGML; het parst in plaats daarvan met zijn eigen unieke regels. Hoewel de oorsprong nog steeds in SGML ligt en HTML5 slechts een uitbreiding is op de bestaande technologie, voldoet het niet langer aan die standaarden.
Een gevolg hiervan is dat foutafhandeling nu veel vergevingsgezinder is. Een kleine fout zal niet langer resulteren in een in het oog springend probleem voor kijkers op je pagina of in een pagina die helemaal niet laadt.
Semantiek of tags, zijn ook drastisch verbeterd. Voorheen vereiste het structureren van je pagina zonder uitzondering het constante gebruik van <div> tags: <div id=“header”>, <div id=“menu”>, en <div class=“post”>.
In HTML5, zouden die onhandige codes zijn <header>, <nav>, en <article>. Deze tags zijn zowel mooier als responsiever.
Er werden ook verschillende nieuwe tags geïntroduceerd. Velen van hen zijn gemaakt om de div’s en frames te vervangen die voorheen werden gebruikt om pagina’s te structureren.
Veel van de oude markup-tags zijn volledig ongewijzigd gebleven. Daardoor is HTML5 gedeeltelijk achterwaarts compatibel met oudere versies. Een niet-bijgewerkt HTML4 document zal niet langer correct worden geparst met de nieuwe standaarden.
Hoewel er nogal wat verschillen zijn tussen HTML en HTML5, zijn de wijzigingen over het algemeen positief te noemen en bedoeld om de opmaaktaal toegankelijker te maken.
Betere prestaties en mobiele ondersteuning
Een van de grootste voordelen van HTML5 is dat het veel sneller en veel responsiever is dan eerdere iteraties. In het tijdperk van de originele HTML waren andere apparaten dan computers die toegang hadden tot internet nog geen droom; nu is het allemaal toegankelijk vanaf onze telefoons, horloges en televisies, mede dankzij de snelheid van HTML5.
De nieuwe versie bracht betere standaarden om websites soepeler te laten werken op kleinere, minder krachtige apparaten. Veel prestatieproblemen zijn nog steeds afhankelijk van jou en de kwaliteit van je code. Er waren echter veel losse eindjes aan de HTML kant met de HTML5 update.
HTML5 ondersteunt bijvoorbeeld multi-threading met JavaScript Web Workers, waardoor de processor van je apparaat meer kracht kan gebruiken om scripts uit te voeren. Code waardoor vroeger een pagina vastliep, werkt nu naadloos.
Het ontwerpen van responsieve websites is ook veel eenvoudiger in HTML5. HTML4 had veel niet-reagerende elementen, zoals div’s, vervangen door structuurtags die beter werken op mobiele apparaten.
Verder zijn frames verwijderd omdat ze problemen met de bruikbaarheid en de toegankelijkheid veroorzaakten. Hoewel ze nog steeds worden ondersteund, zijn ze verouderd en mogen ze niet worden gebruikt, tenzij je reden hebt om met verouderde technologie te werken.
Hoewel er geen directe HTML5 vervanging voor frames is, is het raadzaam om CSS elementen zoals flexboxen of iframes (die nog steeds worden ondersteund in HTML5) te gebruiken om de oude functionaliteit te vervangen.
Betere controle over formulieren
Nieuwe besturingselementen voor formulieren betekent dat je meer controle hebt over je site. Hoewel dit misschien een kleine functie lijkt, betekent dit wel dat je één externe technologie minder nodig hebt om een werkend formulier op je site te krijgen.
Oorspronkelijk ondersteunde HTML alleen de invoertypes voor tekst, wachtwoord, verbergen, checkbox/radio en het uploaden van bestanden. Hoewel dat het voldoende is om een formulier met basisgegevens te maken kan je nu zoveel meer doen met HTML5 input-types.
Nieuwe toevoegingen zijn onder meer e-mail, telefoonnummer, URL, zoekvak, schuifregelaar, numerieke invoer, datum- en tijdkiezer en kleurkiezer.
Met deze gevarieerde reeks invoertypen kan je betere formulieren maken die meer inhoudstypen kunnen accepteren, inclusief validatie om ervoor te zorgen dat ze correct zijn. Bekijk de volledige lijst met HTML-invoer voor meer informatie.
Webopslag
Als het gaat om webopslag, ondersteunen HTML4 en lager cookies en weinig anders. Het opslaan van alle informatie – afgezien van minimale tracking van gebruikers in een kleine cookie van 4 kilobytes – was bijna onmogelijk.
Aan de andere kant kan je met lokale opslag 5-10 megabytes aan gegevens opslaan, afhankelijk van de browser. Hiermee kan je client-side informatie over eerdere sessies, offline toegangsgegevens, persoonlijke aanpassingen en meer opslaan. Bovendien wordt lokale opslag niet automatisch gewist, in tegenstelling tot cookies.
Een voorbeeld van wat je kan doen met lokale opslag is de voorkeur van een gebruiker voor het lichte of donkere thema op je site opslaan zodat ze jouw site bij hun volgende bezoek blijven zien zoals ze dat willen. Hoewel je met cookies ook gebruikersvoorkeuren kan opslaan, zal de browser deze na enige tijd onvermijdelijk wissen.
HTML5 ondersteunt lokale opslag via de Web Storage API. Het ondersteunt ook Web SQL databaseopslag, geïndexeerde databaseopslag en zelfs bestandstoegang met de File API. Veel van deze integreren met JavaScript via API’s. Voordien was het ofwel extreem omslachtig om te doen of in sommige gevallen was het gewoonweg niet mogelijk.
Wat is beter: HTML of HTML5?
Als je wilt leren coderen, moet je zeker geen verouderde standaarden gebruiken. HTML5 is de nieuwste versie van HTML en moet altijd de voorkeur genieten boven oudere versies van de taal.
Zoals hierboven vermeld, verbetert HTML5 verschillende aspecten van HTML4 die verouderd waren en moeilijk waren om mee te werken. Bovendien kan HTML5 veel dingen van zichzelf doen, terwijl HTML4 volledig vertrouwt op verouderde systemen zoals Silverlight, Java Web Start en Flash.
Hoewel HTML5 niet altijd correct wordt weergegeven op heel oude browsers en besturingssystemen (zoals Internet Explorer of oude versies van mobiele telefoons), zijn deze platforms extreem verouderd en worden ze zelden meer gebruikt. Er zijn geen goede redenen meer om verouderde HTML versies boven moderne standaarden te verkiezen.
Helaas staat er op internet en in boeken veel informatie over oudere versies van HTML. Wanneer je een gids opzoekt of leert van een cursus of boek, zorg er dan voor dat het over HTML5 gaat en na 2014 is uitgebracht of bijgewerkt. Het heeft geen zin om verouderde normen uit 1999 te leren.
Hoe HTML naar HTML5 te converteren?
Als je een oudere website hebt, moet je deze updaten. Er is helaas geen echte manier om een totale conversie uit te voeren zonder handmatig werk te doen.
Je kan het beste de HTML5 specificatie doorlezen (of een HTML cursus volgen als de taal helemaal nieuw voor je is) en vertrouwd raken met de wijzigingen. Daarna kan je de code herschrijven en de nieuwe functies toevoegen die ze in HTML5 hebben toegevoegd.
Bekijk deze handleiding voor het migreren van HTML4 naar HTML5. Het behandelt uitgebreid de handmatige wijzigingen die je in de code moet aanbrengen.
Je zou ook deze XHTML naar HTML5 converter kunnen proberen, maar zorg ervoor dat je je code handmatig doorneemt of in een validator invoegt voordat je deze naar een live site importeert.
Gelukkig brengt HTML5 voornamelijk nieuwe dingen en zijn er maar weinig dingen uitgefaseerd of gewijzigd. Er zijn wel een paar verouderde tags die je moet vervangen, maar daarnaast is het upgraden van de code meestal geen grote opdracht. Dit is anders indien je site sterk afhankelijk is van verouderde technologie zoals frames.
Samenvatting
Hoewel ze een verschillende betekenis hebben zijn HTML en HTML5 slechts twee delen van dezelfde technologie. HTML verwijst naar de opmaaktaal als geheel, vaak naar de nieuwste versie, terwijl HTML5 de laatste update ervan is.
Als je HTML wilt leren, is het belangrijk om de nieuwste editie te gebruiken: HTML5. Het is in elk opzicht beter. Zelfs als het betekent dat je veel oude code handmatig moet converteren is het zeker de moeite waard.
HTML5 is nu een aantal jaren oud en als de levende standaard van de taal als geheel, zal het alleen maar worden bijgewerkt om met het moderne web te werken.
Laat een reactie achter