kaxigt.com

Jag skriver om webben för webben

Skillnader mellan HTML och HTML5

Postad: 16 april 2022 | HTML-guider | No Comments
Lästid: 4 minuter
Den här artikeln är omarbetad.

Vad är HTML5?

HTML5 är den senaste versionen av HTML som stöder multimedia, taggar, element, förbättrade markups och nya API:er.

HyperText Markup Language (HTML) är det mest använda märkningsspråket för att skapa webbsidor och applikationer. HTML innefattar fördefinierade element och taggar för att märka innehållsbitar och beskriva sidornas struktur.

Även om både HTML och HTML5 är märkspråk så är den största skillnaden dem emellan att HTML5 är den senaste versionen av HTML och stöder fler funktioner. Låt oss kika lite närmare på dessa.

HTML

HTML5

HTML tillhandahåller inte inbyggt ljud- och videostöd. HTML5 tillhandarhåller inbyggt ljud- och videostöd.
HTML stöder endast vektorgrafik om den används i kombination med olika tekniker som Flash, VML eller Silverlight. HTML5 stöder SVG (Scalable Vector Graphics), Canvas och annan virtuell vektorgrafik.
HTML tillåter inline MathML och SVG i text med begränsad användning. HTML5 tillåter inline MathML och SVG i text.
HTML tillåter inte användare att rita former som cirklar, trianglar och rektanglar. HTML5 tillåter användare att rita former som cirklar, trianglar och rektanglar.
HTML använder endast webbläsarens cache och cookies för att lagra data tillfälligt. HTML5 använder SQL-webbdatabaser, lokal lagring och applikationscache för att lagra data tillfälligt.
JavaScript och webbläsargränssnitt körs i samma tråd. JavaScript och webbläsargränssnitt körs i separata trådar.
Längre dokumenttypsdeklaration. Kortare dokumenttypsdeklaration.
Längre teckenkodningsdeklaration. Använder ASCII-teckenuppsättningen. Kortare teckenkodningsdeklaration. Använder teckenuppsättningen UTF-8.
Kompatibel med de flesta webbläsarna Endast kompatibel med nyare webbläsare med tanke på att det finns många nya taggar och element som bara vissa webbläsare stöder.
Byggd baserad på Standard Generalized Markup Language (SGML). HTML5 har förbättrade tolkningsregler som ger förbättrad kompatibilitet.

Utöver funktionerna här ovan så har HTML5 flera ändringar, du kan även läsa om dem i länken Vad är nytt i HTML5.1

  1. Vissa borttagna element: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike och tt.
  2. Nya formulärkontroller såsom: dates and times, email, number, range, tel, url, search, color och datalista.
  3. Många nya element inklusive: video, nav, aside, progress, canvas, section, meter och time.
  4. Nya API:er med olika funktioner som dra-och-släpp-stöd, manipulering av webbläsarhistorik samt läs- och låsskärmsorienteringsläge.
  5. Nya attribut som exempel async, manifest, sandbox, srcdoc och reversed.
  6. Nya globala attribut som hidden, roll, spellcheck och translate.

Viktiga fördelar med HTML5 för utvecklare

HTML5 skapades för att förbättra WWW-upplevelsen och ge webbutvecklare mer flexibilitet när de designar webbplatser.

De flesta större webbläsare har stöd för att analysera/parsa strukturella eller syntaktiskt felaktiga HTML-koder (felaktig syntax). Men fram till för några år sedan så fanns det ingen standardiserad process för att hantera detta vilket innebär att webbläsarutvecklare var tvungna att utföra felaktiga HTML-dokumenttester i olika webbläsare (testa doctype sniffing och degradera till bakåtkompatibelt läge – quirks mode/doctype switching) för att skapa förbättrade felhanteringsprocesser genom ”reverse engineering” (omvänd teknik).

Hanteringen att testa felhanteringen i HTML5 har gjort en enorm skillnad i detta avseende med de förbättrade analysalgoritmerna som används i HTML5.

Du kan läsa mer om problemet webbläsarkompatibilitet, felaktigt doctype, kodstandarder och doctype sniffing i artikeln XHTML (Strict) – mer än en enkel kodstandard (ej nybörjarnivå).

