Learn HTML by writing it. Work through the lessons in order and you'll have solid HTML fundamentals — from document structure to forms and semantic markup.
Before you start
If you want to practice the exercises in this course on your computer, install VS Code and create a file with a .html extension (for example index.html), then open it in your browser to see your work.
Document Structure
Learn the skeleton every HTML page needs — DOCTYPE, html, head, body, meta tags, and title. These five elements are the foundation of every web page.
Tags, Attributes & Syntax
Understand how HTML is written — opening and closing tags, void elements, attributes, HTML entities, comments, and how the browser handles whitespace.
Text Content Tags
Mark up text with the right HTML elements — headings h1–h6, paragraphs, line breaks, bold, italic, highlight, links, subscript, and superscript.
Grouping & Semantic Layout
Structure a page with meaning using div, span, header, footer, nav, main, section, article, and aside. Semantic elements improve accessibility and SEO.
Attributes — id, class, data-*, style
Control how elements are targeted by CSS and JavaScript with id and class. Store custom data with data-* attributes and apply quick styles inline.
Lists
Create ordered, unordered, and definition lists in HTML. Lists are used for navigation menus, content, and any sequence of related items.
Tables
Display tabular data in HTML using table, thead, tbody, th, td, colspan, and rowspan. Always add a caption for accessibility.
Embedding Media
Embed images, audio, video, and iframes in HTML. Learn which attributes prevent layout shift, improve accessibility, and control how media loads.
Forms
Build interactive HTML forms — inputs, labels, selects, textareas, file uploads, and HTML5 built-in validation. No JavaScript needed for basic constraints.
Semantic Inline & Quote Tags
Use semantic HTML elements that carry meaning beyond styling — del, ins, s, abbr, cite, dfn, address, blockquote, and q.
Connecting CSS & JavaScript
Link styles and scripts to your HTML page — inline CSS, internal style blocks, external stylesheets, and script tags with defer and async explained.