Learn HTML with Real Code Examples
Updated Nov 21, 2025
Code Sample Descriptions
1
HTML5 Semantic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern HTML5 Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<h1>My Website</h1>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<h2>Welcome to Our Site</h2>
<p>This is a modern HTML5 document with semantic elements.</p>
</section>
<section id="features">
<article>
<h3>Feature One</h3>
<p>Description of the first feature.</p>
</article>
<article>
<h3>Feature Two</h3>
<p>Description of the second feature.</p>
</article>
</section>
</main>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Demonstrates modern HTML5 semantic elements and document structure.
2
HTML5 Article and Section Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Articles and Sections</title>
</head>
<body>
<main>
<section id="news">
<h2>Latest News</h2>
<article>
<h3>News Title 1</h3>
<p>Content for the first news article.</p>
</article>
<article>
<h3>News Title 2</h3>
<p>Content for the second news article.</p>
</article>
</section>
</main>
</body>
</html>
Demonstrates using `<article>` and `<section>` elements for content organization.
3
HTML5 Form Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Form</title>
</head>
<body>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>
</body>
</html>
Demonstrates a semantic form with labels, inputs, and a submit button.
4
HTML5 Header and Footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Header & Footer Example</title>
</head>
<body>
<header>
<h1>Website Header</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
</header>
<main>
<p>Main content goes here.</p>
</main>
<footer>
<p>© 2024 Example.com</p>
</footer>
</body>
</html>
Shows proper use of `<header>` and `<footer>` elements.
5
HTML5 Navigation Menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Example</title>
</head>
<body>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</body>
</html>
Shows a semantic navigation menu using `<nav>` and `<ul>` elements.
6
HTML5 Aside Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aside Example</title>
</head>
<body>
<main>
<p>Main article content goes here.</p>
</main>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
</ul>
</aside>
</body>
</html>
Demonstrates using `<aside>` for related content or sidebars.
7
HTML5 Multimedia Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multimedia Example</title>
</head>
<body>
<video controls width="320">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Shows embedding audio and video using HTML5 semantic elements.
8
HTML5 Figure and Figcaption
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Figure Example</title>
</head>
<body>
<figure>
<img src="image.jpg" alt="A beautiful view">
<figcaption>Beautiful scenery at sunset.</figcaption>
</figure>
</body>
</html>
Demonstrates using `<figure>` and `<figcaption>` for images with captions.
9
HTML5 Article with Time Element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Article Time Example</title>
</head>
<body>
<article>
<h2>News Update</h2>
<p>Published on <time datetime="2024-10-04">October 4, 2024</time></p>
<p>Article content goes here.</p>
</article>
</body>
</html>
Uses `<time>` element for marking up dates and times within an article.
10
HTML5 Semantic Layout Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Layout</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Main Section</h2>
<p>Content goes here.</p>
</section>
</main>
<aside>
<h3>Sidebar</h3>
<p>Additional content.</p>
</aside>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
Full page layout using `<header>`, `<nav>`, `<main>`, `<aside>`, and `<footer>`.
11
HTML5 Table Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Example</title>
</head>
<body>
<table>
<thead>
<tr><th>Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>25</td></tr>
<tr><td>Bob</td><td>30</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">Total People: 2</td></tr>
</tfoot>
</table>
</body>
</html>
Shows a semantic HTML5 table with header, body, and footer sections.