1.
Basic HTML Structure
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Basic Structure</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
<p>This is a basic HTML document.</p>
</body>
</html>
2. HTML Headings
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Headings Example</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
</body>
</html>
3. Paragraphs and Line Breaks
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Paragraphs</title>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>Line 1<br>Line 2<br>Line 3</p>
</body>
</html>
4. Lists (Ordered and Unordered)
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h3>Ordered List:</h3>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h3>Unordered List:</h3>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</body>
</html>
5. Links
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<a href="https://www.google.com" target="_blank">Visit Google</a>
</body>
</html>
6. Images
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<img src="image.jpg" alt="Example Image" width="300">
</body>
</html>
7. Forms
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
8. Tables
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
</tr>
</table>
</body>
</html>
9. HTML Divs
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Div Example</title>
</head>
<body>
<div style="background-color: lightblue; padding: 20px;">
This is a div container.
</div>
</body>
</html>
10. HTML Span
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Span Example</title>
</head>
<body>
<p>This is a <span style="color: red;">highlighted</span> word.</p>
</body>
</html>
11. Audio
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Audio Example</title>
</head>
<body>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
12. Video
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Video Example</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
13. Iframe
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Iframe Example</title>
</head>
<body>
<iframe src="https://www.example.com" width="600"
height="400"></iframe>
</body>
</html>
14. Meta Tags
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Meta Tag Example">
<meta name="keywords" content="HTML, Example, Meta">
<meta name="author" content="Your Name">
<title>Meta Tags</title>
</head>
<body>
<p>Check the page source for meta tags.</p>
</body>
</html>
15. HTML Buttons
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
</head>
<body>
<button>Click Me</button>
</body>
</html>
16. CSS with HTML
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
body {
background-color: lightgray;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Styled HTML</h1>
</body>
</html>
17. HTML Comments
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Comments</title>
</head>
<body>
<!-- This is a comment -->
<p>This is visible content.</p>
</body>
</html>
18. HTML Input Types
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Input Types</title>
</head>
<body>
<form>
<input type="text" placeholder="Text"><br>
<input type="password" placeholder="Password"><br>
<input type="date"><br>
<input type="color"><br>
</form>
</body>
</html>
19. HTML Hyperlink with Target
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Target</title>
</head>
<body>
<a href="https://www.google.com" target="_blank">Open in New Tab</a>
</body>
</html>
20. HTML Inline CSS
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<h1 style="color: red;">Red Heading</h1>
</body>
</html>
