close

HTML5

Hoppa till navigering Hoppa till sökning
HTML 5
programmeringsspråk
HTML5-logotyp och wordmark.svg
FörfattareTim Berners Lee
Ursprungsdatum1989
Senaste versionenHTML5
AnvändandeWebbplatsprogrammering
SkriverHögt
Vanliga tillägghtml och htm
Referensimplementering
Operativ systemWindows, macOS, Android, iOS, Linux.
LicensÖppen källa
Hemsidawww.w3.org/TR/html5/

HTML är det mest använda märkningsspråket på webben. I grund och botten används det för att skapa och strukturera webbplatser. Version 5 släpptes sedan oktober 2014, utformad för att definiera funktionella standarder (t.ex. video-/ljudspelare) och API:er för plattformsoberoende programmering. Det utvecklas hela tiden.

Historik

Utvecklingen initierades av Web Hypertext Application Technology Working Group ( WHATWG ) (grundad 2004 av utvecklare som tillhör Apple , Mozilla Foundation och Opera Software ) som satte sig som mål att utforma specifikationer för utveckling av webbapplikationer, med fokus på förbättringar och tillägg till HTML och relaterad teknik.

Till en början i motsats till World Wide Web Consortium för långsamheten i utvecklingsprocessen för HTML-standarden och för W3C :s beslut att orientera standardiseringen mot XHTML 2 som inte garanterade bakåtkompatibilitet, erkände samma W3C sedan dessa skäl som giltiga , tillkännager att skapa en speciell grupp för standardisering av HTML5 och att överge XHTML 2.0 [1] .

Sedan 2007 har WHATWG samarbetat med W3C i denna standardiseringsprocess, och beslutade sedan 2012 att separera från W3C-standardiseringsprocessen [2] , vilket i praktiken skapade två versioner av HTML5: versionen av WHATWG definieras som "HTML Living Standard" och därför i kontinuerlig utveckling, medan den för W3C kommer att vara en enda version som motsvarar en "ögonblicksbild" av Living Standard.

Den första kandidatrekommendationen publicerades av W3C den 17 december 2012 och den första versionen av standarden publicerades som en rekommendation den 28 oktober 2014.

HTML 5.1-versionen publicerades av W3C som en rekommendation den 1 november 2016.

HTML 5.2-versionen publicerades av W3C som en rekommendation den 14 december 2017 [3]

HTML 5.3-versionen publicerades av W3C som en rekommendation den 28 januari 2021. [4]

Utfasade taggar

HTML5 fasade ut följande taggar och attribut som finns i HTML4 eftersom deras funktion nu hanteras av CSS3 [5] :

Utfasade HTML4-element i HTML5
Utfasade HTML4-element i HTML5

CSS3

HTML5 och CSS3 (utvecklingen av CSS2) utgör ett komplett turingspråk [6] [7] , ett tillräckligt villkor för att ett språk ska anses vara ett programmeringsspråk .

SEO

HTML5 är designat för att förbättra SEO jämfört med tidigare versioner av HTML.

Webbläsarstöd

Exempel på en HTML5-sida i Internet Explorer 7
Exempel på en HTML5-sida i Internet Explorer 7 . Det verkar osynkroniserat eftersom webbläsaren inte känner igen specifikationerna

Vid födelsen av HTML5 var Webkit -renderingsmotorn (Chrome och Safari) den första som korrekt tolkade många av de nya koderna, den andra som uppdaterades ur den synvinkeln var Gecko (Firefox) och sist Trindent (Internet Explorer). Under några år sågs webbplatser som använde de nya HTML-taggarna på olika sätt beroende på vilken webbläsare som användes av användaren [8] . Delvis löstes detta problem med tekniker som alternativ CSS specifikt för Internet Explorer , villkorliga kommentarer skräddarsydda för det och JavaScript- bibliotek som Modernizr [9] [10] [11] . Från och med 2019 stöder Microsoft Edge de flesta HTML5-specifikationer [12] .

