HTML5 - nieuwe generatie. Er zijn meer dan 10 jaar verstreken sinds de release van de HTML 4.01-aanbeveling (1999), en daarom mogen er veel veranderingen en toevoegingen worden verwacht. De HTML5-specificatie is momenteel nog in ontwikkeling. Het World Wide Web Consortium ontwikkelt geen standaarden, maar geeft alleen aanbevelingen. Het begint allemaal met werkbesprekingen, vervolgens wordt een werkconcept geïnitieerd, vervolgens wordt een kandidaat voor de rol van aanbeveling vrijgegeven en pas dan krijgt de specificatie uiteindelijk de status van aanbeveling. Momenteel bevindt het werk aan HTML5 zich nog in de conceptfase. Desondanks ondersteunen de meeste populaire internetbrowsers HTML5-innovaties al gedeeltelijk. Voordat ik er een kort overzicht van maak, herhaal ik dat niet alle browsers deze functionaliteit implementeren en nog niet volledig. Tegenwoordig kunnen we erop rekenen dat Opera, Chrome, Firefox, Safari en Internet Explorer HTML5 in verschillende mate ondersteunen.

Wat is er nieuw in HTML5

En er is echt veel nieuws. Nu hebben webontwikkelaars een aantal extra functies, zoals het tekenen van geometrische vormen op het webcanvas, ingebouwde mogelijkheden voor slepen en neerzetten en het afspelen van video- en audiobestanden (voorheen kon dit alleen worden gedaan met behulp van plug-incomponenten zoals als Adobe Flash Player) en nog veel meer, die later zullen worden besproken. Om te beginnen zou ik een paar woorden willen zeggen over de algemene trends in de ontwikkeling van HTML.

Het deel van de HTML5-specificatie dat opvalt in de vorm van nieuwe tags is slechts het topje van de ijsberg. De meeste geavanceerde functies van HTML5 zijn alleen beschikbaar met behulp van een script-programmeertaal, die de basis vormt van webprogrammering aan de clientzijde. Als we dezelfde tekenfunctionaliteit gebruiken die is geïmplementeerd met behulp van de tag, dan hebben we het niet over “tekeningmarkeringen” met behulp van geometrische vormtags, zoals je zou kunnen veronderstellen. De canvaslay-out eindigt met het plaatsen van het canvaselement op de pagina en dat is alles. De tekening zelf is een JavaScript-functie die, zodra toegang tot het canvas wordt verkregen, er vormen op tekent op vrijwel dezelfde manier waarop reguliere Windows-applicaties afbeeldingen in vensters weergeven via GDI-interfaces (Graphics Device Interface). De HTML5-specificatie stelt dus behoorlijk serieuze eisen aan internetbrowsers wat betreft het implementeren van werk met JavaScript, dat grotendeels de programma-interface () regelt voor het werken met het documentobjectmodel (DOM). Dit is goed nieuws, omdat veel mensen weten dat verschillende browsers het werk met het objectmodel kunnen organiseren via programma-interfaces die van elkaar verschillen. Voor een deel is de specificatie van de software-interface de verdienste van de organisatie Web Hypertext Application Technology Working Group (WHATWG), dat zich inspant om niet alleen de opmaaktaal te standaardiseren, maar ook de API's die worden gebruikt in applicaties die zijn geschreven in scripttalen zoals JavaScript. De WHATWG is ook betrokken bij de ontwikkeling samen met het W3C.

We kunnen ook concluderen dat de auteurs van HTML5 probeerden de implementatie van enkele populaire en gewilde webprogrammeertaken over te dragen aan de verantwoordelijkheid van de internetbrowsers zelf. Met HTML5 kunt u bijvoorbeeld vrij eenvoudig de functionaliteit van het slepen en neerzetten van elementen implementeren, die zo populair is geworden in de gebruikersinterfaces van online winkels (producten selecteren in de winkelwagen). Voorheen moest je hiervoor een script in JavaScript schrijven met behulp van verschillende soorten ondersteunende bibliotheken, zoals . Het is nu veel eenvoudiger om slepen en neerzetten te implementeren door een aantal extra attributen te definiëren en een paar gebeurtenishandlers toe te voegen voor de tags die je nodig hebt. Het organiseren van “drag&drop” met behulp van jQuery is ook niet bijzonder ingewikkeld, maar in het geval van HTML5 hebben we te maken met één enkele aanbeveling voor alle internetsoftwareclients, en dit is een heel ander niveau van ondersteuning en garantie voor compatibiliteit tussen browsers. Het blijkt dat browsers die HTML5-aanbevelingen ondersteunen nu de mogelijkheid zullen bieden om sessie-instellingen op te slaan en te herstellen in de context van de websessie zelf. Wanneer de pagina bijvoorbeeld opnieuw wordt geladen, gaat de eerder ingevoerde informatie niet verloren, maar wordt deze hersteld vanuit de omgeving van de huidige sessie. Dit betreedt nu al het terrein van webprogrammering op de server, omdat dit voorheen niet alleen met HTML en JavaScript kon worden gedaan.

Welnu, nu een lijst met de meest opvallende innovaties in HTML5:

Teken op het webcanvas of gebruik het canvaselement

Zoals reeds vermeld, het grootste deel van de aanbevelingen met betrekking tot het gebruik van het nieuwe element is een specificatie voor een software-interface voor het weergeven van afbeeldingen erop. Om te beginnen plaatst u een tag op de pagina een bepaalde breedte en hoogte, dan krijg je er in JavaScript-code toegang toe (bijvoorbeeld op id) en begin je erop te tekenen. Tekenen komt neer op het opeenvolgend definiëren van de lijnstijl strokeStyle , de vulstijl fillStyle en het aanroepen van tekenmethoden zoals moveTo (verplaats de pen), lineTo (teken een lijn), arc (teken een boog), enz. Zie hieronder een voorbeeld: het eenvoudigste hulpmiddel om met een muis te tekenen. Hieronder vindt u de broncode in JavaScript en HTML-opmaak. Om met een pen te tekenen, drukt u op de linkermuisknop en beweegt u de cursor over het canvas. In de modus "lijnen" of "polygonen" klikt u eenvoudig opeenvolgend op het canvas, waardoor de hoekpunten van polylijnen of gebiedsobjecten worden aangegeven.

