HTML6: Wat is het en wanneer komt het?

Wanneer kunnen we HTML6 verwachten? Welnu, de WHATWG – het normalisatie-instituut dat wijzigingen in de HTML-specificatie aanstuurt – heeft besloten een “levend document”-benadering voor normalisatie te hanteren. Dit betekent dat wat wij “HTML6” noemen waarschijnlijk geen grote update zal zijn, maar eerder zal bestaan uit kleinere wijzigingen in de specificatie die vaker plaatsvinden.

Hoewel, HTML specificaties worden voortdurend herzien en verbeterd. Browserleveranciers zijn altijd bezig met het implementeren van de nieuwste functies om in de wereld te brengen, wat betekent dat we altijd nieuwe dingen krijgen om uit te proberen (misschien naast het uitproberen van een van de beste websitebouwers). Er komen veranderingen jouw kant op die de moeite van het opmerken waard zijn – lees verder voor twee game-changers.

Terwijl je hier bent, wil je misschien ook onze beginnersgids voor HTML-tags bekijken, of onze selectie van de beste HTML-API’s doorbladeren. Plus, voor meer verbeteringen in uw proces, zorg ervoor dat uw webhostingservice perfect voor u is, en dat al uw media veilig zijn opgeslagen in een top cloudopslagoptie.

Native modals

Een verandering die zijn weg naar browsers vindt, is het <dialog>-element. Dit fungeert als een native equivalent van JavaScript-gestuurde modale vensters, die een gemeenschappelijk ontwerppatroon zijn op veel sites.

<dialog open> <p>This is a HTML-powered dialog box.</p></dialog>

Het kan worden geopend en gesloten door het open-attribuut om te schakelen. Standaard wordt het getoond, zwevend boven de plaats waar het op de pagina is geplaatst. Als de openModal-methode via JavaScript wordt aangeroepen, wordt een meer bekende modal-achtige interface gebruikt.

De achtergrond wordt standaard grijs en de inhoud eronder is niet meer interactief.

<dialog> <form method="dialog"> <input type="submit" value="Yes" /> <input type="submit" value="No" /> </form></dialog>

Formulieren binnen een modale dialoog kunnen een methode-attribuut van dialog hebben, die de waarde zal indienen en de waarde zal teruggeven aan het dialog-object zelf. Dit maakt <dialog> een geweldig hulpmiddel voor het bevestigen van acties of andere kleine interacties.

Het element is gestandaardiseerd, en momenteel hebben alleen Chrome en Samsung Internet-browsers volledige ondersteuning. Degenen zonder zullen nog steeds de inhoud van een dialoogvenster tonen, maar het zal in plaats daarvan binnen de pagina worden geplaatst.

Smarter menu’s

Sommige webtoepassingen stellen gebruikers in staat om groepen acties uit te voeren binnen hun interface. Deze zouden de huidige pagina in een of andere vorm beïnvloeden, zoals het toevoegen van een item aan een lijst.

Voorheen zouden deze worden gemarkeerd als een <ul> – een ongeordende lijst van acties die een gebruiker zou kunnen nemen. Terwijl de <ul> is bedoeld voor een lijst van display items, is het niet het meest geschikt voor interactieve elementen.

<menu type="toolbar"> <li><button>Cut</button></li> <li><button>Copy</button></li> <li><button>Paste</button></li></menu>

Een menu bevat een reeks acties, die zouden worden geactiveerd door <button> elementen binnen hen. Voor de rest werkt het <menu> element niet anders dan een gewone lijst met items. Naarmate het gebruik van browsers verbetert, kunnen ondersteunende technologieën deze interactieve elementen gemakkelijker vinden.

Er zijn veel kleinere wijzigingen die voortdurend in de specificatie verschijnen en hun weg vinden naar browsers. Houd de updatepagina’s van elke browser in de gaten en neem een kijkje in de WHATWG levende standaard.

Deze informatie is oorspronkelijk verschenen in het tijdschrift Web Designer. Bekijk alle Web Designer-artikelen op CB.

• 8 HTML-tags die u moet gebruiken (en 5 die u moet vermijden)
• Hoe verenigt u uw UX op verschillende platforms
• 16 prachtige parallax scrolling websites