This specification details the migration of key layout structures from generic <div> containers to semantic HTML5 landmark elements. The primary goal is to improve the document outline for assistive technologies (like screen readers) and enhance SEO by providing clearer context to page regions.
Location: index.html
Target: <div class="blog-feed"> and <h2 class="feed-title">Latest from the Blog</h2>
Replacement:
<section class="blog-feed" aria-labelledby="feed-title">
<h2 id="feed-title" class="feed-title">Latest from the Blog</h2>
...
</section>
Rationale: The blog feed represents a distinct, standalone section of the homepage’s main content. Using <section> with aria-labelledby explicitly links the landmark to its heading.
Location: index.html
Target: <div class="avatar-container">...</div>
Replacement:
<figure class="avatar-container">
<a href="about/index.html" class="avatar-link">
<img src="assets/gurupanguji.jpeg" alt="@gurupanguji" class="avatar avatar-lg" />
</a>
</figure>
Rationale: The avatar is a self-contained illustrative element representing the author. Wrapping it in a <figure> provides a semantic wrapper for the image without requiring a visible caption.
Location: _layouts/post.html, index.html, reviews/index.html, labs/index.html
Target: <div class="header-actions">...</div>
Replacement:
<aside class="header-actions" aria-label="Site settings and navigation">
<!-- nav links and theme toggle remain here -->
</aside>
Rationale: The header actions group (containing the theme toggle and secondary navigation) is complementary to the main content. An <aside> landmark correctly identifies this as a tangential or secondary functional area.