Voorbeeld van tekenen op een canvaselement

Een voorbeeld van het implementeren van tekenbewerkingen op een element met behulp van HTML5.

JavaScript-broncode

//Code van de huidige bewerking var operations=0; //Bewerkingsstatus var active=false; //Start een grafische bewerkingsfunctie startOperation(e) ( if (operation==0) return; if (active) return; var context = getContext(); context.strokeStyle = getColor("stroke"); context.fillStyle = getColor ( "fill"); context.beginPath(); var point = getPoint(e); context.moveTo(point.x, point.y); active = true; ) //De grafische bewerkingsfunctie stopOperation() voltooien ( if (! active) return; var context = getContext(); context.closePath(); active = false; ) //Mouse events function mouseDown(e) ( var e = e || window.event; if (!active) ( startOperation( e); return; ) else ( var context = getContext(); var point = getPoint(e); context.lineTo(point.x, point.y); context.stroke(); if (operatie == 3 ) context .fill(); ) return true; ) function mouseUp(e) ( var e = e || window.event; if (!active || operatie != 1) return; stopOperation(); return true; ) function mouseMove( e) ( var e = e || window.event; if (!active || operatie != 1) return; var context = getContext(); var punt = getPoint(e); context.lineTo(punt.x, punt.y); context.streek(); retourneer waar; ) function getColor(control) ( var color = document.getElementById(control).value; if (color == "") color = "#000"; return color; ) //Canvas element function getCanvas() ( return document. getElementById("canvas"); ) //Context voor het weergeven van 2D-afbeeldingen op de canvaselementfunctie getContext() ( return getCanvas().getContext("2d"); ) //Element "geselecteerde bewerking" functie getSelected() ( return document.getElementById("selected"); ) //Relatieve coördinaten van de muiscursorfunctie getPoint(e) ( var x = event.pageX || event.x; var y = event.pageY || event.y; var rect = getCanvas() .getBoundingClientRect(); var point = (); point.x = x - rect.left; point.y = y - rect.top; return point; ) //Selecteer een bewerkingsfunctie selectOperation(code) ( stopOperation(); operatie = code; switch(operatie) ( case 1: ( getSelected().innerText = "Geselecteerd: pen"; break; ) case 2: ( getSelected().innerText = "Geselecteerd: regels"; break; ) geval 3: ( getSelected().innerText = "Geselecteerd: polygonen"; pauze; ) ) )

Bron HTML-code

penlijnen polygonen Geselecteerd: lijnkleur vulkleur

Elementen slepen en neerzetten

Dit is niets anders dan browserondersteuning voor het klassieke “drag and drop”-model, dat erg populair is in reguliere GUI-applicaties. Voor de elementen die u gaat “slepen”, definieert u het versleepbare attribuut, en voor de elementen waarop u de gesleepte elementen gaat “gooien”, definieert u event handlers ondragenter , ondragover en ondorp . Dat is eigenlijk alles. Voorbeeld hieronder.

HTML5 voorbeeld van slepen en neerzetten - "Basketbalmand"

Een voorbeeld van het implementeren van drag-and-drop-bewerkingen (slepende elementen) met behulp van HTML5.

Bron HTML-code

