HTML: Build Web Pages
Learn to write real web pages from nothing. Structure text, add links, images, tables and forms, make pages that work for everyone, and prepare them for search engines.
- Level
- Beginner
- Time
- About 22 hours
- Modules
- 5
- Lessons
- 16
- Exercises
- 48
HTML is the first thing every web developer learns, because every page on the web is built from it. This course begins from nothing: no installation and no experience needed. You write real pages in your browser from the very first lesson.
Each lesson explains why things work the way they do, not only what to type. Your work is checked against what the browser really builds, so you can tell that a page is correct and not merely that it looks right. By the end you will be able to write complete, accessible, well-structured pages by hand.
What you will learn
- Write a complete HTML document from memory
- Structure content with headings, lists, tables and semantic regions
- Build forms that collect and check data properly
- Make pages that work with a keyboard and a screen reader
- Prepare a page for search engines and social sharing
Skills you will gain
- Writing valid, readable HTML
- Semantic page structure
- Accessible forms and navigation
- Basic SEO and link previews
- Reading and repairing other people's markup
Before you start
- Being comfortable using a web browser and a keyboard
- No programming experience is needed
- A computer or phone with a modern browser
Where it is used
- Every website and web application
- HTML email and online documentation
- Content management systems such as WordPress
- Frameworks such as React and Next.js, which produce HTML
Modules
Module 1: Your first web pages
What HTML is, how a browser reads it, the frame every page shares, and how to structure text so that both people and machines can follow it.
- 1
What HTML is and how a browser reads it
HTML describes what each part of a page is. Learn what tags and elements are, how a browser turns your text into a page, and write your first one.
- 2
The skeleton of every page
Every proper HTML document has the same frame: a doctype, html, head and body. Learn what each part is for, and why the charset and viewport lines matter.
- 3
Headings, paragraphs and text
Structure writing with six levels of heading and paragraphs, mark words as important or emphasised, and write special characters safely with entities.
Module 2: Links, images, lists and tables
The elements that make a page more than plain text: connections to other pages, pictures with text alternatives, and structured lists and data.
- 1
Links and how pages connect
The link is what makes the web a web. Write absolute, relative and same-page links, open new tabs safely, and write link text that makes sense.
- 2
Images and why alt text matters
Add images with img, write alt text that replaces the picture, stop pages jumping with width and height, and pick the right file format.
- 3
Lists for steps, items and definitions
Group things with unordered, ordered and description lists, nest them correctly, and see why navigation menus are usually lists underneath.
- 4
Tables for data that has rows and columns
Build real data tables with headers, captions and merged cells, mark them up so a screen reader can follow them, and learn when not to use a table.
Module 3: Forms and user input
How websites collect information: building forms that are sent correctly, choosing the right control for each answer, and checking values before they are sent.
- 1
Forms: asking the user for information
Build a form that really sends data: inputs, labels, names, buttons, GET and POST, and why every field needs a label.
- 2
The right control for each question
Number boxes, dates, checkboxes, radio buttons, drop-downs and text areas: choose the control that suits the answer, and group related ones.
- 3
Checking answers before they are sent Intermediate
Use the browser's built-in checks: required, length and range limits, patterns, and why a check in the browser never replaces one on the server.
Module 4: Meaningful, accessible pages
Making pages that everybody and every machine can understand: semantic regions, accessibility practices, embedded media, and how pages appear in search and sharing.
- 1
Semantic HTML: elements that mean something
Replace a page of anonymous divs with header, nav, main, section, article, aside and footer, and see what each one gives you for free.
- 2
Accessibility: pages that work for everyone Intermediate
Who uses the web differently, the rules that help them most, skip links, focus, and how ARIA fits in, along with when to leave it out.
- 3
Audio, video and embedded pages Intermediate
Add video and audio with fallbacks and captions, embed another page with iframe, and keep embeds from harming your visitors.
- 4
The head: titles, search results and sharing Intermediate
How titles, descriptions, canonical links, Open Graph tags and icons decide how your page appears in search results and when it is shared.
Module 5: Modern HTML
Attributes that connect HTML to CSS and JavaScript, and interactive elements that browsers now provide for free, so you can write less code.
- 1
Global attributes and custom data Advanced
The attributes every element accepts: id, class, title, hidden, lang and data-*, plus how HTML, CSS and JavaScript connect through them.
- 2
Built-in interactive elements Advanced
Disclosure widgets, dialogs, progress bars and meters that HTML provides for free, and how to reuse structure with the template element.
Projects
- A personal profile page Write a single-page profile that introduces you, with your skills, projects and a way to contact you.
- A small restaurant website Build a three-page website for a neighbourhood restaurant: a home page, a menu and a booking page, linked together.
What to learn next
- CSS: Style and Lay Out Web Pages From your first rule to flexbox, grid, responsive design and animation, with every exercise checked against what the browser really computes.
- JavaScript: Programming for the Web From your first program to closures, async code and modules, with every variable and call visible, then real pages that respond, load data and remember it.