HTML Exercises for Beginners: 20 Solved Practices
Practice is the only real way to learn how to code. This collection of HTML exercises is designed so that, even if you're starting from scratch, you can write your first line of code today and progress step by step until you master the tags, forms, tables, and multimedia elements that form the foundation of any web page.
Each of the 20 exercises includes a clear explanation of the objective, example code, and a challenge for you to solve on your own. If you get stuck, the solved code is available in every case.
📋 The 20 HTML Exercises
| # | Exercise | What You'll Practice |
|---|---|---|
| 1 | Basic HTML Document | Minimum structure with !DOCTYPE, html, head, body + lang, meta charset, and comments |
| 2 | HTML Headings h1 to h6 | Title hierarchy with realistic example, bad practices, and heading SEO |
| 3 | Paragraphs and Links | <p>, <a>, internal links with #id, mailto:, tel:, target="_blank" security, <br>, <hr>, <pre> |
| 4 | Ordered and Unordered Lists | <ol>, <ul>, <li>, nested lists, type/start/reversed attributes, definition lists <dl> |
| 5 | Inserting Images | <img> with src/alt/width/height + <figure>/<figcaption>, loading="lazy", srcset/sizes, broken images |
| 6 | Creating HTML Tables | table, thead, tbody, tfoot, colspan, rowspan, CSS styling |
| 7 | Basic Form with input and label | form, input, label, method/action, HTML5 validation, fieldset/legend, input types |
| 8 | Form with Select and Radio Buttons | <select>, <optgroup>, radio buttons with checked/value, multiline <textarea> |
| 9 | Form with Checkboxes | Multiple checkboxes, checked, name[] arrays, <input type="hidden">, <input type="file"> |
| 10 | Links with Images | <a> + <img>, clickable gallery, title tooltip, secure target="_blank", WhatsApp link |
| 11 | Anchor Links | Internal navigation with #id, smooth CSS scroll, sticky menu, #top back-to-top, cross-page anchoring |
| 12 | Inserting Videos with iframe | YouTube with parameters (start, end, controls), Vimeo, local <video> with multiple sources, responsive shorts |
| 13 | Inserting Audio in HTML | Multiple sources (MP3/OGG/WAV), autoplay muted loop background audio, podcast with controlsList, audio from CDN |
| 14 | HTML Comments | Documenting sections, multi-line comments with TODO, isolation debugging, IE conditional comments (historical) |
| 15 | Download Links | download with custom name, image downloads, ZIP files, Word and TXT documents |
| 16 | div and span Tags | Cards with Flexbox, inline styling with <span>, full div-based layout, block vs inline vs inline-block comparison |
| 17 | Semantic Tags | Blog with <nav>/<main>/<aside>/<time>/<address>, portfolio with <figure>, divs vs semantic comparison, documentation with <section> |
| 18 | Absolute and Relative Links | Paths with ./, ../, /, realistic folder structure, <base href="">, implicit protocol // |
| 19 | Inserting Pages with iframe | Responsive iframe (aspect-ratio + padding-bottom), sandbox for security, loading="lazy", Google Maps embed |
| 20 | Form with Date and Number | date, time, datetime-local, month, week, range, color, HTML5 validation (required/pattern/min/max), fieldset/legend, datalist |
Why Practice HTML with Exercises?
HTML is the first language every web developer should learn. It's not a programming language — it's a markup language — but without it, no web page exists. Every site you visit, from Google to Instagram, is built on an HTML foundation.
Doing HTML exercises allows you to:
- Reinforce concepts much faster than just reading theory.
- Make mistakes and correct them in a controlled environment, which is exactly where you learn the most.
- Gain confidence to then move on to CSS, JavaScript, and more advanced frameworks.
- Build a portfolio of practices that showcase your progress.
You don't need to install anything: all exercises include a built-in online editor so you can write and run code directly from your browser.
Frequently Asked Questions About HTML Exercises
Do I need to know anything before starting these HTML exercises?
No. These exercises are designed for absolute beginners. The first exercise starts with the most basic structure of an HTML document, and each practice introduces one new concept progressively. All you need is a web browser and the desire to learn.
How long does it take to complete all 20 exercises?
It depends on your pace, but on average each exercise takes between 10 and 20 minutes. Spending an hour a day, you can complete the entire collection in less than a week. What matters isn't speed but understanding each concept before moving to the next one.
Are these HTML exercises enough to get a job?
These exercises cover the essential fundamentals of HTML, which are the mandatory first step. For a professional profile, you'll need to complement them with CSS, JavaScript, and eventually frameworks like React or Vue. But it all starts here: without a solid HTML foundation, you can't progress to anything else.
Can I do the exercises in any order?
They are numbered in increasing difficulty. It's recommended to follow them in order, especially if you're starting from scratch, because each exercise assumes you already understand the concepts from the previous ones. That said, if you already have some experience, you can jump directly to the topic that interests you most.
Do I need a special code editor for the HTML exercises?
No. Each exercise includes a built-in CodePen editor where you can write and see the result instantly. If you prefer to work locally, any text editor works (even Notepad), although VS Code is recommended for its web development support.
What should I do if I get stuck on an exercise?
All exercises include the solved code. The recommendation is to first try to solve it on your own for at least 15 minutes. If you can't figure it out after that time, review the solution, understand why it works that way, and try again without looking.
You've done the exercises and understand the basics. Now generate a complete web page with DivZone AI and analyze how all the tags you practiced come together in a real project. It's the best way to see HTML in action.
- History of HTML: History of HTML: Origin and Evolution (1989–Today)
- Basic Structure: Basic Structure of an HTML Document
- Fundamental Tags: Elements and Tags in HTML
- Semantic Tags: Semantic Tags in HTML5