HTML5: HTML, body (lettertypefamilie: Arial-lettergrootte: 11px; ) .basket (rand: 1px effen #777; breedte: 105px; hoogte: 120px; opvulling: 10px; randradius:0 0 10px 10px; achtergrondkleur: #eee; box-shadow: inzet 0px 0px 5px #777; ) .basket .ball ( breedte: 30px; hoogte: 30px; randradius:15px; box-shadow: 5px 5px 10px #777; zwevend: rechts; ) .ball (rand: 1px effen #FF7F50; breedte: 20px; hoogte: 20px; randradius:10px; achtergrondkleur: #FF8C00; vakschaduw: 0px 0px 5px #777; zwevend: links; marge: 1px; ) function startDrag(e) ( var e = e || window.event; e.dataTransfer.setData("Ball", e.target.id); e.dataTransfer.effectAllowed="move"; return true ; ) function endDrag(e) ( var e = e || window.event; e.dataTransfer.clearData("Ball"); return true; ) function drop(e) ( var e = e || window.event; e .target.appendChild(document.getElementById(e.dataTransfer.getData("Ball"))); e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; retour vals; ) ...

Video- en audiobestanden afspelen

Alles is hier vrij eenvoudig; er zou iets te reproduceren zijn en waar. Plaats tags En definieer op uw pagina het src-attribuut ervoor, geef de afspeelbron aan en wacht tot internetbrowsers leren deze prachtige instructies te verwerken en de meest voorkomende formaten af ​​te spelen.

Nieuwe aangepaste webformulierelementen

HTML5 belooft nieuwe elementtypen , die de invoer van een internetadres, e-mailadres, numerieke waarden, datum, tijd, kleur, enz. regelen. Als uw browser al deze innovaties al ondersteunt, ziet u hieronder hoe hij dat doet. Als de browser niet alle nieuwe soorten elementen ondersteunt, zullen de elementen waarmee hij nog niet weet te werken, eruit zien als gewone tekstinvoervelden.

Gebruikersbedieningen

Elementvarianten met verschillende typeattribuutwaarden:

Als de adreswaarde niet overeenkomt met het formaat URL en nadat u op [bevestigen] hebt geklikt, zal de browser proberen dit te corrigeren. Als dit niet lukt, wordt er een foutmelding weergegeven. Als de e-mailwaarde niet overeenkomt met het formaat e-mail en nadat u op [bevestigen] hebt geklikt, corrigeert de browser het adres of rapporteert een invoerfout.

Visualisatie van numerieke waarden

Presentatie van een numerieke waarde in de vorm van een schaal met de mogelijkheid om intervallen onder de lage norm en boven de hoge norm aan te geven, evenals de optimale waarde-optimum.

Element:

Visualisatie van het uitvoeringsproces. U kunt alleen de maximale maximale en huidige waarde opgeven.

Element HTML-broncode

Nummer uit het interval:

Geheel getal:

Datum en tijd:

Datum van:

Tijd:

Maand:

Een week:

Kleur:

URL:

e-mail:

Browsegeschiedenis beheren

Het is mogelijk om de overgang naar eerder geladen pagina's zelfstandig te beheren met behulp van JavaScript en het object geschiedenis. Als u bijvoorbeeld window.history.length aanroept, wordt de 'geschiedenislengte' geretourneerd, en als u window.history.back() , window.history.forward() of window.history.go(stepCount) aanroept, worden de juiste overgangen uitgevoerd. Hieronder ziet u een klein voorbeeld:

Vooruit>

Sessiestatus opslaan

Met deze geweldige functionaliteit kunt u sessiegegevens opslaan en herstellen. We hebben de bestelling ingevuld, zijn het product gaan bekijken, zijn (via de link) weer teruggegaan naar het invullen van de bestelling, maar de eerder ingevoerde gegevens stonden er nog steeds. Voorheen was het onmogelijk om zonder extra inspanningen aan de serverkant van de webapplicatie een dergelijke pagina-eigenschap aan te bieden. Het is nu mogelijk om gegevens op te slaan in de context van een websessie ( sessieOpslag) of lokaal in het RAM-geheugen van de browser ( lokale opslag). sessionStorage moet het mogelijk maken dat gegevens worden bewaard zolang de sessie waarin deze zijn geïnitialiseerd actief is. De opgeslagen gegevens zijn toegankelijk vanaf verschillende webpagina's die door de browser worden geladen. De optie met localStorage zou blijkbaar gegevens moeten opslaan terwijl de browser zelf geopend is. Omdat toegang tot localStorage altijd beschikbaar moet zijn, zelfs als er geen verbinding met de server is, kan elke pagina die door de browser wordt geopend gegevens ontvangen van localStorage. De sessiestatus is in beide gevallen een set sleutel-waardeparen die toegankelijk zijn via aanroepen van xxxStorage.setItem(key, value) en xxxStorage.getItem(key) .

Voorbeeld: Zie de sectie over het bewerken van elementinhoud met behulp van het nieuwe attribuut tevredenbewerkbaar, geïntroduceerd in HTML5, is. Hieronder zijn twee knoppen toegevoegd, waarvan er één de inhoud van het bewerkte blok opslaat en de tweede deze herstelt. Klik op [Opslaan], bewerk de inhoud van het blok en klik op [Herstellen]. Als uw browser HTML5-functionaliteit ondersteunt sessieOpslag en vervolgens de inhoud van het blok tevredenbewerkbaar zal worden hersteld.

Herstellen

Opslaan Herstellen

Wissel berichten uit tussen pagina's

Als uw pagina elementen bevat die de inhoud van andere pagina's laden: niet alleen pagina's van uw site, maar ook pagina's van een heel ander domein, dan is het met de implementatie van HTML5-aanbevelingen mogelijk om berichten met dergelijke vensters uit te wisselen. De pagina die het bericht verzendt, doet dit met behulp van de functieaanroep window.postMessage(message, target), en de pagina die het bericht ontvangt, moet een gebeurtenishandler “onmessage” bevatten, waar deze de berichttekst event.data al moet verwerken als dit inderdaad het geval is de ontvanger - komt overeen met de waarde event.origin . Vóór de komst van dit mechanisme was het niet mogelijk om aan de clientzijde met verschillende internetbronnen te communiceren. Hieronder wordt een voorbeeld gegeven van de eenvoudigste implementatie van communicatie tussen twee pagina's met behulp van het nieuwe HTML5-berichtmechanisme. Op het eerste gezicht lijkt het misschien dat er in het voorbeeld niets bijzonders gebeurt. Meer precies: het is niet duidelijk waarom dit allemaal nodig is. Berichten kunnen zelfs populair worden bij het creëren van informatieportals die verschillende internetdiensten op één plek combineren. Stel dat er bijvoorbeeld een bepaalde internetdienst bestaat, waarvan de diensten alleen kunnen worden gebruikt na het invullen van een omvangrijke elektronische aanvraag. Stel ook dat er een klant is die vrij vaak gebruik maakt van de diensten van deze dienst, maar zijn verzoeken verschillen elke keer weinig van elkaar (de meeste parameters zijn altijd hetzelfde). Als zo’n internetdienst naast het elektronische formulier voor het invullen van een aanvraag ook een ‘berichtontvanger’ zou ondersteunen voor het automatisch plaatsen van een bestelling voor zijn diensten, dan zouden zijn klanten het venster van deze dienst naar de website kunnen ‘slepen’. hun pagina's (met behulp van het element ), maakt u uw eigen (voor uzelf geoptimaliseerde) aanvraagformulieren en functies om deze in de vorm van berichten naar de doeldienst te sturen. De meeste parameters worden in dit geval automatisch gegenereerd, bijvoorbeeld klantgegevens. Natuurlijk kan soortgelijke communicatie worden geïmplementeerd via HTTP-verzoeken van de client naar de server, in de header waarvan de vereiste parameters worden doorgegeven, maar het is vermeldenswaard dat er in het geval van het HTML5-berichtmechanisme geen verkeer is bij het doorgeven parameters, omdat alles aan de clientzijde gebeurt.

Voorbeeld van twee pagina's die berichten uitwisselen

Een voorbeeld van het implementeren van berichtuitwisseling tussen pagina's met behulp van HTML5.

Broncode van de berichtbronpagina

function init() ( document.getElementById("form").onsubmit = sendMessage; ) function sendMessage() ( var location = window.location; var message = document.getElementById("message").value; var target = document. getElementById("doel"); target.contentWindow.postMessage(bericht, locatie.protocol+"//"+locatie.host); return false; ) ...

bericht_bron.html:

Kan messages_target.html niet laden!

Bericht tekst

Broncode van de berichtontvangerpagina

function init() ( if (window.addEventListener) window.addEventListener("message", receiverMessage, false); else window.attachEvent("onmessage", receiverMessage); ) function receiverMessage(event) ( document.getElementById("target" ).innerHTML = event.data; document.getElementById("origin").innerHTML = "van " + event.origin; ) ...

berichten_target.html:

Ik wacht op een bericht... van...

Elementinhoud bewerken

Door nu het contenteditable attribuut te definiëren, kunt u individuele opmaakelementen bewerkbaar maken, bijvoorbeeld tekstblokken, lijsten, enz. Met behulp van het designmode attribuut kunt u de gehele pagina bewerkbaar maken. Deze functionaliteit kan handig zijn voor het organiseren van feedback met de eigenaar van de bron, bijvoorbeeld voor het invullen en verzenden van een aanvraag, bestelling of iets dergelijks. U maakt een HTML-pagina van het formulier in de oorspronkelijke vorm en geeft deze aan de gebruiker om in te vullen. Na het invullen bevestigt de gebruiker de ingevoerde gegevens en wordt het bewerkte document naar de server verzonden. Hieronder ziet u een voorbeeld van bewerkbare opmaak:

De inhoud van dit blok kan worden bewerkt omdat het attribuut ervoor is gedefinieerd tevredenbewerkbaar:

Bij het bewerken van tabelcellen veranderen de breedte van de kolommen en de hoogte van de lijnen automatisch.

Om een ​​nieuw lijstitem in te voeren, drukt u op .

• Lijstitem 1
• Lijstitem 2
• Lijstitem 3

Nadat u een nieuw item aan de lijst heeft toegevoegd, wordt de nummering automatisch bijgewerkt.

Genummerd lijstitem 1

Genummerd lijstitem 2

Genummerd lijstitem 3

Vectorafbeeldingen

Ondersteuning verwacht SVG- Opmaaktaal voor vectorafbeeldingen gebaseerd op . De afbeeldingen worden in de opmaak ingevoegd, wat logisch is, met behulp van de tag , bijvoorbeeld als volgt:

Als u de onderstaande geometrische vormen ziet, betekent dit dat uw browser SVG al ondersteunt.

Wiskundige uitdrukkingen

Er wordt ook steun verwacht MathML- een opmaaktaal voor wiskundige uitdrukkingen op basis van XML. Hier is een voorbeeld van het markeren van de formule voor het berekenen van de lengte van een zijde van een driehoek met behulp van de cosinusstelling:

a = b 2 + c 2 - 2 b c cos α

Als u een formule met een vierkantswortelsymbool ziet, begrijpt uw ​​browser MathML al.

A = b 2 + c 2 - 2 b c cos α

Andere opmaakelementen

Allereerst zou ik een groep nieuwe pagina-opmaakelementen willen benadrukken die voorheen niet expliciet bestonden. Deze omvatten het label - artikel, notitie, nieuws, etc.; - titel of kop van het artikel - voettekst of voettekst - sectie of hoofdstuk van het artikel. Waarom is dit nodig als hetzelfde kan worden gedaan met behulp van elementen verschillende klassen? Dit is nodig zodat de betekenis van uw markup ook duidelijk is voor degenen die deze proberen te analyseren. Ik heb het niet over de persoon die je tekst leest (hij ziet de opmaak niet, zonder alles is hem duidelijk), maar over geautomatiseerde systemen en dit geldt in de eerste plaats voor zoekmachines. Semantische belasting is erg belangrijk voor zoekmachines bij het berekenen van de relevantie van uw pagina's voor een specifieke zoekopdracht. In deze context verdient het element bijzondere aandacht , omdat het is ontworpen om het blok met de belangrijkste navigatielinks op uw pagina te markeren. Misschien zullen zoekmachines dergelijke links anders behandelen. Hieronder vindt u een overzichtstabel van de nieuwe HTML5-tags die betekenis toevoegen aan de opmaak.

Korte beschrijving van tags

	Artikel, nieuws, notitie, commentaar of elk ander type individuele publicatie. Label artikel combineert informatie met betrekking tot één onderwerp of probleem. Eén element artikel kan andere elementen bevatten artikel(voorbeeld hieronder).
	Opmerking, uitweiding. Label opzij kan ook worden gebruikt om delen van tekst te markeren die geen verband houden met de hoofdinhoud van de pagina, bijvoorbeeld om advertenties te plaatsen.
	Een blok met gedetailleerde informatie dat op verzoek kan worden uitgebreid.
	Signatuur van de tekening. Label bijschrift gebruikt in een tag figuur.
	Tekening met handtekening. Dit element moet een afbeelding bevatten afb en handtekening bijschrift.
	Voettekst. Label voettekst het is zinvol om het ook in een tag te plaatsen artikel om de auteur van een artikel of notitie aan te geven.
	Paginatitel of inleiding tot het artikel. Wanneer geplaatst in een tag artikel merken koptekst U kunt een titel, een korte beschrijving van de publicatie en links naar gerelateerd materiaal toevoegen.
	Koppen groeperen h1 - h6 in een header met meerdere niveaus.
	Markering. Label markering Het is zinvol om dit te gebruiken als u een deel van de tekst met een andere stijl wilt markeren en ernaar wilt verwijzen vanaf een andere plaats in het document.
	Blok met navigatielinks.
	Paginasectie, artikelhoofdstuk. Wanneer geplaatst in een artikel (tag artikel) kan worden geïnterpreteerd als een afzonderlijk hoofdstuk.

Hieronder ziet u een voorbeeld van HTML-opmaak met behulp van de vermelde tags.

HTML5 is nog geen aanbeveling geworden, en er is controverse over het gebruik van de "semantische tags" zoals En al heel wat. Niemand weet nog precies hoe ze correct in de markup moeten worden ingevoegd, maar er zijn een aantal tips voor het gebruik van de nieuwe structurele HTML5-tags, waar moeilijk over te twisten valt, omdat hun betekenis duidelijk is. Hier zijn er een aantal:

Gebruik geen tag koptekst gewoon om er één title-tag in te plaatsen h1 - h6 net zoals het niet nodig is om iets anders in de kopteksttags te stoppen dan de tekst van de kopteksten zelf. Dit moet je niet doen: Sitenaam

Gebruik geen tag hgroep om groepen koppen van één element te maken. Elk afzonderlijk element uit h1 voor h6 en dus de titel zelf. Hier is een voorbeeld van wat u niet moet doen: Sitenaam

Het is niet nodig om elementen toe te voegen sectie binnen andere elementen, als ze de volledige inhoud van deze elementen bevatten. In het bovenstaande voorbeeld zijn er geen afzonderlijke blokken binnen elke opmerking sectie om de commentaartekst zelf te markeren. Hier is een voorbeeld van een extra element sectie :

Commentaartekst

Gepubliceerd...

Het is niet nodig om de betekenis van het element te begrijpen artikel letterlijk. Dit is niet alleen een artikel, maar ook elke vorm van presentatie van een volledige gedachte. Het is om deze reden dat de commentaren op het artikel in het eerder gegeven voorbeeld ook in afzonderlijke blokken zijn verdeeld artikel.

Gebruik HTML5-structuurtags alleen als u denkt dat ze zoekmachines helpen meer te leren over de semantiek van uw markup. Als de tag geen aparte betekenis heeft, maar alleen wordt toegevoegd voor 'schoonheid', dan is het resultaat van de toevoeging het 'extra gewicht' van uw pagina, wat, zoals bekend, 'schadelijk is voor de gezondheid' van de plaats.

Dat is voor mij alles over de nieuwe functies van de hypertext-opmaaktaal die zou moeten verschijnen met de release van de HTML5-aanbeveling.

Met de release van HTML5 zijn er veel nieuwe functies aan HTML toegevoegd. En wat nog beter is, is dat sommige browsers sommige van deze functies al ondersteunen, terwijl andere er nog steeds naartoe evolueren. Op deze pagina kunt u bijhouden welke functies aan browsers worden toegevoegd.

1. Nieuw documenttype en tekenset.

Een van de voordelen van HTML5 is de eenvoud ervan.

Ja, dat is alles. Letterlijk twee woorden. Deze eenvoud is waarschijnlijk te wijten aan het feit dat HTML5 op zichzelf staat en geen onderdeel blijft van SGML.

Charset is ook heel eenvoudig, het gebruikt utf-8 en wordt op dezelfde manier gespecificeerd, letterlijk met één tag:

2. Nieuwe structuur

HTML5 begrijpt dat een webpagina een structuur heeft, net als bijvoorbeeld een boek. Meestal is dit de navigatie, de inhoud zelf, het zijmenu (zijbalk) en de header. En HTML5 biedt tags voor al deze elementen.

• – definieert paginasecties
• – definieert de paginatitel
• – definieert de paginavoettekst
• – definieert paginanavigatie
• – definieert het artikel of de hoofdinhoud op de pagina
• – definieert aanvullende inhoud, zijbalk op de pagina
• – definieert de afbeelding, annotatie van het artikel

3. Nieuwe inbouwelementen.

Deze nieuwe elementen definiëren enkele basisconcepten en vertegenwoordigen pagina-elementen:

• – om de inhoud aan te geven
• – om tijd of datum aan te geven
• – om bepaalde afmetingen aan te geven, zoals schijfruimte
• – om uw succes en vooruitgang aan te geven

4. Nieuwe ondersteuning voor dynamische pagina's

HTML 5 is ontworpen om de taken van webontwikkelaars te vereenvoudigen. Daarom zijn er veel nieuwe functies om dynamische pagina's te ondersteunen.

• Contextmenu – HTML 5 ondersteunt het maken en gebruiken van contextmenu's in webpagina's en applicaties
• asynchronous attribuut - Deze tag vertelt de browser dat het script asynchroon moet worden geladen, zodat het laden en weergeven van de rest van de pagina niet wordt vertraagd.
• – bevat gedetailleerde informatie over het element.
• – maakt een tabel die is gemaakt op basis van een database of een andere dynamische paginabron
• – oude tags zijn terug, waardoor u menusystemen op uw webpagina's kunt maken
• – definieert de acties die moeten plaatsvinden wanneer een dynamisch element wordt geactiveerd

5. Nieuwe soorten formulieren

HTML5 ondersteunt alle oude formuliertypen, maar er zijn ook nieuwe toegevoegd:

• datum Tijd
• datetime-lokaal
• maand
• nummer
• bereik
• e-mail

6. Nieuwe elementen

Er zijn enkele nieuwe elementen in HTML5:

• – een element waarmee u JavaScript op webpagina's kunt gebruiken. Hierdoor kunt u afbeeldingen of afbeeldingen aan tooltips toevoegen, of eenvoudigweg dynamische afbeeldingen op de pagina maken.
• – voegt een video toe aan een webpagina.
• – voegt geluid toe aan een webpagina.

7.Verwijderde items

Er zijn ook HTML4-elementen die niet meer in HTML5 kunnen worden gebruikt. De meeste zijn al lang achterhaald, dus dergelijke acties zijn niet verrassend.

Van de auteur: De release van de HTML 5-standaard twee jaar geleden zorgde voor opschudding in de ontwikkelaarsgemeenschap. Niet alleen omdat er veel nieuwe eigenschappen in de specificatie zaten, maar ook omdat het de eerste grote update van HTML was sinds HTML 4.01, die in 1999 uitkwam. Je kunt nog steeds sites online vinden die er prat op gaan dat ze de "moderne" HTML5-standaard gebruiken.

Gelukkig hoefden we deze keer niet zo lang te wachten op de volgende generatie HTML. In oktober 2015 begon het W3C met de ontwikkeling van een concept van HTML 5.1, dat een aantal problemen moest oplossen die nog open bleven in HTML5. Na een lange tijd bereikte de specificatie in juni 2016 de status ‘Kandidaataanbeveling’, in september 2016 de status ‘Voorgestelde aanbeveling’ en uiteindelijk in november 2016 de status van W3C-aanbeveling. Degenen die de ontwikkeling hebben gevolgd, hebben wellicht gemerkt dat het pad netelig. Veel primaire HTML 5.1-functies zijn afgewezen vanwege een slecht ontwerp en gebrek aan browserondersteuning.

HTML 5.1 is nog in ontwikkeling en het W3C is begonnen met werken aan een concept van HTML 5.2, dat naar verwachting eind 2017 zal verschijnen. In dit artikel zullen we kijken naar een aantal interessante nieuwe functies en verbeteringen in de versie 5.1. Ondersteuning voor deze eigenschappen is nog steeds slecht, maar we zullen je vertellen in welke browsers je de voorbeelden in ieder geval kunt proberen.

Contextmenu met behulp van menu- en menu-items-tags

Het 5.1-concept introduceert twee soorten menu-elementen: context en werkbalk. De eerste wordt gebruikt om het oorspronkelijke contextmenu uit te vouwen, dat meestal wordt weergegeven door met de rechtermuisknop op de pagina te klikken. De tweede definieert eenvoudige menucomponenten. Tijdens het ontwikkelingsproces werd de werkbalk verlaten; de contexttag is nog steeds aanwezig.

Met behulp van de menutag kunt u een menu maken met een of meer menuitems-tags, en deze tags vervolgens aan elk element toewijzen met behulp van het contextmenu-attribuut. De menuitem-tag kan uit drie typen bestaan:

selectievakje – hiermee kunt u selecteren of deselecteren;

commando – hiermee kunt u een actie uitvoeren door te klikken;

radio – hiermee kunt u één optie uit een groep selecteren.

Basisgebruik, werkt in Firefox 49, geen ondersteuning in Chrome 54.

In ondersteunde browsers zou het contextmenu er als volgt uit moeten zien:

details en samenvattende elementen

Met de details en samenvattingstags kunt u blokken met aanvullende informatie met één klik weergeven en verbergen. Dit gebeurt meestal in JS, maar nu kan het worden gedaan met behulp van de details en samenvattingstags. Als u op de samenvattingstag klikt, wordt de inhoud van de detailtag geopend.

Het onderstaande voorbeeld is getest in Firefox en Chrome.

In ondersteunde browsers ziet de demo er als volgt uit:

Extra typen invoervelden zijn maand, week en datetime-local

Het arsenaal aan invoervelden is uitgebreid met drie nieuwe typen: maand, week en datetime-local.

Met de eerste twee typen kunt u week en maand selecteren. In Chrome worden beide typen weergegeven als vervolgkeuzeagenda's waarin u een maand of een week kunt selecteren. Bij toegang vanuit JS ziet de string er ongeveer zo uit: "2016-W43" voor week en "2016-10" voor maand.

Aanvankelijk introduceerde concept 5.1 twee datum-tijd-invoer: datetime en datetime-local. Het verschil tussen beide is dat datetime-local altijd de tijd in de tijdzone van de gebruiker selecteert, terwijl u met datetime de tijdzone kunt wijzigen. Tijdens de ontwikkeling werd het datetime-type weggegooid, waardoor alleen datetime-local overbleef. Een veld van het type datetime-local bestaat uit twee delen: een datum, die op dezelfde wijze kan worden geselecteerd als bij velden van het type week en maand, en een tijd, die afzonderlijk kan worden opgegeven.

De CodePen-demo hieronder toont voorbeelden van alle typen. Werkt in Chrome, nog geen ondersteuning in Firefox:

In browsers die de demo ondersteunen, ziet het er als volgt uit:

Responsieve afbeeldingen

HTML 5.1 introduceert verschillende nieuwe functies voor het werken met responsieve afbeeldingen zonder CSS. Elke functie heeft zijn eigen gebruiksvoorbeelden.

Afbeeldingskenmerk srcset

Met het kenmerk srcset image kunt u meerdere extra afbeeldingen met verschillende pixeldichtheden registreren. Op deze manier kan de browser afbeeldingen laden van de vereiste kwaliteit voor het apparaat van de gebruiker (op basis van de pixeldichtheid op het apparaat, zoomniveau en netwerksnelheid). Voor gebruikers met kleine telefoons of trage netwerken kunt u bijvoorbeeld afbeeldingen met een lage resolutie weergeven.

Het srcset-attribuut accepteert een door komma's gescheiden lijst met afbeeldings-URL's met een X-modifier. Modifiers beschrijven de pixelverhouding (aantal fysieke pixels per CSS-pixel) die geschikt is voor elke afbeelding. Eenvoudig voorbeeld:

< img src = "images/low-res.jpg" srcset = " Afbeeldingen/lage resolutie.jpg 1x, Afbeeldingen/hoge resolutie.jpg 2x, Afbeeldingen/ultrahoge resolutie.jpg 3x"

Als de pixelverhouding 1 is, wordt een afbeelding met lage resolutie weergegeven, voor 2 wordt deze in hoge resolutie weergegeven, voor 3 - ultrahoge resolutie. U kunt afbeeldingen van verschillende formaten weergeven in plaats van de pixelverhouding. Om dit te doen, moet je de w-modifier gebruiken:

< img src = "images/low-res.jpg" srcset = " Afbeeldingen/low-res.jpg 600w, Afbeeldingen/hoge resolutie.jpg 1000w, Images/ultra-hoge-res.jpg 1400w"

In dit geval wordt een afbeelding met een breedte van 600px ingesteld voor lage resolutie, 1000px voor hoge resolutie en 1400px voor ultrahoge resolutie.

Afmetingen van afbeeldingskenmerken

Mogelijk wilt u afbeeldingen op verschillende manieren weergeven, afhankelijk van uw schermgrootte. Zo kun je op brede schermen afbeeldingen in twee kolommen weergeven, maar op smalle schermen in één kolom. Het kenmerk maten helpt u hierbij. Met het attribuut kunt u de schermbreedte vertalen naar de ruimte die voor de afbeelding is toegewezen, waarna de juiste afbeelding wordt geselecteerd met behulp van het srcset-attribuut. Voorbeeld:

< img src = "images/low-res.jpg" sizes = "(max-width: 40em) 100vw, 50vw" srcset = "images/low-res.jpg 600w, Afbeeldingen/hoge resolutie.jpg 1000w, Images/ultra-hoge-res.jpg 1400w"

Wanneer de breedte van het browservenster groter is dan 40 em, specificeert het attribuut afmetingen de afbeeldingsbreedte als 50% van de vensterbreedte. Wanneer de vensterbreedte kleiner dan of gelijk is aan 40em, is de afbeeldingsbreedte 100%.

Afbeeldingslabel

Het is niet voldoende om eenvoudigweg het formaat van afbeeldingen aan te passen zodat ze op verschillende schermen passen. Je hebt een manier nodig om totaal verschillende afbeeldingen te tonen. De fototag helpt je hierbij. Met deze tag kunt u meerdere afbeeldingen voor verschillende schermen registreren. Om dit te doen, moet u de img-tag in een afbeelding wikkelen en aanvullende brontags opgeven. Brontags bevatten links naar afbeeldingen.

< picture > < source media = "(max-width: 20em)" srcset = " Afbeeldingen/klein/lage-resolutie.jpg 1x, > < / picture >

Formuliervalidatie met form.reportValidity()

HTML5 bevat de methode form.checkValidity(), die kan worden gebruikt om formuliervelden te controleren op validators. Het resultaat is een Booleaanse waarde. De nieuwe methode reportValidity() werkt op een vergelijkbare manier. Met zijn hulp kunt u het formulier valideren en het resultaat retourneren. Bovendien toont deze methode fouten rechtstreeks aan de gebruiker in de browser. Onderstaande CodePen-demo toont het resultaat (getest in Firefox en Chrome):

Het veld Voornaam moet gemarkeerd zijn en mag niet leeg zijn. Meestal werkt het als volgt:

allowfullscreen-attribuut voor frames

Met het nieuwe Booleaanse attribuut voor frames, allowfullscreen, kunt u wijzigen hoe inhoud wordt weergegeven met behulp van de requestFullscreen() -methode. Hiermee kunt u de inhoud uitbreiden naar volledig scherm.

Spellingcontrole met element.forceSpellCheck()

Met de nieuwe methode element.forceSpellCheck() kunt u de spellingcontrole van tekstelementen inschakelen. Dit is ook de eerste feature die nog in geen enkele browser wordt ondersteund. Puur theoretisch kan deze methode worden gebruikt om de spelling van niet-bewerkbare elementen te controleren.

Functies die niet zijn geïmplementeerd

Sommige functies die in vroege versies van de specificatie waren geschreven, werden uiteindelijk verwijderd, grotendeels vanwege een gebrek aan interesse van browserontwikkelaars. Hier zijn enkele van de interessante functies:

inert attribuut

Het inert attribuut moest de gebruikersinteractie voor alle onderliggende elementen uitschakelen. Hetzelfde als het handmatig toevoegen van het uitgeschakelde attribuut aan alle elementen.

Dialoogvenster Label

Met behulp van de dialoogtag was het mogelijk pop-upvensters te maken. Er werd zelfs nagedacht over een handige vorm van integratie. Het method-attribuut van de dialoogtag verhinderde dat het formulier naar de server werd verzonden; in plaats daarvan retourneerde de tag een waarde naar de maker van de dialoog.

De tag wordt nog steeds ondersteund in Firefox, een voorbeeld van hoe het werkt:

Extra koppelingen

Dit is geenszins een volledige lijst met wijzigingen in HTML 5.1. De specificatie bevat veel kleine kenmerken en wijzigingen die in de Levensstandaard zijn overgenomen, maar ook veel kenmerken die zijn verwijderd. De volledige lijst met wijzigingen is te vinden in het gedeelte Wijzigingen van de specificatie. Laten we in de tussentijd hopen dat browserontwikkelaars de nieuwe functies snel zullen oppikken!

Wat vond je het leukst aan HTML 5.1? Schrijf in de reacties!

Redacteur: Pavels Jelisejevs

1 februari 2008 om 23:51 uur Wat is er nieuw in HTML 5.0? Deel 1

• Website ontwikkeling

• Vertaling

Webtechnologieën evolueren voortdurend. Elke dag worden er nieuwe sites gemaakt die de mogelijkheden van HTML uitbreiden. HTML 4 bestaat al bijna tien jaar, maar uitgevers zijn op zoek naar nieuwe manieren om de functionaliteit van het formaat uit te breiden. De verscheidenheid aan talen en browsers beperkt echter enkele van de mogelijkheden ervan.

Om ontwikkelaars een flexibeler, interoperabel product te geven dat projecten interactiever en interessanter maakt, introduceert en breidt HTML 5 een reeks functies uit, waaronder formulierbesturingselementen, API's, multimedia, structuur en semantiek.

Het werk aan HTML 5 begon in 2004. De ontwikkelingen worden momenteel uitgevoerd als onderdeel van een gezamenlijke inspanning van de W3C HTML WG en WHATWG. Veel bekende bedrijven zijn bij de ontwikkeling betrokken, waaronder: Apple, Mozilla, Opera en Microsoft, en een aantal andere organisaties en individuen met verschillende interesses en achtergronden.

Houd er rekening mee dat de specificatie nog in ontwikkeling is en nog lang niet compleet is. Daarom is het mogelijk dat de in dit artikel genoemde functies in de toekomst veranderen. Dit artikel is bedoeld om de nieuwe functies van het HTML-versie 5-formaat te beschrijven.

Structuur

HTML 5 introduceert een hele reeks nieuwe elementen die de paginastructuur veel eenvoudiger maken. De meeste HTML4-pagina's bevatten een aantal algemene structuren, zoals kop- en voetteksten, en kolommen, en tegenwoordig wordt het een traditie om deze te markeren met behulp van div-elementen en er een klasse of id aan toe te wijzen.


De afbeelding toont een typische lay-out met twee kolommen waarbij gebruik wordt gemaakt van div-elementen, waarbij hieraan een klasse of id wordt toegewezen. De structuur bevat een paginakop, een voettekst, een navigatiemenu en inhoud verdeeld in 2 kolommen -

Het gebruik van div-elementen heeft de voorkeur omdat de huidige versie van HTML 4 de semantiek mist om deze onderdelen specifieker te beschrijven. HTML 5 lost dit probleem op door nieuwe elementen te introduceren, die elk een eigen naam hebben.

De documentcode ziet er als volgt uit:

...
...
...

...
...

Het gebruik van deze elementen heeft verschillende voordelen. Bij gebruik in combinatie met elementkoppen (h1 - h6) maakt dit het mogelijk om in elk niveau een subsectie met een kop te introduceren, in tegenstelling tot de mogelijke 6 niveaus in de vorige versie van HTML. De specificatie omvat een gedetailleerd algoritme voor het genereren van grenzen. Deze elementen kunnen worden gebruikt als schrijf- en browserhulpmiddelen om een ​​inhoudsopgave te genereren en gebruikers te helpen bij het navigeren door het document.

De volgende structuur is bijvoorbeeld verdeeld in niveaus met geneste h1-elementen:

Niveau 1Niveau 2Niveau 3
Houd er rekening mee dat u voor maximale compatibiliteit met verschillende browsers verschillende kopniveaus kunt gebruiken, zoals h2, h3, enz.

Door het doel van secties op een pagina te definiëren met behulp van specifieke sectie-elementen, kan deze technologie de gebruiker helpen gemakkelijker door de pagina te navigeren. Een gebruiker kan bijvoorbeeld eenvoudig naar een menusectie navigeren of snel van het ene artikel naar het andere gaan zonder dat de ontwikkelaar zo'n jumplink hoeft te maken. Ontwikkelaars kunnen zich ook verheugen omdat door het vervangen van div-elementen door overeenkomstige elementen de broncode eenvoudiger en schoner zal zijn.

Het header-element vertegenwoordigt de titel van de pagina. Deze sectie kan niet alleen de titel zelf bevatten, maar ook eventuele subkoppen die de gebruiker helpen meer inzicht te krijgen in de inhoud van de pagina.

Een voorbeeld van HTML 5 door Lachlan HuntExample BlogVoeg hier een tagregel in.
Het element "voettekst" vertegenwoordigt de "voettekst" van de pagina. Dit deel van de pagina bevat meestal een link naar de auteursrechten, tellers, enz.

Het “nav”-element - definieert het sitenavigatiegedeelte:

Het "aside"-element definieert een sectie die indirect verband houdt met de inhoud van de pagina, meestal gebruikt als bijlage.
Wat is er nieuw in HTML5? Verschillen tussen HTML5 en HTML 4

De HTML5-specificatie brengt veel veranderingen met zich mee, van verschillende niveaus en van wisselend belang. Fundamenteel kunnen de belangrijkste veranderingen worden onderverdeeld in 7 blokken:

a) Semantiek (semantische betekenis van taaleenheden)

