How I studied HTML with pen and paper

Last summer I made a commitment to read through the MDN documentation for each HTML element and gather notes. Even with seven years experience as a web developer I knew there were elements in this list I’d never used. I also figured I could do well to read about elements I felt like I knew well.

In total, I read 132 pages of documentation¹. Here’s how I approached it, and some of the lessons I learned in the end.

How I organized the thing

I like a good checklist, and I love a good notebook.

To start, I set up a new project in Todoist. I made a task for each page of documentation in my reading list and made it link straight to the page in question on MDN. Then I set up a recurring reminder to read one page every day.

I chose a Midori MD A5 dot grid notebook to gather my notes. I wanted a notebook where I could give each element its own page and still have room for an index and a few different spreads. In total I ended up using 170 pages.

The notebook pages weren’t numbered, so I spent a while setting it up with page numbers and headings, and made an index.

You could of course take digital notes, but from what I’ve heard your brain retains more information when you take notes by hand. You also get the satisfaction from having made a physical object at the end of it. You can place your HTML book next to those text books from college you’ve not gotten rid of because they were so hecking expensive.

How I did the thing

With the preparations out of the way, at this point it’s all about routine.

Reading and taking notes for the day took me somewhere between 5 to 20 minutes depending on the content². There’s not as much to say about <var> as there is about <ruby> , <rt> and <rp>.

Starting off I wrote down a list of all attributes for the element, but stopped fairly quickly. The goal is to write down key points, not to replace MDN.

I started July 31st 2021 and finished February 13th 2022, so I spent a bit over six months doing this.

What I learned from the thing

I learned a bunch! Too much to list all of it, but here’s a selection of notes:

• The address element exists (use it for contact information)
• HTML has an element called ruby, and it has nothing to do with the programming language
• There’s an attribute inputmode there to give software keyboards a hint about which type of keyboard they should show by default. No more type="tel" just to get a number pad!
• There’s an input type=“image” that has nothing to do with the input of images
• The global accesskey attribute lets you provide keyboard shortcuts to elements without JavaScript

Finally, it was nice to confirm that planning, preparation and routine pays off. This way of handling a large body of material has worked really well for me.