Vad är den stora skillnaden mellan HTML och HTML5? Om du vill börja med frontend-utveckling eller arbeta med kod i WordPress, måste du ha koll på detta. Det kan vara rätt så förvirrande eftersom vissa människor använder dessa termer lite sporadiskt, men de är tekniskt sett två olika saker – även om de även är relaterade.
Låt oss gå igenom skillnaderna mellan HTML vs HTML5. Vad är bättre, och vad har förändrats efter det populära språkets största uppdatering.
Vad är HTML?
HTML står för HyperText Markup Language. Det utgör webbens byggstenar, och är förmodligen det mest kända kodningsspråket som finns.
HTML är standardspråket när det gäller webbutveckling. Det finns många webbutvecklingsverktyg som du kan använda när du arbetar med HTML. De låter dig skapa basstrukturen på en webbsida med små taggar som kallas markeringstaggar. Om du exempelvis vill kursivera en text kan du radbryta den i HTML-taggar på det här sättet:
<i>Italicized text.</i>
Mycket i HTML-språket är enkelt och mänskligt läsbart. Detta gör att även icke-utvecklare tycker att det är smidigt att arbeta med. Med tanke på hur viktigt det är för World Wide Web är det chockerande enkelt att börja med HTML.
Det är omöjligt att skapa en webbplats utan att använda HTML. Även om det finns webbplatsbyggare som låter dig designa en webbplats utan att röra någon kod, WordPress inkluderat, hanterar de fortfarande HTML-kod bakom kulisserna.
Så om du vill bli webbutvecklare eller djupdyka i verktyg som exempelvis WordPress måste du naturligtvis lära dig HTML.
HTML paras ofta ihop med andra språk som CSS och JavaScript för att utöka dess funktionalitet. CSS hjälper dig att utforma HTML genom att lägga till färger och layouter med mera. JavaScript är ett mer traditionellt programmeringsspråk som gör att du kan lägga till avancerade funktioner.
Även om dessa två språk funkar bra ihop med HTML, är de inte strikt nödvändiga för att skapa en webbplats. HTML är det enda som krävs, och är därför det viktigaste webbspråket.
Vad är HTML5?
HTML5 är inte ett separat system, utan snarare den senaste versionen av HTML-tekniken. Föregångaren HTML4 hade sin första och sista uppdatering i december 1999. Faktum är att HTML5 inte är särskilt nytt, det släpptes redan år 2014.
Så vad är den stora skillnaden? Varför all hype? Även om många av markeringstaggarna har förblivit oförändrade (man ska ju inte laga det som inte är trasigt), har flera av dem förenklats, så det är mycket enklare och snabbare att skriva kod. HTML5 är baserat på en helt ny standard, och dess tolkning är också helt annorlunda.
I äldre versioner av HTML, kunde du främst skapa statiska webbplatser som behövde kryddas med CSS och JavaScript. HTML5 är mycket mer dynamiskt och innehåller multimediaelement. Det stöder inbyggd video och ljud, och du kan till och med skapa spel eller animationer med detta språk.
HTML5 är med andra ord fullt kapabelt att göra saker som du tidigare behövde göra med gamla verktyg som JavaScript, Flash eller Silverlight. Detta innebär att din webbplats är säkrare och mindre öppen för intrång från angripare som försöker komma in.
Och även om CSS och JavaScript fortfarande är nödvändiga för att skapa en fullfjädrad webbplats, behöver du inte längre förlita dig på dessa språk när det gäller dynamiken.
HTML5 är inte längre endast en webbplatsbyggare. Det är en hel applikationsbyggare.
I stället för att nästa uppdatering kommer ut som ”HTML6” uppdateras HTML5 kontinuerligt och utvecklas i takt med webbens behov. Det är den senaste och bästa versionen av denna långvariga teknik, och den kommer att vara här en lång tid framöver.
HTML vs HTML5: Vilka skillnader finns?
När de flesta pratar om ”HTML” hänvisar de till tekniken som helhet, inklusive den senaste versionen: HTML5. Även om den på många sätt är väldigt annorlunda, är HTML5 egentligen bara en polerad uppdatering av den gamla standarden.
Även om HTML och HTML5 är en del av samma system, innebar den stora uppdateringen flera förbättringar för det gamla kodningsspråket, och gjorde det ännu effektivare. Här är några exempel på vad som lades till.
Compatibilitet
När HTML5 kom ut var kompatibilitet ett stort problem och en stor anledning till att många valde att inte uppgradera sin webbplats. Om webbläsaren inte kände till hur man analyserade en HTML5-tagg kunde det resultera i trasiga eller konstiga sidor.
Motsatsen stämmer: webbplatser som är skrivna i de gamla HTML4-standarderna kommer ofta att krascha i moderna webbläsare, eftersom webbläsarna för länge sedan har tappat stödet för de föråldrade funktionerna. Om du vill förbli kompatibel med många webbläsare är HTML5 rätt väg att gå.
Även om äldre versioner av HTML fungerar bra i webbläsare som exempelvis Internet Explorer, stödjer eller använder en majoritet av användarna inte längre dessa föråldrade versioner. De flesta behöver inte koda en webbplats för så pass gamla webbläsare, så det finns inget behov av att använda HTML4.
Som du kan se här stöds HTML5 och de flesta av funktionerna i alla moderna webbläsare. Dess nya taggar stöds helt eller delvis av alla utom Internet Explorer-versionerna 6-8 och Firefox 2, som är från början av 2000-talet och sällan används idag.
Även om alla moderna webbläsare tekniskt sett stöder HTML4, är stödet för föråldrade taggar i bästa fall väldigt darrigt. Du bör undvika att använda föråldrade standarder och byta till HTML5.
Stöd för multimedia
En av de största förändringarna med HTML5 är stöd för multimediaelement som ljud, video, vektorgrafik, animationer och spel.
Förr i tiden krävdes det att du använde JavaScript, Flash eller någon annan teknik för att placera så mycket som en enkel animering på webbplatsen. Nu kan du göra detta i HTML eller CSS utan att behöva öppna dig för eventuella intrång.
När det gäller video och ljud är det lika enkelt att bädda in en spelare som att skriva en enkel tagg. Det finns gott om konfigurationer som du kan göra därifrån, som att aktivera autoplay eller lägga till spelarkontroller.
HTML5 stöder även inbäddning av SVG-vektorgrafik– bilder som kan ändra storlek i alla upplösningar utan pixelering. SVGs blir alltmer populära för att visa grafik online eftersom de kan sträckas ut och fylla varje skärmstorlek.
Slutligen kan du även skapa fullfjädrade videospel med HTML5, särskilt om du kombinerar det med JavaScript. Många spelskapande verktyg ansluter rent av till HTML5 och låter dig bädda in resultatet på din webbplats.
Detta multimediastöd gör HTML5 till den perfekta kandidaten för att ersätta många föråldrade tekniker, inklusive Java Web Start, Silverlight och senast Flash. Du kan i stort sett göra allt som du kan göra med dessa system mer enkelt och effektivt i HTML5.
SGML
Det ursprungliga HTML-språket (fram till version 4) baserades starkt på SGML-standarden eller standardgeneraliserat markeringsspråk.
Även om SGML är avsett att standardisera markeringar, eliminera förvirring och har inspirerat både till HTML och XML, härstammar det från ett språk som skapades på 1960-talet. Det är gammalt och utformades därför inte med moderna webbapplikationer i åtanke.
HTML5 har utvecklats på ett sätt som inte längre passar ihop med SGML; Det nyttjar istället analys på sina egna unika regler. Även om ursprunget fortfarande är SGML, och HTML5 endast är en förlängning av den befintliga tekniken, är det inte längre förenligt med dessa standarder.
Ett resultat av detta är det har blivit mycket mer förlåtande med felhantering. Ett litet fel kommer inte längre att resultera i ett iögonfallande problem för tittarna på din sida eller en sida som inte laddas alls.
Även semantik, eller taggar, har förbättrats drastiskt. Innan, krävde strukturen av din sida en konstant användning av <div> taggar: <div id="header">, <div id="menu">, och <div class="post">.
I HTML5 skulle dessa klumpiga koder vara <header>, <nav> och <article>. Dessa taggar är både renare och mer lyhörda.
Det introducerades även flera nya taggar. Många av dem skapades för att ersätta de divs och frames som tidigare användes för att strukturera sidor.
Många av de gamla markeringstaggarna är dock helt oförändrade, så HTML5 är delvis bakåtkompatibelt med äldre versioner. Men ett orört HTML4-dokument kommer inte längre att tolkas korrekt med de nya standarderna.
Även om det finns en hel del skillnader mellan HTML och HTML5, är ändringarna generellt till det bättre och är avsedda att göra markeringsspråket mer tillgängligt.
Bättre prestanda och mobil support
En av HTML5:s största fördelar är att det är mycket snabbare och mycket mer lyhört än tidigare iterationer. När den första versionen av HTML kom, var internetanslutning för andra enheter än datorer inte ens en dröm ännu; Nu är allt tillgängligt via våra telefoner, klockor och TV-apparater, delvis tack vare hastigheten på HTML5.
Den nya versionen gav bättre standarder för att hålla igång webbplatser smidigare på mindre kraftfulla enheter. Många prestandaproblem kommer fortfarande att bero på dig och kvaliteten på din kod. Många lösa trådar på HTML-sidan blev dock ihopbundna med HTML5-uppdateringen.
HTML5 stöder exempelvis flertrådning med JavaScript-webbarbetare, vilket gör att enhetens processor kan använda mer av sin kraft för att köra skript. Koden som brukade sakta ner en sida kommer nu att köras sömlöst.
Det är även mycket enklare att designa responsiva webbplatser i HTML5. HTML4 hade många element som inte var anpassningsbara, exempelvis divs. De är nu ersatta av strukturtaggar som fungerar bättre på mobilen.
Även Frames togs bort för att de orsakade problem med användbarhet och tillgänglighet. Även om de fortfarande stöds har de blivit föråldrade och bör inte användas om du inte har anledning att arbeta med föråldrad teknik.
Även om det inte finns någon direkt HTML5-ersättning för frames, rekommenderar vi att du använder CSS-element som flex boxes eller iframes (som fortfarande stöds i HTML5) för att ersätta den gamla funktionen.
Bättre formulärkontroller
Nya formulärkontroller skapar en ny nivå av kontroll över din webbplats. Även om detta kan verka som en liten funktion, innebär det en mindre extern teknik att förlita sig på för att skapa ett fungerande formulär.
Ursprungligen stödde HTML endast text, lösenord, dold, kryssruta / radio och filöverföringsinmatningstyper. Även om detta räcker för att skapa ett grundläggande inmatningsformulär, kan du göra så mycket mer med HTML5-inmatningstyperna nu.
Nya tillägg inkluderar e-post, telefonnummer, URL, sökruta, skjutreglage, numerisk, datum- och tidsväljare och indata för färgväljare.
Med dessa indatatyper kan du skapa bättre formulär som kan acceptera fler innehållstyper, med inkluderad validering för att säkerställa att de är korrekta. Mer information finns i den fullständiga listan över HTML-indata.
Webblagring
När det gäller webblagring stödde HTML4 och nedåt i huvudsak cookies och lite annat. Det var nästan omöjligt att lagra någon information förutom grundläggande användarspårning i en liten 4 kilobyte cookie.
Å andra sidan kan du lagra 5-10 megabyte data beroende på webbläsare. På så sätt kan du spara information på klientsidan om tidigare sessioner, offlineåtkomstdata, personliga anpassningar med mera. Lokal lagring rensas dessutom inte automatiskt, till skillnad från cookies.
Med lokal lagring kan du exempelvis spara en användares preferens för det ljusa eller mörka temat på din webbplats, vilket säkerställer att de fortsätter att se din webbplats som de föredrar vid sitt nästa besök. Även om du även kan spara användarinställningar med cookies, kommer webbläsaren oundvikligen att rensa dem efter en tid.
HTML5 stöder lokal lagring via Webblagrings-API:et. Det stöder även web QL-databaslagring, indexerad databaslagring och till och med filåtkomst med fil-API:et. Mycket av detta integreras med JavaScript via API:er. Innan HTML5 var detta antingen extremt besvärligt att göra eller, i vissa fall, helt omöjligt.
Vilket är bättre: HTML eller HTML5?
Om du vill lära dig att koda bör du definitivt undvika att använda föråldrade standarder. HTML5 är den senaste versionen av HTML och bör alltid användas framför äldre versioner av språket.
Som vi nämnde ovan har HTML5 förbättrat flera aspekter av HTML4 som var föråldrade och svåra att arbeta med. HTML5 kan dessutom göra många saker internt, medan HTML4 förlitar sig helt på föråldrade system som Silverlight, Java Web Start och Flash.
Även om HTML5 inte alltid visas korrekt i gamla webbläsare och operativsystem (exempelvis Internet Explorer eller gamla versioner av mobiltelefoner), är dessa plattformar extremt föråldrade och används sällan nuförtiden. Det finns inte längre några goda anledningar till att använda föråldrade versioner av HTML över moderna standarder.
Det finns tyvärr mycket information på Internet och i böcker om äldre versioner av HTML. När du letar upp en guide eller får kunskap av en kurs eller bok, se till att den handlar om HTML5 och släpptes eller uppdaterades efter 2014. Det är ingen idé att lära sig föråldrade standarder från 1999.
Konvertera HTML till HTML5
Om du har en äldre webbplats måste du uppdatera den. Det finns tyvärr inget sätt att göra en total konvertering utan att utföra något manuellt arbete.
Det bästa du kan göra är att läsa igenom HTML5-specifikationen (eller gå en HTML-kurs om du är helt ny på språket) och bekanta dig med ändringarna. Därefter kan du skriva om koden och lägga till de nya funktionerna som lades till i HTML5.
Kolla in den här guiden om att migrera från HTML4 till HTML5. Den går utförligt igenom de manuella ändringarna som du behöver göra i koden.
Du kan även prova den här XHTML till HTML5-omvandlaren, men se till att gå igenom koden manuellt eller infoga den i en validerare innan du importerar den till en live-webbplats.
Lyckligtvis består HTML5 mestadels av nytt innehåll. Det finns några föråldrade taggar som du måste byta ut, men förutom detta är uppgradering av koden vanligtvis inte så svårt om din webbplats inte förlitar sig starkt på föråldrad teknik som frames.
Sammanfattning
HTML och HTML5 är endast två delar av samma teknik, även om de bjuder på lite olika saker. HTML refererar till markeringsspråket som helhet, ofta till den senaste versionen, medan HTML5 är den senaste uppdateringen av detta språk.
Om du vill lära dig HTML är det viktigt att använda dig av den senaste utgåvan: HTML5. Det är bättre på alla sätt, och är definitivt värt ansträngningen, även om det innebär att du behöver konvertera mycket gammal kod manuellt.
HTML5 är flera år gammalt nu, och som en levande standard för språket som helhet kommer det ständigt att fortsätta att uppdateras för att fungera med den moderna webben.
Lämna ett svar