HTML5-standarden slutfördes och släpptes 2014, och det var vad HTML borde ha varit när den första versionen lanserades för alla dessa år sedan. HTML 2.0 var den första riktiga 'standard' som publicerades helt tillbaka 1995. Två år senare publicerades HTML 3. Ytterligare två år senare introducerades HTML 4.01 och det har varit arbetshäst på internet sedan dess.
Det första "arbetsutkastet" av HTML5 introducerades redan 2008, med överraskande bred webbläsarsupport då. HTML5 som vi känner idag skiljer sig mycket från förflutna HTML, och här kommer vi att diskutera precis vad den senaste standarden förändrade med utgivningen. Sedan HTML5 lanserades har det accepterats allmänt och alla funktioner och funktioner stöds nu av alla stora webbläsare. Det finns fortfarande några hicka här och där, men övergripande har HTML5 anpassats väl med den moderna onlineupplevelsen.
Som webbutvecklare kan du antingen vara en gammal proff som har behärskat de äldre standarderna eller en nybörjare nyfiken på utvecklingen av nya standarder på sidelinjen. Hursomhelst måste du så småningom börja övergå till HTML5.
HTML Vs HTML5 Infographic
Det första steget till övergång till HTML5 eller lärande är att förstå skillnaden mellan den äldre standarden och den senaste. Här är några viktiga skillnader mellan HTML och HTML5:
-
HTML5 är ett levande språk
HTML5 är ett levande språk, ett pågående arbete. Det är fantastiskt att se vad HTML5 kan göra, men det är också viktigt att veta att HTML5 inte är en helt standardiserad version som HTML4, som är mer än tio år gammal och en fast standard, oföränderlig.
Om du kommer in i HTML5 måste du göra några uppdateringar. Attribut och element läggs till och ändras regelbundet varje år. Detta beror också på hur mycket du använder rika element, men det är definitivt en av riskerna med att använda en vätska, ändra språk som HTML5.
-
HTML5 är enklare
Även om HTML5 har risker som ständiga uppdateringar, är det generellt enkelt att hålla jämna steg med ändringarna och uppdateringarna på grund av den enklare syntaxen jämfört med HTML4. Till exempel har du en mycket enkel deklaration i början av sidan för att ställa in den som en HTML5-sida:
Den enkla Doctype-deklarationen är en av förenklingarna i HTML-syntaxen, som är kompatibel med alla versioner från HTML4 och hela vägen tillbaka till XHTML1. HTML5 är dock inte kompatibelt med SGML.
Rekommenderade kurser
- Gratis Python-programmeringsträning
- Certifieringskurs för kostnadsfri programvara
- Gratis Java-programmeringskurser
- Komplett PERL-kurs
-
Det nya elementet
HTML5 kommer med ett antal nya element och eliminerar flera andra (som vi kommer att täcka på ett tag), men ett av dess nyckeltillagda element är, vilket har påverkat användningen av Adobe Flash på webbplatser enormt. Även om Flash fortfarande används av flera webbplatser har HTML5 antagits många och många tror att det kommer att göra Flash föråldrat så småningom. Endast tiden kommer att bestämma det; fram till dess har HTML5s kaskadelement visat sig vara ett bra alternativ till Flash.
Elementet kan användas för att rita grafik med olika former och färger via skript, vanligtvis JavaScript. Elementet är helt enkelt en behållare för grafiken; du måste använda ett skript för att definiera grafiken. Som standard är en duk ett rektangulärt område utan innehåll eller gränser. Marknaden är så:
Det är viktigt att ange ett ID-attribut samt bredd och höjd för att definiera dukstorleken. Du kan lägga till ett stilattribut för att definiera gränser.
Du kan också använda JavaScript, som följande exempel:
var c = document.getElementById (“myCanvas”);
var ctx = c.getContext (“2d”);
ctx.fillStyle = “# FF0000”;
ctx.fillRect (0, 0, 150, 75);
-
De nya och elementen
Ett annat stort tillägg som HTML5 kommer med är det nya och elementen, vilket indikerar en ny webbanatomi. Med dessa nya taggar finns det inte längre behov av att identifiera de två elementen med en tagg.
Specifikationerna definierar rubrikelementet som representerar en grupp "navigations-" eller "introduktionshjälpmedel". Som sådant kan elementet användas för att definiera en introduktion till ett avsnitt på en sida eller hela själva sidan. Här är ett kodavsnitt som använder huvudelementet.
Titel
Av författare Filed in Web 2.0
Text av kroppen
HTML5-specifikationerna refererar till fotelementet som representerar "en sidfot för dess närmaste förfäder avsnitt innehåll eller avsnitt rotelement", och generellt innehåller information om avsnittet, som författarens namn, upphovsrättsinformation, länkar till dokument och så vidare.
Logiskt sett är sidfoten placerad längst ner på webbsidan. Men det kan också placeras i slutet av ett sidavsnitt. Här är några exempel på kodning som använder sidfotelementet:
Innehållstitel
Av författare Filed in Web 2.0
Text av kroppen.
Taggar: Kommandoprompt, kompass, CSS, Sass, terminal
10 gillar
Här innehåller sidfoten inläggstaggar och inlägget "Facebook likes".
-
De och elementen
Om du har gått igenom exemplen ovan skulle du ha lagt märke till några nya element, till exempel. Detta element, tillsammans med elementet, gör att du kan markera specifika delar av din layout och är oerhört fördelaktiga för sökmotoroptimering. Artikelelementet specificeras som att det representerar en fristående komponent på en webbsida för att vara oberoende återanvändbar eller distribuerbar. Det här kan vara en tidning, forumpost, tidningsartikel, blogginlägg eller något annat.
Artikelelementet har vanligtvis sin egen rubrik i ett sidhuvudelement, och kanske till och med en sidfot, som du såg i exemplet ovan. Du kan helt enkelt tänka på elementet som ett blogginlägg eller oberoende innehåll; den svåra delen är att identifiera vad som är oberoende. Enkelt uttryckt är ett oberoende innehåll som är meningsfullt av sig själv.
Ett bra sätt att veta om ett innehåll är oberoende är genom att fråga om det är meningsfullt i ett RSS-flöde. Bloggartiklar och statiska sidor är vettiga, och vissa webbplatser har kommentarflöden. Men ett stycke i artikeln skulle inte vara meningsfullt separerat från resten av innehållet. Här är ett kodavsnitt med sidfot och publiceringstaggar.
Innehållstitel
Publicerad: 2016-02-24
Text av kroppen
Creative Commons Erkännande-Dela Lika licens
Avsnittselementet, enligt W3C-specifikationer, som representerar en "generisk sektion" i en applikation eller ett dokument. Det kan förväxlas med taggen, så låt oss rensa upp förvirringen just nu. Avsnittstaggen används när innehållet i det måste grupperas separat från resten av sidan med ett enda tema och när det ska ses som en post i sidkonturen. Div-elementet specificeras emellertid som en "generisk behållare", vilket innebär att det inte är separat från huvudsidan, bortsett från dess egna titel, språk och klassattribut.
-
Nya och element
HTML5s nya och element är en del av specifikationerna för interaktiva element men är bland de minst omtalade elementen av utvecklare. Med tanke på det faktum att webben har förändrats till mer bara länkade sidor och dokument, är dessa element ett välkommet tillskott för större webbinteraktivitet.
Elementet ska inte förväxlas med elementet, som definieras som en HTML-navigationstagg som representerar sidnavigeringsblocket. Det innehåller vanligtvis länkar för användare att hoppa igenom avsnitt på sidan eller till en annan sida. Å andra sidan representerar menykoden menykommandon för enkelhet i stationära och mobila applikationer. Här är ett exempel på elementet i handling:
Hej världen
Samtidigt är elementet ett annat sätt att ordna bilder och text. Det används tillsammans med elementet för att markera illustrationer, diagram och foton. Nedan följer ett kort kodavsnitt som innehåller båda elementen i handling.
-
Nya och element
Det här är två huvudtillägg till HTML5-standarden. Ljudtaggen, liksom videotaggen, gör det möjligt för utvecklare att bädda in musik och ljud på sin webbplats. Till skillnad från föregående standard är du inte begränsad till att lägga till midi-musik, även om det fortfarande finns vissa begränsningar för typen av filer som används. De flesta webkit-relaterade webbläsare stöder vanliga MP3-filer, men andra stöder bara OGG-format. Den goda nyheten är att det finns massor av filkonverterare, och du kan helt enkelt leverera två versioner av ljudfilen; rätt version hämtas automatiskt.
Du kan använda ljudtaggen som alla andra element. Här är ett exempelavsnitt:
Ljudtaggen har också ett antal attribut för ytterligare kontroller, inklusive händelseattribut, och händelserna inkluderar fönsterhändelser, formhändelser, mediehändelser och mushändelser. Videoelementet har också ett antal innehållsattribut, inklusive SRC, globala attribut, loop, kontroll, förbelastning och poster. Attributen SRC, loop, autoplay och kontroller är ganska självförklarande och samma för alla medieelement, medan de globala attributen är vanliga för alla element. De inkluderar dir, dold, snabbmeny och mer.
Det finns några andra multimediaattribut och element som kommer med HTML5, som spårelementet som ger textspår för videoelementet.
-
Nya former
HTML5 kommer nu med form och element. Om du inte planerar att använda många tabeller på sidan kan du också ta bort attributet och titta på de ändringar som gjorts innan du fortsätter.
-
Inga fler och element
Detta innebär att alla attribut som gör det möjligt för utvecklare att skapa en perfekt utformad, tonad tabell, såsom gränsen, bgcolor, justera, höjd, regler och mer. Alla dessa attribut ersätts av CSS.
-
Inget mer, och
Det här är bra för de utvecklare som arbetat igenom de tidiga dagarna med HTML. Attributen ramuppsättning, ram och noframes har tagits bort helt, tillsammans med andra som blink, basefont och mer. Du måste hantera utan att använda tabeller för layouten. Tabeller är fortfarande en del av HTML5, men de är inte avsedda för pixlar längre. Specifikationerna säger att tabeller inte ska användas för layouthjälpmedel och för att kontrollera sidlayouten.
Slutsats
Som du tydligt kan se finns det många ändringar i HTML5 och du måste använda den med försiktighet och försiktighet. Du måste också uppdatera dina kunskaper om språket eftersom det förändras över tid och får fler uppdateringar. Du måste stoppa användningen av element som HTML5 har tagit bort från sig själv och använda de nya HTML5-elementen som definitivt kommer att stanna, som sidhuvud- eller sidfottaggarna.
Vad du har sett ovan är bara den förenklade versionen av hur många ändringar HTML5 har gjort med lanseringen. Men låt oss vara ärliga här; det finns inget enkelt eller långsamt i hur HTML5 antas, och den nya standarden lägger till massor av funktioner som är avgörande för en modern användarupplevelse. Du måste hålla jämna steg med det nya språket och lära dig lite CSS, som har en större roll än tidigare.
Det bra med dessa förändringar är att även om de är stora, är de till det bättre och detta förstås av alla berörda parter. Webbläsare kommer att vara mer kraftfulla när de rör sig mot molnet, med förmågan att hantera mer själv. Med saker som Ajax och med video- och ljudinbäddning och så vidare kommer det att vara så mycket lättare att koda på en enkel metod och låta webbläsaren ta på sig det tunga arbetet. Till exempel hänvisas till nya strukturelement som figur, sidfot, sammanfattning och avsnitt till dokumentstrukturen och återgivningen lämnas till webbläsaren.
Relaterade artiklar:-
Här är några artiklar som hjälper dig att få mer information om HTML kontra HTML5 så bara gå igenom länken.
- HTML och XML
- HTML5 vs Flash Topp 9 skillnader (med Infographics)
- HTML vs XHTML
- HTML5 vs Flash
- Fantastiska skillnader HTML5 vs JavaScript
- 10 häftiga användbara tips om Python-programmering (trick)