Codae

HTML: Structuring Websites

Learn how to structure content semantically so that browsers and assistive technologies understand your website.

10 chapters · 80 lessonsBeginner friendlyFreeRuns in the browser

Start this courseAll courses

What you will learn

Course content

  1. Chapter 1 Website and Document

    Understand the structure of a page

    1. Browser, files and preview
    2. Document skeleton
    3. Elements and attributes
    4. Headings and paragraphs
    5. Fix nesting
    6. First content page
    7. HTML syntax check
    8. HTML challenge: Structure

  2. Chapter 2 Connecting content

    Add navigation and media

    1. Internal and external links
    2. Relative file paths
    3. Lists
    4. Images and alt text
    5. Meaningful link text
    6. Small gallery with navigation
    7. Path debugging
    8. HTML challenge: Navigation

  3. Chapter 3 Semantic page structure

    Express the meaning of sections

    1. header, main and footer
    2. Navigation with nav
    3. section and article
    4. Meaningful heading hierarchy
    5. Choosing button vs link
    6. Structure product page semantically
    7. Semantics check
    8. HTML challenge: Semantics

  4. Chapter 4 Forms

    Build usable inputs

    1. Label and text field
    2. Appropriate input types
    3. Selection fields
    4. Required fields and native validation
    5. Groups and help text
    6. Contact form as local demo
    7. Form debugging
    8. HTML challenge: Forms

  5. Chapter 5 Metadata and other content

    Create complete documents

    1. Page title and description
    2. Language and viewport
    3. Data tables with headings
    4. Audio/video with accessible alternative
    5. Examine faulty page structure
    6. Complete information page
    7. Meta check
    8. HTML challenge: Metadata

  6. Chapter 6 Multi-page project

    Apply learned structure independently

    1. Plan pages and content
    2. Build home page
    3. Build detail page
    4. Add contact/info page
    5. Check links and keyboard navigation
    6. Complete project
    7. Project review
    8. HTML final challenge

  7. Chapter 7 Accessibility (A11y) Basics

    Make websites accessible to everyone

    1. Understanding ARIA roles
    2. Contrast and readability
    3. Keyboard navigation
    4. Screen reader optimization
    5. Lang attribute and language changes
    6. Accessible form design
    7. A11y audit
    8. HTML challenge: Accessibility

  8. Chapter 8 SEO basics for HTML

    Optimize content for search engines

    1. Title tags and meta descriptions
    2. Canonical tags
    3. Structured data (JSON-LD)
    4. Open Graph tags
    5. Sitemap structure
    6. Optimize SEO landing page
    7. SEO debugging
    8. HTML challenge: SEO

  9. Chapter 9 Performance and assets

    Improve load times via correct HTML

    1. Image formats and srcset
    2. Lazy loading
    3. Including scripts and styles
    4. Preload and prefetch
    5. SVG embedding
    6. Performance dashboard page
    7. Load time analysis
    8. HTML challenge: Performance

  10. Chapter 10 Advanced HTML concepts

    Use special HTML features

    1. Web components (basics)
    2. Dialog element
    3. Details and summary
    4. Iframe security
    5. HTML templates
    6. Interactive app structure
    7. Feature detection
    8. HTML master challenge

How each lesson works

No hour-long videos. Each lesson is a short loop you complete yourself, until the idea sits.

  1. Read

    A short explanation and one clear task. Just enough to get going.

  2. Write

    You type the code yourself, in a real editor right in the browser.

  3. Run

    Run it and see what your program actually does, straight away.

  4. Check

    Check tells you whether the task is solved, and what is missing if not.

Good to know

More courses