HTML5 cookbook

8 recipes · 50 steps · about 35 minutes of reading

Swap div soup for semantic landmarks
My whole page is just one div after another.
BeginnerRead 4 minDoing: under an hour6 steps
Your FAQ still loads a JavaScript accordion the details element replaces
Every FAQ example I find pulls in a whole JavaScript library just to show and hide a paragraph.
BeginnerRead 4 minDoing: 20 to 30 minutes for four questions, a few minutes more for each one after that6 steps
A screen reader turns your data table into noise
I built a nice looking table but when I test it with a screen reader the numbers make no sense at all.
Beginner to intermediateRead 4 minDoing: 30 to 40 minutes for a table with a handful of columns and rows, a little longer for a bigger one6 steps
Your page has no Open Graph tags, so shared links show a bare URL
I paste our homepage link into Slack and it shows up as a plain gray link with no picture or headline.
Beginner to intermediateRead 4 minDoing: about an hour6 steps
Sandbox an iframe you do not trust
We need to embed a partner's widget on our site but I don't want their code to have full run of our page.
IntermediateRead 5 minDoing: 45 minutes to an hour for one widget, including the browser checks at the end.6 steps
Block bad signup input using native HTML5 form validation
Every signup form I build lets people submit a blank email field and I don't want to write a bunch of JavaScript just to stop that.
IntermediateRead 4 minDoing: 20 to 30 minutes for a two-field form, a little longer if you're wiring up more fields the same way6 steps
Serve the right size image to every screen with srcset
Our hero image loads fine on desktop but it's the same huge file on a phone that barely has room to display it.
IntermediateRead 5 minDoing: 30 to 45 minutes for one hero image, more if your site has several6 steps
Mark up a recipe page with schema.org microdata for rich results
Our recipe pages show up in search as a plain blue link while competitors get a photo, a star rating and a cook time.
Intermediate to advancedRead 5 minDoing: a couple of hours8 steps

Cookbook badge

Finish all 8 recipes to earn this.

In these roadmaps

Full Stack Developerstep 1 of 15

HTML5 cookbook

Swap div soup for semantic landmarks

Your FAQ still loads a JavaScript accordion the details element replaces

A screen reader turns your data table into noise

Your page has no Open Graph tags, so shared links show a bare URL

Sandbox an iframe you do not trust

Block bad signup input using native HTML5 form validation

Serve the right size image to every screen with srcset

Mark up a recipe page with schema.org microdata for rich results

In these roadmaps

HTML5 cookbook

Swap div soup for semantic landmarks

Your FAQ still loads a JavaScript accordion the details element replaces

A screen reader turns your data table into noise

Your page has no Open Graph tags, so shared links show a bare URL

Sandbox an iframe you do not trust

Block bad signup input using native HTML5 form validation

Serve the right size image to every screen with srcset

Mark up a recipe page with schema.org microdata for rich results

In these roadmaps