Project 4: Coding a Semantic Blog Portal Layout
Blogs are content-driven, making semantic HTML and accessibility tags vital to help readers discover your posts on Google. In this fourth practical project, you will build a classic double-column blog portal layout containing articles, sidebar widgets, and footer navigation directories.
1. Project Specifications
Your blog layout must implement:
- Header Zone: Blog title, logo, and core category navigation tags.
- Double Column Layout:
- Left Side (Main Content): A list of multiple blog posts (each utilizing
<article>with its own header, description, and "Read More" button). - Right Side (Sidebar Widget): An
<aside>containing an author bio block, search filter, and list of recommended links.
- Footer Directory: Social media links and copyright parameters.
2. Completed Blog Layout HTML Code
Create a file named blog.html locally, copy this code, and open it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DevTales - Web Engineering Blog</title>
</head>
<body>
<!-- PAGE HEADER -->
<header>
<h1>DevTales Blog</h1>
<p>Documenting my journey learning front-end engineering.</p>
<nav>
<a href="/">Home</a> |
<a href="/category/html">HTML Tutorials</a> |
<a href="/category/css">CSS Layouts</a> |
<a href="/about">About Me</a>
</nav>
</header>
<hr>
<!-- DOUBLE-COLUMN CONTENT BLOCK -->
<div style="display: flex; gap: 40px;">
<!-- LEFT COLUMN: ARTICLES LIST (70% width skeleton) -->
<main style="flex: 3;">
<!-- Article 1 -->
<article>
<header>
<h2><a href="/blog/why-sem-html">Why I Swear By Semantic HTML In 2026</a></h2>
<p>Posted on June 12, 2026 by <strong>Admin</strong></p>
</header>
<p>
Many developers use divs for everything, but it ruins SEO performance and screen reader navigation. Let's look at why semantic tags like article and aside are crucial...
</p>
<p><a href="/blog/why-sem-html"><strong>Read More →</strong></a></p>
</article>
<hr>
<!-- Article 2 -->
<article>
<header>
<h2><a href="/blog/devtools-secrets">5 DevTools Inspect Secrets You Aren't Using</a></h2>
<p>Posted on June 10, 2026 by <strong>Admin</strong></p>
</header>
<p>
Chrome DevTools lets you do far more than just inspect style colors. From editing attributes live to blocking network caches, here are the core tricks...
</p>
<p><a href="/blog/devtools-secrets"><strong>Read More →</strong></a></p>
</article>
</main>
<!-- RIGHT COLUMN: SIDEBAR WIDGETS (30% width skeleton) -->
<aside style="flex: 1; border-left: 1px solid #ccc; padding-left: 20px;">
<!-- Widget 1: Bio -->
<section>
<h3>About the Author</h3>
<p>
Hi, I'm Alex. I build accessible web platforms and write code guidelines for open-source technical teams.
</p>
</section>
<br>
<!-- Widget 2: Useful Links -->
<section>
<h3>Recommended Resources</h3>
<ul>
<li><a href="https://w3.org" target="_blank">W3C Organization</a></li>
<li><a href="https://caniuse.com" target="_blank">Can I Use?</a></li>
<li><a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a></li>
</ul>
</section>
</aside>
</div>
<hr>
<!-- PAGE FOOTER -->
<footer>
<p>Follow my journey on <a href="https://twitter.com">Twitter</a> or <a href="https://github.com">GitHub</a>.</p>
<p>© 2026 DevTales. Powered by semantic HTML5.</p>
</footer>
</body>
</html>3. Challenge Exercises
- Examine the
<article>elements. Notice how each contains its own<header>tag. This is fully valid HTML5 and helps define article metadata separately from the main page title. - In the main column, try clicking "Read More". Observe how the local browser attempts to navigate to the detailed URL.
Published on