kaxigt.com

Vad är HTML5?

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.

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

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.

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.

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.

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

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]