Nyheter

De innovationer som introducerats av HTML5 jämfört med HTML4 syftar framför allt till att förbättra frikopplingen mellan struktur, definierad av uppmärkning, renderingsegenskaper (typsnitt, färger, etc.), definierade av stildirektiv och innehåll på en webbsida, definierad av den faktiska text. Dessutom tillhandahåller HTML5 stöd för lokal lagring av stora mängder data som laddats ner från webbläsaren , för att tillåta användning av webbaserade applikationer (som Google - postlådor eller andra liknande tjänster) även i avsaknad av internetanslutning.

I synnerhet [13] :

  • reglerna för att strukturera texten i kapitel, stycken och avsnitt skärps;
  • kontrollelement introduceras för navigeringsmenyerna;
  • kontrollelementen för elektroniska formulär förbättras och utökas, det vill säga nya attribut och inmatningstyper för formulär (registrerings- och kontaktformulär);
  • specifika element introduceras för kontroll av multimediainnehåll (taggar <video>och <audio>), med HTML4 som endast kan införlivas via Adobe Flash .
  • en serie attribut utökas till alla taggar, särskilt de som syftar till tillgänglighet ( WAI-ARIA ), som tidigare endast tillhandahållits för vissa taggar;
  • Canvas stöds vilket gör att du kan använda JavaScript för att skapa animationer (endast möjligt med Adobe Flash vid tidpunkten för HTML4) och bitmappsgrafik;
Ett exempel på HTML5 Storage. Användaren kan skapa anteckningar och även om webbläsaren uppdateras förblir de sparade.
Ett exempel på HTML5 Storage. Användaren kan skapa anteckningar och även om webbläsaren uppdateras förblir de sparade [14] .
  • införande av geolokalisering , på grund av en kraftig expansion av mobila operativsystem (som Android och iOS , bland de mest populära);
  • alternativt system till vanliga cookies , kallat Web Storage, mer effektivt, vilket möjliggör en avsevärd besparing av bandbredd;
  • standardisering av JavaScript-program, kallade Web Workers och möjligheten att använda vissa webbplatser offline;
  • ersätta den långa och komplexa doctype med en enkel <!DOCTYPE html>.
  • Ny mikrodata som beskriver innehållet i taggarna (till exempel om det är ett namn, ett efternamn, en adress, ett telefonnummer, en e-post, etc.);
  • WebSocket API: möjligheten att upprätta och underhålla en dataanslutning mellan webbläsare och fjärrserver för att skicka meddelanden i båda riktningarna;
  • Dra och släpp (dra och släppa objekt inuti en behållare, till exempel när det gäller videospel eller produkter som ska läggas i kundvagnen på e- handelswebbplatser );
  • SVG och MathML : möjlighet att infoga vektorgrafik och matematiska formler i HTML, som i HTML4 endast kunde importeras som bilder eller skapas i Adobe Flash .
TAGGA [13] OMFATTNING
Nya strukturella och semantiska element
Rubrik
Jämförelse mellan HTML4 bassida och 5
Jämförelse mellan HTML4 bassida och 5
Sidfot
Sektion
Nav
Artikel (när det gäller artiklar på hemsidan)
Bortsett från (innehåll relaterat till huvudet)
H-grupp Gruppera rubriktaggarna
<figur> och <figcaption> Bildtexter för innehåll
Bädda in Infoga interaktivt eller multimediainnehåll
Rubin Ange Ruby-kommentarer
Wbr Webbläsaren kan infoga en ny rad
<kommando> och <meny> De definierar verktygsfält eller snabbmenyer
<detaljer> och <sammanfattning> Informationswidget för användare
märke En del av texten är markerad eller markerad för användaren
<time> och pubdate och datetime attribut 24-timmars tid eller ett datum i den gregorianska kalendern
Meter Skalärt mått på ett känt intervall eller bråkvärde
Framsteg Status för slutförande av en uppgift
Bild Behållare för bilder
Mikrodata Semantiska attribut kan anges för varje HTML-tagg
Nya attribut och inmatningstyper för formulär
autofokus, platshållare och form
form
Autofokusen i detta fall är i rött. Inmatningstyperna är likvärdiga med utrymmena som ska fyllas (i detta fall finns det "e-post"). Platshållaren är exempeltexten för varje utrymme
Ingångstyp: tel
Inmatningstyp: sök
Inmatningstyp: url
Inmatningstyp: e-post
Inmatningstyp: nummer
Ingångstyp: intervall
Ingångstyp: färg
Datalista Autofyll i ett formulärelement
Autoslutförande Tillåter eller förbjuder webbläsaren att fylla i fälten