Förbättrad semantik för elementen

Semantiken har i och med HTML5 förbättrats för olika befintliga element i HTML. Den semantiska markup-strukturen för ett dokument i HTML5 ser lite annorlunda ut. Section, article, nav och header är de nya elementen som ersätter vissa föråldrade div-element. Eftersom elementen är enklare blir således processen med felsökning mindre komplicerad.

HTML5 semantic elements

Ett förbättrat stöd för webbapplikationsfunktioner

Ett av de absolut primära målen med HTML5 är att tillåta webbläsare att fungera som applikationsplattformar. Förr var utvecklare tvungna att använda lösningar eftersom många server-side-teknologier och webbläsartillägg inte fanns.

Just nu finns det inget behov av att använda någon JavaScript-baserad eller Flash-lösning som tidigare gjorts i HTML4 eftersom det finns element i HTML5 som tillhandahåller alla funktioner. Flash är dessutom bannad hos de flesta webbläsare på grund av säkerhetsrisken.

Den mobila webben görs mer enkel

Gruppen som använder smartphones ökar ständigt och har expanderat runt om i världen under det senaste decenniet vilket kräver ett behov av att ständigt förbättra HTML-standarderna. Slutanvändarna vill ha tillgång till webbresurser när som helst via vilken mobil enhet som helst. En responsiv webbplats är med andra ord ett krav och ger dessutom mer juice ur ett SEO-perspektiv.

HTML5 är mer mobilvänligt jämfört med sina tidigare versioner eftersom det vänder sig till mobila enheter som surfplattor och smartphones

Elementet Canvas

En av funktionerna i HTML5 är elementet <canvas> man kan använda för att rita olika grafiska komponenter såsom rutor, cirklar, text och bilder. Det är dock värt att nämna att <canvas>-elementet bara är en grafisk container. För att definiera grafiken måste alltså ett skript också köras. Ett javascriptexempel i kombination med elementet <canvas> kan se ut som här under.

<canvas id=”TestCanvas” width=”200? height=”100?></canvas>
var c = document.getElementById(“TestCanvas”);
var context = c.getContext(“2d”);
context.fillStyle = “#FF0000”;
context.fillRect(0,0,140,75);

Elementet Menu

De nya tillagda elementen <menu> och <menuitem> är komponenter i specifikationerna för interaktiva element. Dessa två objekt kan användas i webbutveckling för att säkerställa en förbättrad webbinteraktivitet. Taggen <menu> representerar menykommandon i mobila och stationära applikationer för enkelhets skull. Se exempel här under.

<body contextmenu=”new-menu”>
    <menu id=” new-menu” type=”context”>
    <menuitem>Hello!</menuitem>
    </menu>
</body>

Anpassningsbara dataattribut

Även om det är möjligt att lägga till anpassade attribut till de äldre versionerna av HTML så är det väldigt riskabelt eftersom attribut som är anpassade kan stoppa en sida från att renderas helt i HTML4 och orsaka felaktiga eller ogiltiga dokument.

Lyckligtvis har data-*-attributet i HTML5 fått ett slut på detta problem.

Det här attributets primära mål är att lagra extra information om olika element. Det finns också andra användningsområden för det här attributet, till exempel styling av CSS-element eller åtkomst till ett elements dataattribut via jQuery.

Anpassad data kan nu inkluderas och det ger utvecklare en chans att skapa engagerande och effektiva sidor utan att införa komplicerade sökningar på serversidan eller Ajax-anrop.

Cookies ersätts med webblagring

HTML5 använder webblagring eller lokal lagring för att ersätta cookies. I den äldre HTML-versionen, om utvecklare ville lagra något, var de tvungna att använda cookies som innehåller en liten mängd data – bara runt 4 KB.

Cookies har dock flera nackdelar – de kan löpa ut, begränsa användningen av komplexa data eftersom de bara tillåter strängvariabler och sakta ner prestandan genom att överföra ytterligare skript till servern.

Som jämförelse tillåter den lokala lagringen att data lagras permanent på klientens dator om inte användaren raderar dem. Den har också större datalagring – minst 5 MB – och belastar inte servern med några förfrågningar.


[https://www.hostinger.com/tutorials]