Aantekeningen bij HTML5 for web designers

Van de week viel eindelijk het boek HTML5 for web designers van Jeremy Keith door de brievenbus. Wat een helder, bondig en goed geschreven boek!

Hierbij een overzicht van de belangrijkste vernieuwingen in de code en mijn aantekeningen hierbij.

De HTML-code

  • Voor het doctype volstaat: <!DOCTYPE html>
  • meta tags: <meta charset=”UTF-8″>, http:-equiv=”Content-Type” en content=”text/html” vervalt
  • script-tag: http://file.js, type=”text/javascript” vervalt
  • css-tag: <link rel=”stylesheet” href=”file.css”>, type=”text/css”vervalt

Opmaak van de syntax: Anything goes

Hoofdletters, kleine letters, quotes of niet, self-closing of niet. Je kunt je eigen stijl aanhouden.

Dat de opmaak van de syntax vrij is is op zich fijn. Maar het vergt van de webbouwer behoorlijk wat discipline om dan ook in een stijl, helder en overzichtelijk te blijven programmeren. Het werkt m.i. slordigheid in de hand.

Vervallen tags (obsolete) of tags die van betekenis veranderen

  • voor opmaak vervallen: frame, frameset, noframes.
  • ook font, big, center, strike, bgcolor, cellspacing, callpadding en valign vervallen, gebruik hiervoor de CSS
  • voor afkortingen vervalt: acronym (gebruik hiervoor abbr)
  • voor citaten: cite mag alleen worden gebruikt om te refereren naar de titel van een stuk/boek en niet naar de persoon, whatever…
  • small vervalt niet maar betekent nu: dit zijn de kleine lettertjes, bijvoorbeeld een voetnoot/voorwaarden e.d.
  • b vervalt niet maar betekent nu: dit staat stilistisch los van de tekst, maar heeft geen extra betekenis. Heeft de tekst wel extra gewicht gebruik dan em

De vervallen en veranderde tags laten zien dat er nu echt een strikte scheiding is tussen de HTML-code en de opmaak. Goede zaak 🙂

De inline tag a mag meerdere (block-)elementen bevatten

Dit mag dus voortaan:

<a href="/about">
  <h2>About me</h2>
  <p>Find what makes me tick.</p>
</a>

Je kunt alleen geen a-tag in een a-tag nesten.

Rich media

Beeld <canvas>

Aan het element kun je javascript hangen voor interactieve grafische toepassingen. Plaats binnenin tags de HTML die de bezoeker te zien krijgt als haar browser geen HTML5 ondersteunt.

Nadeel: Niet accessible, dus gebruik voorlopig als opleuking en niet voor essentiële content. Of zorg dat de data ook binnenin het canvas element staat, bijvoorbeeld via een tabel. Er is hiervoor een jQuery plugin: Accessible Charts with HTML5 from Designing with Progressive Enhancement.

Geluid <audio>

Gelaagd, en simpel. Je kunt verschillende formaten aanbieden via <source>, wat het eerst werkt wordt uitgevoerd. En voor Explorer kan binnen de <audio> ook het object voor flash worden gezet.

Definieer bij <audio> de boolean attributen autoplay, controls, loop en de variabele: preload=”none” of auto of metadata. De knoppen van de controls zijn aan te passen via javascript  in <button> die naar het id van het <audio> element verwijst.

Video <video>

Is hetzelfde opgezet als <audio>

Extra attribuut voor <audio> is poster: afbeelding die wordt getoond als de film nog niet loopt.

YouTube’s ondersteuning voor HTML5: HTML5-videospeler van YouTube

Formulieren

Placeholder

Attribuut voor <input> Bijvoorbeeld placeholder=”zoek op trefwoord” . Laat alvast tekst in input zien, verdwijnt als je er zelf wat inzet en verschijnt weer als je het veld zelf leeg laat. Werkt nog in weinig browsers. Als je dit ook met javascript oplost, zorg dan dat ze elkaar niet bijten.

Autofocus

Boolean attribuut voor bijvoorbeeld <input>, <textarea> en <select>, de cursor wordt in dat veld neergezet om meteen daar met invullen te beginnen. Gebruik kan irritant zijn voor de bezoeker. Denk na over nut bij gebruik. Kan maar een keer per document worden gedefinieerd.

