Dutch Design Week 2017
Dutch Design Week 2017

Opmerkingen over HTML6

Op linkedIn gepubliceerd op 11 december 2017

Inleiding

In dit artikel spreek ik over HTML6 dat in feite nog niet bestaat. Wat is het geval? Zoals bekend wordt een webpagina gebouwd in HTML, de taal die de content (zoals tekst) op het beeldscherm weergeeft en structureert in alinea's, tabellen enzovoorts.

De versie 5 van HTML - de nieuwste versie - is als benaming van belang omdat HTML5 nieuwe (semantische) elementen bevat die in eerdere versies niet bestonden zoals 'header', 'footer', 'canvas' en 'video'.

In HTML5 kun je weliswaar beperkt eigen bedachte attributen binnen een element gebruiken, zoals data-object="root" of data-object=root. Met zulke attributen zou je uit een javascript een bepaalde functie kunnen oproepen. Bootstrap maakt hier gebruik van.

Dat maakt de benaming versie 5 daarom essentieel omdat HTML4 en eerdere versies de genoemde semantisering van elementen en het zelf bedacht 'data-'-attribuut niet kenden. Eigen bedachte elementen zijn er niet in HTML5. Dat zou een nieuwe stap kunnen worden bij de verdere ontwikkeling van HTML.

Als je in HTML de vrijheid zou krijgen om nieuwe elementen te bedenken, zou dat een breuk met het huidige HTML5 betekenen. Dan is de benaming 'HTML6' op z'n plaats.

Verderop werk ik een aantal ideeën uit voor in HTML6.

'To expect or not to expect?'

Onder het trefwoord "html6" via Google kun je een flink aantal links op internet vinden die betrekking hebben op een mogelijke opvolger van HTML5.

De verstrekte informatie levert me geen eenduidige en concrete informatie op. Tot nu toe krijg je alleen diverse voorstellen over een vernieuwing van de broncode gepresenteerd.

Desalniettemin worden er zinnige voorstellen geopperd die tot een verbetering cq. vereenvoudiging van HTML zouden kunnen leiden. Het weglaten van de brackets rond de tags is een heel interessante optie: <!DOCTYPE html>, <html>, <head> en <body> veranderen in !DOCTYPE html, html, head en body.

Ik kwam in dit verband een voorstel tegen waarbij de twee left en right brackets worden vervangen door één stel 'tortoise shell brackets': <h1>HTML6</h1> wordt dan 〔h1 HTML6〕. Op het eerste gezicht lijkt het een vereenvoudiging, maar deze 'tortoise shell' brackets zijn geen standaard ASCII-tekens op het toetsenbord. Deze keuze is al om die reden praktisch onuitvoerbaar.

Verder vond ik een voorstel om <html>, <head> enzovoorts te vervangen door <html:html>, <html:head>. Deze notatie levert veel extra coderegels op leidend naar een mogelijke vertraging in het laden van de pagina. Voor deze notatie zou ik niet kiezen.

