HTML Foundations
This course starts at ground zero and builds up the skills needed to create real web pages. By the end, you will have a complete, semantic, accessible, metadata-equipped multi-page site ready for CSS Foundations.
What you will learn
Section titled “What you will learn”- How HTML files work and how browsers read them
- Elements, tags, attributes, and nesting
- Document structure and semantic HTML
- Links, images, lists, tables, and forms
- Media embedding and page architecture
- HTML document metadata and SEO foundations
- Accessibility fundamentals
The Summit Trail Outfitters project
Section titled “The Summit Trail Outfitters project”All lessons in this course build toward a complete multi-page site — Summit Trail Outfitters, a fictional outdoor tour company. You can browse the reference source on GitHub or view the live reference site.
Modules
Section titled “Modules”01 — Getting Started
Section titled “01 — Getting Started”02 — Elements & Attributes
Section titled “02 — Elements & Attributes”- Elements vs Tags
- Nesting & Indentation
- Headings & Paragraphs
- Links: The <a> Element
- Images: The <img> Element
- Inline Elements: <strong> and <em>
- Attributes Explained: id, class, and title
03 — Page Structure & Semantics
Section titled “03 — Page Structure & Semantics”- What is Semantic HTML?
- <div> vs Semantic Elements
- Page Layout Structure: <header>, <main>, <footer>
- Sections & Articles: <section>, <article>, <aside>
- Navigation: The <nav> Element
- Refactoring a Page to Semantic HTML
04 — Lists & Content Grouping
Section titled “04 — Lists & Content Grouping”- Unordered Lists: <ul> and <li>
- Ordered Lists: <ol>
- Nested Lists
- Description Lists: <dl>, <dt>, <dd>
- Using Lists for Navigation and Grouping
05 — Tables & Structured Data
Section titled “05 — Tables & Structured Data”- Introduction to Tables: <table>, <tr>, <td>, <th>
- Table Sections: <thead>, <tbody>, <tfoot>
- Table Accessibility Basics — The scope Attribute
- When to Use Tables (and When Not To)
- Real-World Structured Data Examples
06 — Forms & User Input
Section titled “06 — Forms & User Input”- Introduction to Forms: <form> and Basic Inputs
- Labels & Form Accessibility: <label>, for, and id
- Textareas, Select & Buttons
- Checkboxes & Radio Buttons
- Grouping Form Controls — <fieldset> and <legend>
- Form Attributes & Basic Validation
07 — Media & Embedding
Section titled “07 — Media & Embedding”- Audio & Video: <audio>, <video>, and <source>
- Embedding External Content: <iframe>
- Media Accessibility & Best Practices
- Real-World Media Examples
08 — Page Architecture & Content Modeling
Section titled “08 — Page Architecture & Content Modeling”- Content Modeling: Planning the Homepage
- Building the Homepage Semantic Structure
- Structuring a Tours Page
- Structuring a Blog Index Page
- Structuring a Blog Article Page
- Capstone: Multi-Page Semantic Site Completion
09 — HTML Document Metadata & SEO Foundations
Section titled “09 — HTML Document Metadata & SEO Foundations”- Understanding the <head> Element — charset, viewport, lang, and title
- Page Titles & Meta Descriptions: SEO Basics
- Favicons & Intro to Social Metadata
- Capstone: Professionalizing the Site