Skip to content
WebDev Path
Back

Week 2: Semantic HTML and accessibility

Next video

Free lesson by Kevin Powell on YouTube

About this lesson

Module:
Foundations
Time:
about 10 hours
Video:
10 min

Write HTML that browsers, search engines and screen readers all understand.

By the end of this week you can

  • Choose the right element for headings, lists, links, images and tables
  • Build an accessible form with labels and validation attributes
  • Use landmarks: header, nav, main, footer

Learn

  • Document structure and the head (title, meta description)
  • Semantic elements vs div soup
  • Forms: input types, labels, required, pattern
  • Accessibility basics: alt text, heading order, keyboard focus

Read or watch

Practice

  1. Rebuild a news article page with semantic tags
  2. Build a sign-up form that works with only a keyboard

Build

Add a contact page with a form to your site.

Check your understanding

Score 4 out of 5 to complete this week.

  1. 1. Which element should wrap the main navigation links of a site?
  2. 2. Why does every image need an alt attribute?
  3. 3. How many <h1> elements should a typical page have?
  4. 4. What is the best way to label a text input?
  5. 5. Which element is right for a button that submits a form?
0 of 5 answered