av formuläret automatiskt

Min Max De definierar det lägsta och högsta tillåtna värdet
Flera olika Det låter användaren ange flera värden för samma ingång
Mönster Kontrollera att det angivna värdet överensstämmer med vissa regler
Nödvändig Det gör det obligatoriskt att fylla i ett utrymme i formuläret
Steg Den definierar avståndet mellan ett värde och nästa
keygen Numerisk nyckelgenerator i ett formulär
produktion Returnerar resultatet av en beräkning
API för webbapplikationer
Offline webbapplikationer (filen ".manifest") Efter den första webbsessionen,

vissa objekt kommer också att förbli tillgängliga

i avsaknad av nätverksanslutning.

Indexerad databas API Skapa och manipulera en databas i webbläsaren
WebStorage API Du kan till exempel hålla dem öppna samtidigt

två sociala konton eller e-postkonton i samma webbläsare och varje navigering

på den första kommer det att resultera i att den andra loggar ut och vice versa

Web Workers API De tillåter exekvering av delar av Javascript-kod

utan att påverka webbsidans prestanda

WebSocket API De upprättar och upprätthåller en dataanslutning mellan webbläsare

och fjärrserver för att skicka meddelanden

åt båda hållen

Dra och släpp Dra och släpp objekt
Geolocation API Geolokalisering
Multimedia
SVG och MathML Vektorbilder och matematiska formler
Canvas / WebGL API lämplig för att rita linjer, cirklar, rektanglar, bilder och 3D-objekt
Video Infoga videofiler (tidigare endast möjligt med Adobe Flash )
Audio Infoga ljudfiler

WAI ARIA

WAI-ARIA ( Web Accessibility Initiative - Accessible Rich Internet Applications ) är en uppsättning dokument publicerade av W3C ( World Wide Web Consortium ) som specificerar hur man kan öka tillgängligheten för dynamiskt innehåll och användargränssnittskomponenter utvecklade med AJAX , HTML , JavaScript och annan relaterad teknik. HTML5 lade till nya WAI ARIA- regler [15] .

Enhetsorientering

Exempel på enhetsorientering och enhetsrörelse
Exempel på enhetsorientering och enhetsrörelse

Händelsen deviceorientationuppstår när ny data finns tillgänglig från en orienteringssensor om enhetens aktuella orientering i förhållande till jordkoordinatramen . Dessa data samlas in av en magnetometer inuti enheten. I praktiken, när du roterar enheten på vilken webbsidan visas, roterar objektet som innehåller detta API enligt enhetens x-, y- eller z-axel [16] [17] .

Baskod:

fönster . addEventListener ( 'deviceorientation' ,  function ( händelse )  { 
  var  a  =  händelse . alfa ; 
  var  b  =  händelse . beta ; 
  var  g  =  händelse . gamma ; 
},  falskt );

Rörelse

Rörelsehändelser hanteras på samma sätt som orienteringshändelser, förutom att de har sitt eget händelsenamn: devicemotion[18] [19] .

Exempel:

fönster . addEventListener ( "devicemotion" ,  handleMotion ,  true );

Med avseende på deviceorientationinformationen som tillhandahålls i objektet DeviceMotionEventblir de parametrar för HandleMotion- funktionen .