HTML5 introduceert een aantal nieuwe semantische tags waarmee u de interne structuur van webpagina's betekenisvoller kunt organiseren. Dit omvat zowel bloktags zoals kop-, voettekst-, artikel- en tekstmarkeringstags zoals mark, ruby, details. Een aantal bestaande HTML4-tags zijn verouderd verklaard, individuele tags hebben hun betekenis veranderd en attributen hebben bepaalde veranderingen ondergaan.

b) Multimedia

HTML5 voegt native ondersteuning toe voor multimedia-inhoud (audio en video) rechtstreeks in HMTL-opmaak - met de bijbehorende API voor beheer.

c) Afbeeldingen

Het werken met afbeeldingen aan de clientzijde is merkbaar eenvoudiger geworden. Het canvas-element en een speciale JavaScript-API om ermee te werken zijn toegevoegd aan HTML5. Canvas is een dynamisch ‘oppervlak’ waarop je programmatisch kunt tekenen. HTML5 bevat officieel ook de SVG-tag, waarmee u vectorafbeeldingen kunt implementeren die worden beschreven door de overeenkomstige webstandaard SVG (Scalable Vector Graphics).

d) Webformulieren

Nieuwe webformulierelementen: typen en attributen waarmee u de mogelijkheden van traditionele formulieren kunt uitbreiden met ingebouwde tools zonder het gebruik van extra bibliotheken - van hints in het invoerveld (placeholder) en validatie van ingevoerde waarden tot speciale elementen voor datums en kleuren invoeren.