Maar ik vond naast het voorstel van de bracketloze-elementen ook een heel ander interessant voorstel, namelijk het invoeren van een aantal nieuwe semantische elementen ("SE'): <picture></picture>, <social></social>, <list></list>, <link></link>, <info></info>, <logo></logo>, <page></page>. Hier volgt een overzicht bij deze voorstellen:

Deze nieuwe semantische elementen in HTML6 zouden dan een mooie aanvulling kunnen zijn op <header></header>, <footer></footer>, <aside></aside>, <nav></nav> die in HTML5 zijn geïntroduceerd. Hiermee wordt de semantisering uitgebreid van HTML. Zodoende wordt het schrijven in HTML ook begrijpelijker, minder abstract en meer in lijn met menselijke taal.

Zoals ik in de inleiding al vermeldde, zou ik in HTML6 meer vrijheid in het zelf bedenken van elementen en attributen wensen. Daarmee zou HTML6 wat betreft de elementen een kenmerkende eigenschap van XML overnemen.

Overbodigheden in HTML6 verwijderen

In HTML5 is hier een begin mee gemaakt. De eind-tag </p> hoeft niet meer gebruikt te worden zonder dat het invloed heeft op het renderings- en validatieproces van de pagina.

Mijn voorstel is om het basisprincipe van de begin- en eindtag in HTML op te heffen. Er zijn overigens een paar elementen in de body-sectie die geen eindtag hebben: <img> / <img />, <hr> / <hr /> <br> / <br />.

Op basis van de 'self-closing tag' kunnen we in HTML6 dit principe consequent uitbreiden naar alle (semantische) tags. Dat betekent dat elk element wordt afgesloten als een nieuw element wordt genoteerd. In HTML5 kan dat niet. Een h1-h6-tag moet altijd worden afgesloten met een eind-tag, anders zou een p-element worden geinterpreteerd als 'child' van bijvoorbeeld h3. En van dat principe wil ik af.

In HTML5 mogen de html-, head- en body-elementen afwezig zijn in de broncode. Ik zou voor HTML6 willen voorstellen om het html-element als overbodig te verklaren en geheel weg te laten. De doctype declaration "!DOCTYPE' (<!DOCTYPE html>) moet voldoende zijn voor de browser om de broncode te herkennen als zijnde HTML.

De aanwezigheid van het head- en body-element is volstrekt zinloos, want de meta-elementen in de head-sectie zijn duidelijk te onderscheiden van de elementen voor de content (tekst en afbeeldingen) die in de body-sectie staan.

Samenvatting

Samenvattend pleit ik voor een vereenvoudiging en semantisering van de HTML-codering waarbij er ook ruimte is om zelf elementen en attributen te bedenken.

Om de modulaire en hierarchische eigenschappen voor HTML6 te waarborgen is het belangrijk dat HTML erin voorziet dat de typen data die cruciaal zijn voor een correcte weergave van de webpagina, in de juiste volgorde en per blok in de broncode staan vermeld.

De doctype declaration (<!DOCTYPE html>) staat als vanouds helemaal bovenaan in de webpagina. Dan volgen de elementen die in de head-sectie van HTML staan en daaronder de elementen van de body-sectie. Daar zit een logica achter. De browser dient bij het inlezen eerst te weten om wat voor type pagina het gaat (HTML), dan te weten hoe de opmaak (CSS-stylesheet) is om tot slot de content (tekst en afbeeldingen) te laden.

Elk element is van zichzelf een module die bestaat uit meerdere onderdelen: de tag zelf (h3 of p), een class (class = container-fluid) en tot slot de tekst. In dit systeem staat het HTML-element meest links, dan volgt naar rechts de class en ten slotte de content. De browser leest eerst de HTML-code, vervolgens het attribuut in en dan pas de feitelijke content. Dit weerspiegelt het hierarchische karakter in de module. Het element eindigt waar een nieuwe tag wordt geplaatst.

Ik wil benadrukken dat de hier gepresenteerde voorstellen een gedachte-experiment zijn bij het vormen van een nieuw HTML: HTML6.

Tot slot

Hieronder kun je twee broncode-voorbeelden van HTML inzien. De eerste is in HTML5, de tweede zoals ik me HTML6 zou kunnen voorstellen:

Voorbeelden: 1. Voorbeeld van broncode in HTML5, 2. Voorbeeld van broncode in HTML6 door Joost van Meeteren voorgesteld.

Bronnen: HTML6 test how well does your browser support HTML6?, W3C: HTML Working Group gaat werken aan 'html6', When is the expected release date of html 6?, HTML6, JSON SXML Simplified, Introducing HTML6, What's New in HTML6, Is this the first HTML6 specification?, A Look Into HTML6 - What Is It and What It Has to Offer?, HTML6 and CSS4: My Proposals, HTML6 And CSS4: My Proposals, HTML6 and CSS4 Rumor or Truth - The History and Future of HTML, Expected New Features in HTML6.

De geplaatste artikelen op LinkedIn zijn te vinden op mijn account: Joost van Meeteren | Developer & Designer bij ....

Voor een overzicht van de geplaatste artikelen op LinkedIn kun je ook terecht op de volgende pagina: LINKEDIN | Web Development and Web Design.

Joost van Meeteren, 11 december 2017