Rörelsehändelsen innehåller fyra egenskaper:

  • DeviceMotionEvent.acceleration
  • DeviceMotionEvent.accelerationIncludingGravity
  • DeviceMotionEvent.rotationRate
  • DeviceMotionEvent.interval

Rörelsevärden

Objekt DeviceMotionEventger information om hastigheten för förändringar i enhetens position och orientering. Ändringarna tillhandahålls längs tre axlar [20] .

För accelerationoch accelerationIncludingGravitydessa axlar motsvarar:

  • x: Representerar axeln från väst till öst
  • y: Representerar axeln från söder till norr
  • z: Representerar axeln vinkelrät mot marken

För rotationRateinformation motsvarar:

  • alpha: Representerar en rotationshastighet längs axeln vinkelrät mot enheten.
  • beta: Representerar en rotationshastighet längs axeln som går från vänster till höger om enheten.
  • gamma: Representerar en rotationshastighet längs axeln som går från enhetens botten till toppen.

intervalrepresenterar tidsintervallet, i millisekunder, under vilket data erhålls från enheten.

HTML5test

HTML5testsida som visas i en Chrome-webbläsare
HTML5testsida visas i webbläsaren Chrome

HTML5test är en webbapplikation för att utvärdera noggrannheten hos en webbläsare vid implementering av HTML5 webbstandarder och Web SQL Database (utvecklad av World Wide Web Consortium ), såväl som WebGL- standarden (utvecklad av Mozilla Foundation och Khronos Group ) [ 21] .

Testsviten utvecklades av den holländska webbprogrammeraren Niels Leenheer och släpptes i mars 2010. För att testa en webbläsare måste användaren besöka webbplatsens hemsida på . Applikationen returnerar ett heltalspoäng på upp till 555 poäng. Summan av poäng har ändrats flera gånger genom utvecklingen av mjukvaran; Leenheer introducerade därefter ett poängsystem som en del av en större testomformning som introducerades i november 2013 [23] . html5test.com[22]

HTML5test utvärderar webbläsarstöd för webblagring, W3C geolocation API, HTML5-specifika HTML-element (inklusive Canvas -elementet ) och andra funktioner [24] [25] . Den utvärderar inte en webbläsares överensstämmelse med andra webbstandarder, som Cascading Style Sheets , ECMAScript , Scalable Vector Graphics eller Document Object Model . Överensstämmelsetestning för dessa standarder ansvarar för Acid3 , ett automatiserat test publicerat av Ian Hickson 2008 [26] . På samma sätt utvärderar Acid3 inte en webbläsares HTML5-kompatibilitet. Testomfattningen för HTML5test och testomfattningen för Acid3 utesluter varandra.

Exempel

  • Responsiv och interaktiv tabell i HTML5 och CSS3 som anpassar sig till enheten

    Responsiv och interaktiv tabell i HTML5 och CSS3 som anpassar sig till enheten

  • Exempel på interaktiva diagram, interaktiva kartor och HTML5 ritappar

    Exempel på interaktiva diagram, interaktiva kartor och HTML5 ritappar

  • Exempel på interaktiv 3D WebGL

    Exempel på interaktiv 3D WebGL

