Hvordan jeg lærte meg HTML bedre med penn og papir

22.02.2022William Killerudskrivesaker, HTML

HTML er en av de tingene du etter noen år som webutvikler kanskje tenker du kan godt nok. I skrivende stund har jeg jobbet med web i over syv år. Likevel er det mange deler av HTML jeg aldri har vært borti. Jeg bestemte meg sommeren 2021 for å gå systematisk til verks og lese referansematerialet for HTML-elementer på MDN, og samle notater i en dedikert notatbok. Målet var å bli bevisst på elementer jeg ikke kjente til, og detaljer om elementer jeg trodde jeg kjente godt.

Totalt ble det 132 sider med dokumentasjon å lese1. Dette er referansedokumentasjon - ikke akkurat noe jeg finner fram for å kose meg med før leggetid2.

Som kjent spiser man en elefant en bit av gangen.

Hvordan jeg organiserte selvstudiet

For å gjøre det enklere å gjennomføre brukte jeg tid på å sette i stand både en sjekkliste og en notatbok.

Jeg satte opp et eget prosjekt i Todoist som jeg kalte Dypdykk i HTML. Der laget jeg en oppgave for hver side dokumentasjon jeg skulle lese, med en lenke rett til siden på MDN. Så satte jeg opp en gjentagende påminnelse som minnet meg på å lese dagens side.

For å samle notatene mine valgte jeg å bruke en Midori MD-notatbok i A5-størrelse med dot grid. Jeg ville ha en notatbok som hadde sider nok til å kunne gi en hel side per element, pluss en indeks og noen forsider per kategori. Totalt brukte jeg 170 sider. Jeg brukte noen highlighters for å streke under overskrifter og gi litt farger, men ellers holdt jeg det ganske enkelt og noterte med litt forskjellige skriveredskaper som lager en svart strek.

Et bilde av indeksen fra notatboka

Fra venstre: Sakura Pigma Micron 05, Pilot Hi-Tec-C (aka G-Tec-C4) 0.4 mm, The Pen Addict + Mintlodica Retro 51 Pastel Shiba med Schmidt P8127 refill, Platinum Preppy med Fine-splitt og Platinum Carbon Ink, TWSBI ECO med Extra Fine-splitt og Pilot Iroshizuku Take-sumi, og Tombow Fudenosuke Brush Pen Hard Tip til overskrifter.

Jeg brukte tid før jeg satte i gang på å nummerere sidene i notatboka (noen notatbøker er ferdig nummererte), skrive overskrifter på hver side, og lage en indeks. Det tok en stund, men var såpass mekanisk at jeg kunne høre på en podcast eller se på en Twitch-stream underveis.

Du kan så klart notere digitalt, men fra hva jeg har lest får man betydelig bedre læring av å skrive for hånd. Hvis du skriver i en notatbok har du også produsert en fysisk ting når du er ferdig. Du kan sette din HTML-bok i hylla sammen med de bøkene fra studiene du enda ikke har kvittet deg med fordi det gjør vondt å kaste noe som kostet så fryktelig mye.

Gjennomføringen

Med forberedelsene unnagjort handler det mest om rutine.

Sett av 20 minutter. Å lese en nettside og skrive notater tok meg nok mellom 5 og 20 minutter, avhengig av innholdet3. Det er ikke like mye å si om <var> som det er å si om <ruby> , <rt> og <rp> – det er helt i orden.

Jeg skrev lenge opp alle attributter for et element. Dropp det. Notatene du skriver skal ikke erstatte MDN. Det viktigste er å få skrevet ned hva du lærte av det du leste.

Et bilde av to sider fra notatboka tidlig i prosjektet, med en del tekst og en liste med attributter
Gikk høyt ut i starten

Et bilde av to sider fra notatboka senere i prosjektet, med betydelig mindre tekst og ingen attributt-liste
Ble mer fokusert etter hvert

Det er også helt i orden å hoppe over en dag. Life happens. Noen dager føler du sikkert for å ta unna flere elementer også. Ikke overdriv. Du kommer ikke raskere i mål om du blir så drittlei etter et skippertak at du sletter hele Todoist-prosjektet og slenger notatboka i søpla.

Jeg brukte fra 31. juli 2021 til 13. februar 2022, så litt over et halvår. Du må gjerne sikte deg inn på det samme, men det viktigste er å komme i mål.

Hva jeg lærte

Så, hva lærte jeg egentlig etter alt dette?

  • At address-elementet er en ting (brukes til kontaktinformasjon)
  • At HTML har et ruby-element, og at det ikke har noe å gjøre med programmeringsspråket
  • Det finnes et attributt inputmode for å gi software-tastatur hint om hvilket tastatur de skal vise, uavhengig av input-type. Ingen flere type="tel" bare for å få numpad!
  • Det finnes en input-type image som ikke har noe med input av bilder å gjøre
  • Det globale accesskey-attributtet lar deg sette tastatursnarveier til elementer, uten JavaScript

En annen viktig lærdom som ikke har noe med HTML å gjøre er den om elefanten. Det tok tid, men med riktig forberedelser og rutine kom jeg meg igjennom en bit av gangen.

Det sagt, webben er diger. Det er så mye man kan lære seg av JavaScript-APIer, HTML-elementer, attributter, CSS, og SVG at man fint kunne viet et helt studie til det og ikke kommet seg igjennom. Jeg er på ingen måte ferdig med læringen, men har funnet en metode som funker bra for meg.


  1. Jeg hoppet over seksjonen markert obsolete and deprecated, og bestemte meg for at hver type av <input> fortjente å bli sett på som ulike element.
  2. Men det er meg – om det høres perfekt ut for deg så kjør på!
  3. Her skulle jeg fulgt bedre med på tidsbruken og brukt Toggl, men det gjorde jeg ikke. Tidsestimatet er litt basert på magefølelse, så ta det med en passende klype salt.