HTML Complete Course

Build semantic, accessible web pages from your first file to native dialogs, safe embeds and fast loading.

  • Beginner
  • 25 lessons
  • 10 hours

Start the course

HTML is the foundation of every web page. Get it right and pages are faster, easier to style, easier to find in search and usable by everyone, including people who rely on screen readers or keyboards. This course teaches HTML as defined by the current HTML Living Standard, from your first file to features that many developers still rebuild with JavaScript.

The early lessons cover the essentials: document structure, text, links, images, tables and forms. Later lessons move on to captions, complex tables, autofill, native dialogs and popovers, sandboxed embeds, sharing metadata and loading performance. Every lesson has small, complete examples you can open in a browser.

Keep DevTools open while you work. Inspecting the DOM the browser actually built is the fastest way to understand what your HTML does.

Curriculum

  1. 1 Getting started

    What HTML is, your first page, the grammar of elements and attributes, and the document skeleton.

    1. What is HTML? How web pages are built 6 min
    2. Your first HTML page 6 min
    3. HTML elements, tags and attributes 6 min
    4. HTML document structure: doctype, html, head and body 6 min
    5. The head element: title, charset, meta and viewport 6 min

  2. 2 Text, links and images

    Headings, text-level semantics, lists, links and images with good alt text.

    1. Headings and paragraphs 6 min
    2. Text-level semantics: strong, em, code, mark and more 5 min
    3. Lists: ordered, unordered and description lists 6 min
    4. Links: absolute and relative URLs, fragments and new tabs 6 min
    5. Images: src, alt text, width and height 6 min

  3. 3 Page structure, tables and forms

    Semantic layout and landmarks, data tables, and labelled forms with validation.

    1. Semantic layout: header, nav, main, article, section, aside and footer 6 min
    2. HTML tables for tabular data 6 min
    3. Forms: form, input, label and button 6 min
    4. Input types and built-in validation 6 min

  4. 4 Media, complex tables and better forms

    Image formats and loading, captioned media, complex tables, every form control and autofill.

    1. Image loading: formats, lazy loading and fetchpriority 6 min
    2. Audio and video with captions 6 min
    3. Complex tables: caption, scope and spanning cells 7 min
    4. Form controls in depth: select, textarea, checkboxes, radios and fieldset 6 min
    5. Better forms with autocomplete, inputmode and enterkeyhint 6 min

  5. 5 Interactive and embedded content

    Native disclosures, dialogs and popovers, and embedding third-party content safely.

    1. Native interactive elements: details, summary and dialog 7 min
    2. The popover attribute 6 min
    3. Embedding content safely: iframe, sandbox and allow 6 min

  6. 6 Advanced HTML

    Metadata for search and sharing, reusable templates and slots, and loading performance.

    1. Metadata for sharing and search: canonical, Open Graph and icons 7 min
    2. Reusable markup with template and slot 7 min
    3. Loading performance in HTML: preload, preconnect, async and defer 7 min

Test yourself: HTML Complete Course: final quiz

10 questions. Pass mark 70%.

  1. Question 1 of 10 What happens if a page has no doctype?
  2. Question 2 of 10 Which of these are void elements, written without a closing tag?

    Select all that apply.

  3. Question 3 of 10 A page has an h2 section called “Method” and you need a sub-heading inside it that should look small. What should you use?
  4. Question 4 of 10 Which alt attribute is correct for a purely decorative flourish image?
  5. Question 5 of 10 Which link correctly opens a page in a new tab and tells people it will?
    HTML
    <a href="/terms.pdf" target="_blank" rel="noopener">Terms (PDF, opens in a new tab)</a>
  6. Question 6 of 10 A form has this field. What does the server receive for it when the form is submitted?
    HTML
    <label for="email">Email</label>
<input id="email" type="email">
  7. Question 7 of 10 Which input is the best choice for a UK phone number?
  8. Question 8 of 10 Which statements about this table header cell are true?
    HTML
    <th scope="colgroup" colspan="2">Saturday</th>

    Select all that apply.

  9. Question 9 of 10 How should you open a modal confirmation dialog so that the rest of the page becomes inert and Escape closes it?
  10. Question 10 of 10 You have two scripts. app.js depends on menu.js and both work with the page’s elements. How should you load them?