Anteckningar

  1. ^ XHTML 2 Working Group förväntas stoppa arbetet i slutet av 2009, W3C kommer att öka resurserna på HTML5 , på w3.org , World Wide Web Consortium. Hämtad 15 februari 2011 .
  2. ^ Uppdatering om förhållandet mellan WHATWG HTML-levnadsstandard och W3C HTML5-specifikationen , på lists.w3.org , World Wide Web Consortium. Hämtad 22 juli 2012 .
  3. ^ https://www.w3.org/TR/html52/ HTML 5.2 W3C-rekommendation
  4. ^ https://www.w3.org/TR/html53/ HTML 5.3 W3C-rekommendation
  5. ^ HTML-taggar som är utfasade i HTML5 , på c-sharpcorner.com . Hämtad 3 februari 2021 .
  6. ^ Stupid Machines - regel 110 , på github.com .
  7. ^ Regel 110 Online-demonstration , på eli.fox-epste.in .
  8. ^ Ta tag i HTML5 webbläsarkompatibilitet , på Speckyboy Design Magazine , 26 mars 2012. Hämtad 3 februari 2021 .
  9. ^ Css3 på Internet Explorer 8? - från och med idag kan du , på Target Web.it , 8 april 2011. Hämtad 3 februari 2021 .
  10. ^ Villkorliga kommentarer för Internet Explorer - SitePoint , på sitepoint.com . Hämtad 3 februari 2021 .
  11. ^ Faruk Ateş, Dra nytta av HTML5 och CSS3 med Modernizr , på italienska A List Apart , 5 juli 2010. Hämtad 3 februari 2021 .
  12. ^ HTML5test - Hur väl stöder din webbläsare HTML5? , på html5test.com . Hämtad 3 februari 2021 .
  13. ^ a b HTML5: komplett guide , på HTML.it. Hämtad 29 januari 2021 .
  14. ^ Skapa en Sticky Note-effekt i 5 enkla steg med CSS3 och HTML5 , på Code Envato Tuts+ . Hämtad 8 oktober 2021 .
  15. ^ Tillgängliga rika internetapplikationer (WAI-ARIA ) 1.1 , på w3.org . Hämtad 22 februari 2021 .
  16. ^ Fönster : enhetsorienteringshändelse - webb-API:er | MDN , på developer.mozilla.org . Hämtad 8 oktober 2021 .
  17. ^ DeviceOrientation Event Specification , på w3.org . Hämtad 8 oktober 2021 .
  18. ^ Sandro Paganotti, HTML5 Device Orientation API och WebSocket , på HTML.it. Hämtad 8 oktober 2021 .
  19. ^ Använda enhetsorientering i HTML5 -SitePoint , på sitepoint.com . Hämtad 8 oktober 2021 .
  20. ^ Sandro Paganotti, Video: HTML5, DeviceOrientation & WebSocket API , på HTML.it. Hämtad 8 oktober 2021 .
  21. ^ Niels Leenheer, HTML5test Vanliga frågor , på HTML5test.com , Niels Leenheer. Hämtad 10 juli 2014 .
  22. ^ Martin Brinkmann, HTML5 Testa din webbläsare , på gHacks Technology News . Hämtad 10 juli 2014 .
  23. ^ Niels Leenheer, det nya HTML5testet är här! , på blog.html5test.com , 13 november 2013. Hämtad 12 juli 2014 .
  24. ^ Personalskribent , Testa din webbläsare för HTML5-kompatibilitet , på CyberNet News . Hämtad 10 juli 2014 .
  25. ^ Erez Zukerman, Testa din webbläsares HTML5-förmåga med HTML5-testet , på Switched , AOL , 8 augusti 2010. Hämtad 10 juli 2014 (arkiverad från originalet 26 april 2019) .
  26. ^ Acid3: Att sätta webbläsarskapare på känn igen. , på webstandards.org , Web Standards Project , 3 mars 2008. Hämtad 10 juli 2014 .

Bibliografi

  • Jeffrey Zeldman, Ethan Marcotte, Utveckla webbplatser med webbstandarder , Milano, Apogeo, 2010, ISBN  978-88-503-2964-9 .
  • Mark Pilgrim, HTML5: Operational Guide , Milan, New Techniques Hops, 2010, ISBN  978-88-481-2504-8 .
  • Gabriele Gigliotti, HTML5: Developing the Web of Tomorrow Today , Milan, Apogeo, 2012, ISBN  978-88-503-3116-1 .

Relaterade artiklar

Andra projekt

Externa länkar

Hämtad från " https://it.wikipedia.org/w/index.php?title=HTML5&oldid=127626557 "