HTML6 är på gång – men än får vi nog vänta
Postad: 7 augusti 2017 | HTML | No CommentsHTML6 har en namnrymd som påminner om XML. Som synes i nedanstående dokumentexempel så har HTML6 även en hel del nya taggar (APIs). Tillsammans med CSS4 som har fler än 22 nya selektorer kommer det bli ännu enklare, och roligare, att koda.
Exempel på HTML6
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
<html:meta type="title" value="Page Title">
<html:meta type="description" value="HTML example with namespaces">
<html:link src="css/mainfile.css" title="Styles" type="text/css">
<html:link src="js/mainfile.js" title="Script" type="text/javascript">
</html:head>
<html:body>
<header>
<logo>
<html:media type="image" src="images/xyz.png">
</logo>
<nav>
<html:a href="/img1">a1</a>
<html:a href="/img2">a2</a>
</nav>
</header>
<content>
<article>
<h1>Heading of main article</h1>
<h2>Sub-heading of main article</h2>
<p>[...]</p>
<p>[...]</p>
</article>
<article>
<h1>The concept of HTML6</h1>
<h2>Understanding the basics</h2>
<p>[...]</p>
</article>
</content>
<footer>
<copyright>This site is © to Anonymous 2014</copyright>
</footer>
</html:body>
</html:html>HTML6 API:s
Namnrymden i HTML6 taggarna kommer att se ut som <html:html> eller <html:head> osv. Låt oss ta en närmare titt på varje tagg-attribut som är använt i ovanstående HTML6 dokument.
<html:html>
<!DOCTYPE html>
<html:html>// this is equivalent to <html> tag written in previous HTML versions
<!-- sample of HTML document -->
</html:html><html:head>
Den här taggen motsvarar <head> taggen. Dess syfte är att skaffa data och skript som anpassar hur innehållet visas inom <html: body> -taggen.
<!DOCTYPE html>
<html:html>
<html:head>
<!-- Main content would come here, like the <html:title> tag -->
</html:head>
</html:html><html:title>
Som namnet antyder ändras titeln på HTML-dokumentet och liknar <title> -taggen som används i tidigare HTML-versioner. Den här taggen används av webbläsare för att ändra titelfältet, favoriter etc.
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
</html:head>
</html:html><html:meta>
Den här taggen är något annorlunda än <meta> -taggen som används i den senaste HTML-versionen. Med hjälp av denna HTML6-tagg kan du använda vilken form av metadata du vill. Och till skillnad från HTML5 behöver du inte använda standardmetatyperna i HTML6. Det hjälper till att samla information som en webbsida beskrivning, genom att lagra innehåll.
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
<html:meta type="description" value="HTML example with namespaces">
</html:head>
</html:html><html:link>
Den här taggen hjälper dig att länka externa dokument och skript (som CSS, JS etc.) till HTML-dokumentet. Det liknar tagg som används i HTML5. Den här taggen innehåller följande attribut:
– charset: ”UTF-8” character encoding.
– href: It contains link to your source file.
– media: This defines the kind of device on which your item will run, for example, ”Smartphone” or ”tablet”.
– type: The MIME type of the document.
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
<html:link src="js/mainfile.js" title="Script" type="text/javascript">
</html:head>
</html:html><html:body>
Det här är precis som <body> -taggen som du har använt i den aktuella HTML-versionen. Här är alla dina webbsidor som text, media och andra placerade.
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
</html:head>
<html:body>
<!-- This is where your website content is placed -->
</html:body>
</html:html><html:a>
Den här taggen liknar <a> -taggen och används för att representera en länk till en annan webbsida. Till skillnad från <a> -taggen tar <html: a> bara ett enda ”href” -attribut, som leder länken till sidan du behöver besöka.
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
</html:head>
<html:body>
<html:a href="http://siteurl">Go to siteurl.com!</html:a>
</html:body>
</html:html><html:button>
Den här taggen motsvarar <button> taggen eller <input type = ”button”> som används i nuvarande och äldre HTML-versioner. Med den här taggen kan du skapa en knapp för att hjälpa en användare att utföra en viss interaktion på webbplatsens sida. Den har ett attribut inaktiverat.
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
</html:head>
<html:body>
<html:button>Click Here</html:button>
</html:body>
</html:html><html:media>
Den här taggen lägger in alla <media> taggar som <img>, <video>, <embed>, etc. Med hjälp av <html: media> -taggen behöver du inte längre ange en tagg för varje filtyp. Den <html: media> -kod du använder kommer att köras av webbläsaren baserat på typattributet (om det finns), eller så kommer det bara att gissa på grundval av filtillägg eller av ’MIME’typen.
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
</html:head>
<html:body>
<!-- Image would come here -->
<html:media src="img1/logo.jpg" type="image">
<!-- Video doesn't need a type -->
<html:media src="videos/slide.mov">
</html:body>
</html:html>En översikt över taggtyper
I likhet med nuvarande och tidigare HTML-versioner, kommer HTML6 också att ha två typer av taggar, t.ex. enskilda taggar och dubbla taggar. Enkelkoderna kommer inte att ha något textinnehåll, och snarare kommer det bara att ha attribut. Till exempel:
<html:meta type="author" content="z13a">
<html:meta type="author" content="z13a" />Jämfört med dubbeltaggen behöver du inte stänga din enskilda tagg. Dubbeltaggar har öppnings- och stängningskod eftersom de har lite textinnehåll. Men om dubbla etiketter inte har något textbaserat innehåll, kan du minska det till ”självstängande enda varianten”. Till exempel:
<html:link href="./a.html">Text based content</html:link>
<!-- This shortand... -->
<foo class="xyz" />
<!-- ...means in fact this: -->
<foo class="xyz"></foo>[källa:a-look-into-html6-what-is-it-and-what-it-has-to-offer/]
Vilka nya verktyg kan vi då förvänta oss i HTML6?
Automatisk storleksändring av bilder i webbläsaren. Vad det handlar om är ”hur många pixlar behöver en bild för att se bra ut på en skärm”. Givetvis beror det på skärmstorlek, plattform, webbläsare. Problemet ligger delvis i standardiseringen <img>-taggarna och dess sökväg src. Utmaningen är att få HTML-protokollet att förstå när det ska öka eller minska bilden så att den visar det bästa resultatet, något HTML6 sägs kunna klara av. En variant är då att använda srcset. WordPress implementerade srcset från och med Twenty Sixteen. Läs gärna hur srcset och sizes fungerar.
Ytterligare kontroll över videobjektet. Något de flesta har haft på önskelistan är möjligheten att kunna kontrollera bildskärmsvisningen på en sida, callback hooks osv. HTML6 klarar callback hooks och synkroniseringsmekanismer som kommer att vara mycket användbara för att komma upp i de bästa videoupplevelserna på webbsidorna.
Dedikerade bibliotek. Webbutvecklare är ganska medvetna om att JavaScript-programmering har transformerats av jQuery. Det finns några webbplatser som använder standard cacheable versioner av vissa bibliotek, exempelvis Google och Yahoo. HTML6 kommer att göra det bättre. Om ett betydande antal designers godkänner ett bibliotek, så kan det distribueras med webbläsaren vilket kan spara ännu mer tid för att uppdatera den cachade versionen av senaste versionen av jQuery.
Fler anteckningsalternativ. En förbättrad HTML-struktur stöder artikelanmärkningar med hjälp av stycken, meningar och ord. Webbutvecklare söker alltid efter en dynamisk och kraftfull version som kan ge kommentarer till bild och video. HTML6 kommer att erbjuda kommentarer till videoklipp och bilder.
Integrerad kamera. Idag kan vi inte tänka oss ett liv utan kamera och mikrofon. Vi använder dessa verktyg för att kommunicera med våra vänner och familjer. HTML6 kommer att vara revolutionerande vad gäller detta. HTML6 hjälper oss att effektivt få tillgång till allt medieinnehåll som lagras i vår enhet. Du får bättre kontroll över din kamera och mikrofon med HTML6. Denna utveckling kommer att hjälpa webbplatser att konkurrera med appar.
Starkare autentisering. Webbläsarna kräver att du erbjuder hög och snabb autentisering när du använder HTML6. Att bygga pålitlig programvara kan hjälpa både webbläsaren och webbplatsen att fungera effektivt. För extrema konfidentialitet och säkerhet kan webbläsare istället för cookies erbjuda teckentolken med inbäddade nycklar.
HTML6-förslag för ”single-page” applikationer utan Javascript. Denna idé skickades av Bobby Mozumder, chefredaktör för FutureClaw Magazine. Det här är vad han hade att säga: ”Det finns ett standarddesignmönster som kommer fram via alla frontramar-JavaScript-ramar, där innehåll laddas dynamiskt via JSON API. Så ser mönstret ut för en ”single-page” webb applikation. De flesta tycker detta är OK eftersom responsen är så mycket bättre än att behöva ladda upp en hel sida – 10-50ms med en ren API-belastning kontra 300-1500ms för en fullständig HTML-sidbelastning. Mitt mål skulle vara en snabbuppkopplad webbupplevelse utan att behöva ladda Javascript.”. ”Det här kan förmodligen göras genom att länka ett ankarelement till JSON / XML (eller en ny definition) api-slutpunkt om webbläsaren laddar in data internt i en ny datastruktur, och webbläsaren därefter ersätter DOM-elementet med datan som behövdes. Den initiala datan (såväl som ett standardfelsvar – standard error responses) kan vara likvärdiga verktyg, vilka dock kan ersättas senare om så önskas.”
Starkare Micro-formats. Eftersom HTML-taggarna skiljer sig åt för rubriker, sidfot och stycken, är det väldigt viktigt att skapa en standardkod, likt delar av en adress eller ett telefonnummer. Standardkoder kommer inte bara att öka din webbplatskvalitet utan också påskynda processen med sökmotoroptimering. Webbutvecklare kan också använda HTML6 för att ange platser, datum, tid, sälja produkter etc. Några andra funktionsförfrågningar / idéer är: CSS4 för mer grafikkontroll, Bluetooth-stöd, Cloud-lagringsalternativ, Peer-to-peer filöverföringsförmåga, att kunna ansluta till andra användare via röst och chatt system, inbygg skydd mot skadlig kod.
Pluggbara förprocessorer. Flera webbutvecklare använder preprocessorer för att översätta språk som CoffeeScript till JavaScript. Detta är den bästa lösningen för att förbättra koden och ytterligare öka utvecklingsprocessen. HTML6 förbättrar kodoptimeringen. Detta öppnar ett nytt fönster om kodning för webbutvecklare. Inom kort kommer du att kunna skapa en layout på en webbplats med hjälp av HTML6.
Pluggbara språk. Med JavaScript så kan man göra fantastiska saker idag. Men om du saknar färdigheter, eller undviker det, är det svårt att tänka sig att en webbplats är tillräckligt konkurrenskraftig för en publik som kräver en levande webbsurfning. Eftersom alla webbläsare alltid pratar med JavaScript skulle din webbläsare bli dum utan det. HTML6 levereras med pluggbara språk. Detta kommer att vara bäst för webbutvecklare. De kommer att kunna bygga unika mönster inom kort tid. Ur användbarhetsperspektivet bör man dock aldrig göra en hemsida beroende av Javascript för att fungera.
[källa:10-advance-features-you-can-expect-in-html6/ och new-features-in-html6.html]
Du kan redan nu göra en webbläsartest om hur bra din webbläsare klarar av att rendera HTML6.