e) JavaScript-API's.

HTML5 bevat nieuwe mogelijkheden voor het verplaatsen van objecten (Drag & Drop), het werken met de geschiedenis van overgangen (History API), evenals een aantal kleine dingen, zoals de mogelijkheid om inhoud direct op de huidige locatie bewerkbaar te maken met behulp van Content Editable-attributen .

f) Nieuw DOCTYPE

De DOCTYPE-tag is een belangrijk onderdeel van webpagina's die beweren aan de standaarden te voldoen: zonder deze tag zal de code de validator niet passeren. DOCTYPE is ook belangrijk voor het correct weergeven en functioneren van de pagina in browsers die aan de standaarden voldoen.

In HTML 4 waren er 3 soorten elementen:

• 1. Strikt
• 2. Overgangssituatie
• 3. Met frames (Frameset)

Vaak was het kiezen van een of ander DOCTYPE-element behoorlijk moeilijk. In HTML5 DOCTYPE is er maar één, deze is als volgt geschreven:

Deze korte vermelding vervangt de oudere, langere vorm:

g) Syntaxis

HTML 5 heeft twee syntaxis: "aangepaste" HTML en XML. De HTML-syntaxis definieert gedetailleerde parseerregels (inclusief "foutafhandeling").

De XML-syntaxis is compatibel met XHTML1-documenten en de implementaties ervan. Om deze syntaxis te gebruiken, moet het MIME-type (Multipurpose Internet Mail Extensions) worden gedeclareerd als een XML-type en moeten de elementen worden opgebouwd volgens de XML-specificatie.

Figuur 2 - Basis HTML5-eigenschappen