HTML Mastery

What you'll learn

• The Page SkeletonTags, the document, the head and how browsers read markup
• Text and LinksHeadings, inline meaning, lists and every kind of link
• Images and MediaAlt text, responsive images, figures, audio, video and embeds
• Semantic StructureLandmarks, articles, sections and a page outline that makes sense
• TablesData tables with captions, row groups, scoped headers and spans
• FormsLabels, input types, validation, choices and forms that fill themselves
• Accessibility and PolishARIA, meta tags, built-in widgets and the final landing page

Course outline

7 units and 35 lessons. Each lesson has a short read with examples you run, a quiz, and coding problems tested in your browser; most have a step-through visualizer.

1. 1

   Unit 1:The Page Skeleton

   Tags, the document, the head and how browsers read markup

   Free
   1. <>
      Your First Web Page What HTML is for, how a tag becomes an element, and how elements nest into a tree.
      2 problems
   2. <!>
      The Document Skeleton The doctype, the html element and its language, and the split between head and body.
      1 problem
   3. hd
      The Head: Title, Charset, Viewport The three lines every head needs, and what goes wrong on a phone without them.
      1 problem
   4. a=
      Attributes and Empty Elements Adding details to elements with attributes, boolean attributes, ids and classes, and elements with no closing tag.
      1 problem
   5. &;
      Whitespace, Entities and Comments How the browser treats spaces and line breaks, how to write < and & as text, comments, and the forgiving parser.
      1 problem
2. 2

   Unit 2:Text and Links

   Headings, inline meaning, lists and every kind of link

   Free
   1. h1
      Headings and Paragraphs Six heading levels, why their order matters more than their size, and when to break a line.
      1 problem
   2. em
      Emphasis and Inline Meaning strong versus b, em versus i, and the small elements that give words meaning: abbr, time, code, kbd, mark, q.
      1 problem
   3. ul
      Lists Unordered, ordered and description lists, nesting a list inside an item, and the attributes of ol.
      2 problems
   4. a
      Links and URLs The anchor element and every kind of address: absolute, relative, root-relative, fragments, mailto and tel.
      1 problem
   5. ↗
      New Tabs, Skip Links and a First Site target and rel, skip links, marking the current page, and a small club homepage that puts the first two units together.
      2 problems
3. 3

   Unit 3:Images and Media

   Alt text, responsive images, figures, audio, video and embeds

   Pro
   1. img
      Images and Alt Text The img element, reserving space with width and height, and writing alt text that does its job.
      1 problem
   2. w
      Responsive Images: srcset and sizes Offering several files so each screen downloads the right one, plus lazy loading.
      1 problem
   3. fig
      picture, figure and figcaption Art direction and image formats with picture and source, and captions with figure.
      1 problem
   4. av
      Audio and Video Built-in players, several formats, a poster frame, captions with track, and the rules for autoplay.
      1 problem
   5. []
      Embedded Content: iframe and SVG Embedding other pages safely with iframe, and drawing accessible inline SVG graphics.
      1 problem
4. 4

   Unit 4:Semantic Structure

   Landmarks, articles, sections and a page outline that makes sense

   Pro
   1. ▤
      Landmarks: header, nav, main, footer The four elements that divide a page into regions people can jump between.
      1 problem
   2. §
      article, section and aside Self-contained articles, thematic sections, and asides for content that sits to one side.
      1 problem
   3. div
      div, span and the Right Element What the meaningless containers are for, and why a clickable div is not a button.
      1 problem
   4. h2
      Headings as the Page Outline How headings and sections work together, the outline myth, and hgroup for subtitles.
      1 problem
   5. ✎
      Project: A Blog Post Page Putting the whole unit together: a complete, well-structured article page.
      1 problem
5. 5

   Unit 5:Tables

   Data tables with captions, row groups, scoped headers and spans

   Pro
   1. ▦
      Table Basics Rows, data cells and header cells: the building blocks of a data table.
      1 problem
   2. cap
      caption, thead, tbody and tfoot Naming a table with a caption and grouping its rows into head, body and foot.
      1 problem
   3. th
      Header Cells and scope Telling assistive technology which cells a header labels, with scope and with headers/id.
      1 problem
   4. ⊞
      colspan and rowspan Cells that stretch across several columns or rows, and how they change the rows around them.
      1 problem
   5. ?
      When (Not) to Use a Table Tables for data, CSS for layout, and a complete comparison table to finish the unit.
      1 problem
6. 6

   Unit 6:Forms

   Labels, input types, validation, choices and forms that fill themselves

   Pro
   1. form
      Forms, Inputs and Labels The form element, text inputs with names, and the labels that make every field usable.
      1 problem
   2. @
      Input Types and inputmode Choosing the right type for each field: better keyboards on phones, built-in checks, and date pickers.
      1 problem
   3. ✓
      Built-in Validation required, lengths, ranges and patterns: the checks browsers do for you, and their limits.
      1 problem
   4. ◉
      Choices: Radio, Checkbox and select Picking one or many: radio groups, checkboxes, drop-downs with option groups, and their values.
      1 problem
   5. ▭
      fieldset, Buttons and autocomplete Grouping fields with fieldset and legend, the three button types, and helping browsers fill forms in.
      1 problem
7. 7

   Unit 7:Accessibility and Polish

   ARIA, meta tags, built-in widgets and the final landing page

   Pro
   1. a11y
      Accessibility Basics Who accessibility is for, accessible names, language changes, keyboard order, and not relying on color.
      1 problem
   2. aria
      ARIA: Use It Sparingly What ARIA adds, the first rule of ARIA, and the handful of attributes worth knowing.
      1 problem
   3. og
      Search and Sharing: Meta Tags The head tags that shape search results and link previews: description, canonical, Open Graph and icons.
      1 problem
   4. ▸
      Built-in Widgets: details and dialog Disclosure widgets and accordions with details and summary, and the dialog element, with no script.
      2 problems
   5. boss
      Boss: An Accessible Landing Page The final project: a complete landing page and its sign-up form, using everything in the course.
      2 problems