Source Code
Example 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<h1>My Blog</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>
<article>
<header>
<h2>My First Blog Post</h2>
<p>Posted on <time datetime="2026-01-24">January 24, 2026</time></p>
</header>
<p>This is the content of my blog post...</p>
<figure>
<img src="photo.jpg" alt="A beautiful sunset">
<figcaption>Sunset at the beach</figcaption>
</figure>
<footer>
<p>Author: John Doe</p>
</footer>
</article>
<aside>
<h3>Related Posts</h3>
<ul>
<li><a href="#">Post 1</a></li>
<li><a href="#">Post 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 CS4021. All rights reserved.</p>
</footer>
</body>
</html>Example 2
Example 3
Example 4
Example 5
Last updated