Required

Boolean attribuut voor invul-keuzevelden. Zou fijn zijn als alle browsers die ondersteunen, dan pas echt nuttig lijkt me.

Autocomplete

Attribuut voor invulvelden, je kunt het on en off zetten. Default staat op “on” bij browsers. Je kunt per veld autocomplete=”off” zetten. Handig voor velden met inloggegevens.

Datalist

Kijk, dat is nog eens handig. Aan een <input> element kun je een datalist linken. Deze geeft dan opties om te kiezen, maar je kunt nu ook zelf wat invullen. In het kader: kies uit de lijst of anders… De datalist linkt aan het id van het input element.

Input types

Het aantal types is uitgebreid met bijvoorbeeld:

  • type=”search” : is alleen van belang voor de styling (Safari maakt er een zoekveld van in Safari stijl)
  • voor contactgegevens: type=”email”, type=”url” en type=”tel” gedragen zich hetzelfde als text-inputs, maar geeft de browser meer informatie over welke data te verwachten. Mobile Safari laat een ander toetsenbord zien afhankelijk van de waarde van het type.
  • type=”range” : Fancy schuifbalkje om een hoeveelheid aan te geven. Bijvoorbeeld: <input id=”rating” name=”rating” type=”range” min=”1″ max=”5″> De gekozen waarde is niet te zien voor de invuller.
  • type=”number” : Kies een waarde, je kunt omhoog en omlaag klikken met de pijltjes rechts van het invulvak, maar je kunt ook meteen een waarde invullen.
  • voor datum-weergave : type=”date” is 2010-12-31, type=”datetime” is 2010-12-31T01:56:01+01, type=”datetime-local” is 2010-12-31T01:56:01, type=”time” is 01:56:01, type=”month” is 01:56. Er is geen type=”year”. Wel een type=”week” is 2010-52 (jaar plus weeknummer).
  • color-picker: type=”color” wordt nu nog (juli 2010) door geen browser ondersteund.
  • type=”pattern” voor bijvoorbeeld zipcodes. pattern=”[\d]{5}(-[\d]{4})” zucht.

De bedoeling is dat browsers op dit pad doorgaan en meer types ontwikkelen. Sommige browsers ondersteunen deze opties voor formulieren niet (helemaal). De weergave valt dat terug op type=”text” .

Check of de browser het kan, vervang zo nodig de functionaliteit door javascript als je het overal hetzelfde wilt en niet wilt dat een en ander elkaar bijt. In het boek staan voorbeelden van checkes in javascript.

Semantics (betekenis)

De commissie is erg gecharmeerd met de wijze waarop microformats werken en volgt de filosofie daarvan, maar wil geen grote uitbreiding van het HTML met de definitie van allerlei namespacing (namespacing in de Wikipedia).

Nieuwe elementen

  • <mark>, gemarkeerde tekst, binnen de context van belang. Zoals bij het geel maken van het zoekwoord binnen de pagina met zoekresultaten.
  • <time>, definitie van een datum of tijd inclusief een format, bijvoorbeeld: <time class=”dtstart” datetime=”1992-01-12″>January 12th, 1992</time> Vergelijkbaar met het microformat <abbr class=”dtstart” enz.
  • <meter> om metingen binnen een schaal aan te geven.
  • <progress> om de voorgang van een proces aan te geven, handig voor Ajax toepassingen (uploading 90%….)

Structuur

Er zijn een aantal elementen toegevoegd die de structuur definiëren. In plaatst dat alles div heet met classes die eigenlijk de functie beschrijven (zoals header, footer, nav e.d.). Weer gaat hier de layout los van de content. De HTML is puur content gericht. De layout is voor CSS.

  • <section> groepeert bij elkaar horende elementen.
  • <header> Dit is niet noodzakelijk alleen de grote header bovenin een pagina, maar wordt gebruikt in elke <section> om de kop/introductie te beschrijven.
  • <footer> bevat auteur, copyright, links naar gerelateerde content enz en is niet noodzakelijk alleen de onderkant van de webpagina.

Voorbeeld van zo’n structuur:

<section>
  <header>
    <h1>DOM Scripting</h1>
  </header>
  <p>The book is aimed at designers<br>
     rather than programmers.</p>
  <footer>
    <p>By Jeremy Keith</p>
  </footer>
