HTML for Beginners
Complete Course Syllabus
8 24 40+ 1
Weeks Topics Exercises Final Project
This syllabus is designed for absolute beginners — no prior knowledge required. Each week combines theory with hands-on
exercises so you learn by doing. By the end of the 8 weeks, you will build a complete personal portfolio website from scratch.
COURSE OVERVIEW
Week Module Topics
Week 1 Introduction to HTML & web basics Tags, structure, your first page
Week 2 Text & headings h1–h6, paragraphs, emphasis, special chars
Week 3 Links & images Anchor tags, img tag, relative/absolute paths
Week 4 Lists ul, ol, nested lists, description lists
Week 5 Tables Table structure, thead/tbody, colspan/rowspan
Week 6 Forms Inputs, radio, checkboxes, select, textarea
Week 7 Semantic HTML header, nav, main, footer, article, section
Week 8 Final project & best practices Meta tags, validation, portfolio project
HTML for Beginners — Complete Syllabus Page 1
Lesso
Week 1 Introduction to HTML & Web Basics n 1–2
TOPICS COVERED
• What is HTML? How websites work (browser → server)
• HTML document structure: DOCTYPE, html, head, body
• Tags, elements, and attributes explained
• Creating your first HTML file and opening in browser
• Comments in HTML
CODE EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first page</title>
</head>
<body>
<!-- This is a comment -->
<h1>Hello World!</h1>
</body>
</html>
EXERCISES
Exercise 1 — Your first page Exercise 2 — Explore the structure
Create an HTML file. Add a title tag with your Move the <title> tag inside <body>. What changes
name and an h1 heading that says 'Welcome to in the browser tab? Move it back and explain what
my page'. happened.
HTML for Beginners — Complete Syllabus Page 2
Lesso
Week 2 Text & Headings n 3–4
TOPICS COVERED
• Heading tags: h1 to h6 — hierarchy and importance
• Paragraph tag <p> and line breaks <br>
• Bold <strong> and italic <em> for emphasis
• Horizontal rule <hr>
• Special characters: & < > ©
CODE EXAMPLE
<h1>Main title (biggest)</h1>
<h2>Section title</h2>
<h3>Sub-section</h3>
<p>This is a <strong>bold word</strong> and an <em>italic word</em>.</p>
<p>Copyright © 2024</p>
<hr>
EXERCISES
Exercise 3 — News article Exercise 4 — Heading hierarchy
Create a page with an h1 for headline, h2 for Make a page with h1 to h4. Look at the size
sub-heading, and 2 paragraphs. Bold one difference. Use hr tags to separate each section.
important phrase in each.
HTML for Beginners — Complete Syllabus Page 3
Lesso
Week 3 Links & Images n 5–6
TOPICS COVERED
• Anchor tag <a> — href, target attributes
• Absolute vs relative links
• Image tag <img> — src, alt, width, height attributes
• Linking to another HTML page you created
• Opening links in new tab with target="_blank"
CODE EXAMPLE
<!-- Link to external site -->
<a href="[Link] target="_blank">Visit Google</a>
<!-- Link to another page in your project -->
<a href="[Link]">About me</a>
<!-- Image with alt text -->
<img src="[Link]" alt="A cute cat" width="300">
EXERCISES
Exercise 5 — Navigation links Exercise 6 — Image gallery
Create 2 HTML files: [Link] and [Link]. Add 3 images to a page. Set a different width for
Add links on each page to navigate to the other. each. Add meaningful alt text to all of them.
HTML for Beginners — Complete Syllabus Page 4
Lesso
Week 4 Lists n 7–8
TOPICS COVERED
• Unordered lists <ul> with <li> items (bullets)
• Ordered lists <ol> (numbered)
• Nested lists — lists inside lists
• Description lists <dl>, <dt>, <dd>
CODE EXAMPLE
<!-- Unordered list -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Ordered list with nested -->
<ol>
<li>Open editor</li>
<li>Write code
<ul><li>Add tags</li><li>Add content</li></ul>
</li>
<li>Save and open in browser</li>
</ol>
EXERCISES
Exercise 7 — Recipe list Exercise 8 — Glossary
Write a recipe page. Use an ordered list for steps Use a description list to explain 5 HTML terms:
and an unordered list for ingredients. Add a tag, element, attribute, DOCTYPE, and browser.
nested list for sub-steps.
HTML for Beginners — Complete Syllabus Page 5
Lesso
Week 5 Tables n
9–10
TOPICS COVERED
• <table>, <tr>, <td>, <th> — basic table structure
• Table head <thead>, body <tbody>, footer <tfoot>
• Merging cells with colspan and rowspan
• When to use tables (data, not layout)
CODE EXAMPLE
<table border="1">
<thead>
<tr><th>Name</th><th>Age</th><th>City</th></tr>
</thead>
<tbody>
<tr><td>Ravi</td><td>25</td><td>Surat</td></tr>
<tr>
<td colspan="2">Priya (merged)</td>
<td>Ahmedabad</td>
</tr>
</tbody>
</table>
EXERCISES
Exercise 9 — Class timetable Exercise 10 — Merge cells
Create a weekly class schedule table with days as Make a 4x4 table. Merge 2 cells in a row using
columns and time slots as rows. Use <th> for colspan. Merge 2 rows in a column using
headers. rowspan.
HTML for Beginners — Complete Syllabus Page 6
Lesso
Week 6 Forms n
11–12
TOPICS COVERED
• <form> tag — action and method attributes
• Text input, password, email, number input types
• Radio buttons, checkboxes, dropdowns <select>
• Textarea for multi-line text
• Submit button and labels <label>
CODE EXAMPLE
<form action="/submit" method="post">
<label for="name">Your name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<select name="city">
<option>Surat</option>
<option>Mumbai</option>
</select>
<button type="submit">Submit</button>
</form>
EXERCISES
Exercise 11 — Registration form Exercise 12 — Feedback form
Build a student registration form with: name, Create a feedback form with a 5-star rating, a
email, age, gender (radio), course (dropdown), textarea for comments, and a newsletter
and a submit button. checkbox.
HTML for Beginners — Complete Syllabus Page 7
Lesso
Week 7 Semantic HTML & Page Structure n
13–14
TOPICS COVERED
• What is semantic HTML and why it matters
• <header>, <nav>, <main>, <footer> layout tags
• <article>, <section>, <aside> for content regions
• <div> and <span> — generic containers
• Accessibility benefits of semantic tags
CODE EXAMPLE
<body>
<header>
<h1>My Blog</h1>
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
</nav>
</header>
<main>
<article>
<h2>Blog post title</h2>
<p>Post content here...</p>
</article>
<aside><p>Related links...</p></aside>
</main>
<footer><p>© 2024 My Blog</p></footer>
</body>
EXERCISES
Exercise 13 — Blog page Exercise 14 — div vs semantic
Build a full blog layout using semantic tags: Rewrite the blog using only <div> tags. Compare
header with nav, main with an article, sidebar both versions and write a note on which is better
aside, and footer. and why.
HTML for Beginners — Complete Syllabus Page 8
Lesso
Week 8 Final Project & Best Practices n
15–16
TOPICS COVERED
• Meta tags for SEO: description, keywords, viewport
• Favicon and page icon
• HTML validation using W3C validator
• Indentation and clean code habits
• What comes next: CSS for styling, JavaScript for interaction
CODE EXAMPLE
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="My HTML portfolio">
<link rel="icon" href="[Link]">
<title>My Portfolio</title>
</head>
EXERCISES
Exercise 15 — Add meta tags Exercise 16 — Validate your code
Add proper meta tags to all your previous Go to [Link] and check all your HTML
exercises: charset, viewport, and a description for files. Fix every error and warning shown by the
each page. validator.
FINAL PROJECT
Build a personal portfolio website
Create a 3-page website using everything learned. Pages: Home (about you), Projects (table of your work),
Contact (form). Must include: semantic tags, navigation between pages, at least 1 image, 1 table, 1 form,
ordered and unordered lists, and proper meta tags. Validate all pages on W3C validator before submission.
BEST PRACTICES CHECKLIST
■ Always include DOCTYPE declaration at the top of every HTML file
■ Always add alt text to every image for accessibility
■ Use lowercase for all HTML tags and attributes
■ Close every tag that has a closing tag — never leave tags open
■ Indent child elements by 2 spaces for readable code
■ Use semantic tags instead of only divs wherever possible
HTML for Beginners — Complete Syllabus Page 9
Quick Reference — All HTML Tags
STRUCTURE
<!DOCTYPE html> <html> <head> <body> <title>
<meta> <link>
HEADINGS
<h1> <h2> <h3> <h4> <h5>
<h6>
TEXT
<p> <strong> <em> <br> <hr>
<span> <pre> <code>
LINKS
<a href=""> target="_blank" href="[Link]"
IMAGES
<img src=""
alt=""> width="" height=""
LISTS
<ul> <ol> <li> <dl> <dt>
<dd>
TABLES
<table> <tr> <th> <td> <thead>
<tbody> <tfoot> colspan="" rowspan=""
FORMS
<form> <input> <label> <select> <option>
<textarea> <button>
SEMANTIC
<header> <nav> <main> <footer> <article>
<section> <aside>
GENERIC
<div> <span>
HTML for Beginners — Complete Syllabus Page 10
HTML for Beginners — Complete Syllabus Page 11