Level 0: HTML Basics
1. Hello World Program
<!DOCTYPE html>
<html>
<head>
<title>Hello Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
2. Simple Paragraph with Formatting
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>This is a <b>bold</b>, <i>italic</i>, and <u>underlined</u> text.</p>
</body>
</html>
Level 1: Structural Tags
3. Headings and Horizontal Rule
<!DOCTYPE html>
<html>
<body>
<h1>Main Heading</h1>
<hr>
<h2>Subheading</h2>
<h3>Another Subheading</h3>
</body>
</html>
4. Lists (Ordered and Unordered)
<!DOCTYPE html>
<html>
<body>
<h3>Fruits (Unordered)</h3>
<ul>
<li>Apple</li><li>Mango</li><li>Banana</li>
</ul>
<h3>Steps (Ordered)</h3>
<ol>
<li>Wake up</li><li>Brush</li><li>Study</li>
</ol>
</body>
</html>
Level 2: Images, Links, and Tables
5. Image and Hyperlink
<!DOCTYPE html>
<html>
<body>
<a href="https://google.com" target="_blank">Go to Google</a><br>
<img src="https://via.placeholder.com/150" alt="Sample Image">
</body>
</html>
6. Table with Border
<!DOCTYPE html>
<html>
<body>
<h2>Student Table</h2>
<table border="1">
<tr><th>Name</th><th>Roll No</th></tr>
<tr><td>Ravi</td><td>101</td></tr>
<tr><td>Asha</td><td>102</td></tr>
</table>
</body>
</html>
Level 3: Forms and Input Controls
7. Basic Form
<!DOCTYPE html>
<html>
<body>
<h2>Registration Form</h2>
<form>
Name: <input type="text" name="name"><br><br>
Age: <input type="number" name="age"><br><br>
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
8. Form with Checkbox, Dropdown, and Password
<!DOCTYPE html>
<html>
<body>
<h2>Login Form</h2>
<form>
Username: <input type="text" name="uname"><br><br>
Password: <input type="password" name="pass"><br><br>
Hobbies:<br>
<input type="checkbox" name="hobby1"> Reading<br>
<input type="checkbox" name="hobby2"> Music<br><br>
Country:
<select>
<option>India</option>
<option>USA</option>
<option>UK</option>
</select><br><br>
<input type="submit">
</form>
</body>
</html>
Level 4: Layout and Multimedia
9. Div and Span Layout
<!DOCTYPE html>
<html>
<head>
<style>
.box { background-color: lightblue; padding: 20px; margin: 10px; }
</style>
</head>
<body>
<div class="box">This is a div block</div>
<span style="color: red;">This is inline span</span>
</body>
</html>
10. Video and Audio Embedding
<!DOCTYPE html>
<html>
<body>
<h3>Video Example</h3>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support video.
</video>
<br>
<h3>Audio Example</h3>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
</body>
</html>
Level 5: HTML5 Semantic Elements
11. Semantic Tags
<!DOCTYPE html>
<html>
<body>
<header><h1>My Website</h1></header>
<nav><a href="#">Home</a> | <a href="#">About</a></nav>
<main>
<article>
<h2>Post Title</h2>
<p>This is a blog post using semantic tags.</p>
</article>
</main>
<footer>Copyright © 2025</footer>
</body>
</html>
Level 6: Advanced Features
12. Input Validation with HTML5
<!DOCTYPE html>
<html>
<body>
<h3>Validated Form</h3>
<form>
Email: <input type="email" required><br><br>
Age (18+): <input type="number" min="18"><br><br>
Website: <input type="url"><br><br>
<input type="submit">
</form>
</body>
</html>
13. HTML with CSS + Internal Styling
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #f0f0f0; font-family: Arial; }
h1 { color: green; }
p { color: #555; }
</style>
</head>
<body>
<h1>Styled Page</h1>
<p>This paragraph is styled using internal CSS.</p>
</body>
</html>