</section>
  • <aside> bevat content die helemaal los staat van de inhoud en die je toch op de pagina wilt. Nieuwberichtjes bijvoorbeeld.
  • <nav> bevat de hoofdnavigatie, meestal een rij links. Een goede plek voor <nav> is binnen het element <header>.
  • <article> is een speciaal soort <section> voor blog posts, nieuws, forum posts e.d. Maar ook voor widgets. Gebruik het voor op zichzelf staande content/tekst, zoals je gebruikt in een RSS feed. Je kunt er <time> met het attribuut pubdate bij gebruiken. Je kunt meerdere <time> elementen en maar één pubdate per <article> gebruiken.
  • Het element <hgroup> defineert een header-groep, bijvoorbeeld een h1 en h2 na elkaar, buiten de content outline om. De logica hiervan ontgaat me enigzins.

Gebruik al deze elementen om aan de browser te vertellen wat voor soort inhoud deze bevatten.

Content Modellen

Met bovenstaande elementen valt een semantische (betekenis-volle) structuur te maken, de outline. In het boek staan voorbeelden hoe een rangschikken van de verschillende elementen de betekenis van de tekst kan definiëren en wijzigen.

  • text-level semantics: inline elementen
  • grouping content: block elementen zoals <p> <ul> <div>
  • forms
  • embedded content: afbeeldingen, audio, video
  • sectioning content: de nieuwe structuur-elementen zoals <header> en <nav>
  • sectioning roots: elementen die los staan van de outline. Hieronder vallen blockquote, fieldset en td

Opvallend is het toestaan van meerdere h1-titels, elke <section> kan een eigen h1-titel hebben. Ben benieuwd hoe dit binnen de webrichtlijnen opgelost gaat worden. Volgorde h1-h2-h3 blijft wel intact.

Voordeel van deze structuur is dat je modulair kunt werken. Elke <section> of <article> staat op zichzelf en kan makkelijk worden ingevoegd zonder de h1 in een h2 te veranderen in een pagina. Dat is handig. Nu een heel gedoe nog in WordPress, zie de hoop extra code in het TwentyTen theme hiervoor.

Scoped Styles

OMG, style binnenin de HTML-code.

Het nieuwe element <style> kan een attribuut scoped meekrijgen dat vertelt dat deze style alleen moet worden toegepast voor de betreffende sectioning content. Bijvoorbeeld:

<h1>My title</h1>
  <article>
    <style scoped>
       h1 {font-size: 75%}
    </style>
   <h1>Boterham met kaas</h1>
   <p>Mijn kat eet kaas op haar brood.</p>
<article>

Dit lijkt me in tegenspraak met de scheiding van content en presentatie. Waarom geen class hier of een algemene defenitie in het stylesheet:
article h1 {font-size: 75%}?

Scoped wordt nu nog door geen enkele browser ondersteund.

HTML5 toepassen

Je kunt HTML5 gewoon gaan gebruiken, wat ervan werkt ligt aan de browser, dus zorg altijd voor alternatieven. Definieer de nieuwe elementen zo nodig als display:block. Gebruik een javascript om Explorer ook hiervan te overtuigen. Je kunt nu al het doctype zonder problemen aanpassen, de rest volgt in de loop van de tijd.

Je kunt de nieuwe elementen gebruiken om een outline te maken, alhoewel browsers er nog geen betekenis aan kunnen geven.

Een voordeel van de nieuwe outline-structuur is dat het goed aansluit met de structuur van ARIA. Je kunt aan de nieuwe elementen een role (bijvoorbeeld role=”contentinfo” aan een footer) toekennen, die ARIA dan weer kan gebruiken.

Valideren kan via de site validator.nu van Henri Sivonen, of gewoon via validator.w3.org, want die gebruikt dezelfde site als het doctype van HTML5 wordt gedetecteerd.

Advertisements

Author: Rian Rietveld

WordPress Engineer focussing on accessibility

2 thoughts on “Aantekeningen bij HTML5 for web designers”

  1. Helemaal met je eens, een heerlijk leesbaar boek.
    En al lezend realiseerde ik me ook weer dat ik veel teveel van deze informatie altijd maar online lees maar dat het toch echt prettiger blijft op papier.

    Complimenten voor de samenvatting.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s