HTML Essentials
the building blocks of every web page.
Before you start
Each topic teaches one HTML idea with a small snippet you can copy into your own file and open in a browser to see it render. Then try the exercises at the bottom of the page.
- Where to write code: any plain text editor (VS Code is recommended), or an online
playground such as CodePen. Save your work as
index.htmland open it in a browser. - See the result: open the file in a browser, and press F12 to open DevTools and inspect the elements you wrote.
- Work the exercises: each one gives you preparation, a starter, and progressive hints - try the hint before opening the solution.
Choose a topic
-
1. Document structure
The skeleton of every page: doctype, head, title, and body.
-
2. Headings & text
Headings, paragraphs, and emphasis with strong and em.
-
3. Links
Connecting pages with the anchor element.
-
4. Images
Adding images and writing useful alt text.
-
5. Lists
Ordered and unordered lists, including nesting.
-
6. Tables
Rows and columns of data with headers and captions.
-
7. Forms
Inputs, labels, buttons, selects, and textareas.
-
8. Semantic layout
header, nav, main, section, article, and footer.
-
9. Containers
div and span for grouping content.
-
10. Comments, attributes & entities
Notes in your code, attributes, and special characters.