Mastering Grid Layouts
CSS Grid has changed how we think about space. With just a few lines of code, you can create complex layouts...
| Metric | Value |
|---|---|
| Reading Time | 5 Minutes |
| Category | Web Design |
About the
Lab.
Welcome to the Dynamic HTML Lab. In this session, we’ll build a professional blog article using semantic tags and even experiment with legacy motion effects.
Recommended
Learning
Start Learning
Master Semantic HTML
Learn why document structure matters for accessibility and SEO, and how to build truly descriptive web pages.
Why Semantic HTML?
Semantic tags like <article> and <header>
aren't just for looks. They tell browsers and assistive technologies (like screen readers)
exactly what each part of your page represents, boosting SEO and accessibility.
Lab Objectives
-
1Master HTML5 semantic elements (Header, Main, Article, Footer).
-
2Implement sidebars with
asideand dynamic text withmarquee. -
3Display metadata using clean, accessible
tableelements.
The Foundation
Every great article starts with a valid document skeleton.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Blog Article</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>Standardization
The <!DOCTYPE html> declaration ensures that the browser uses
"Standards Mode" rather than "Quirks Mode," giving you consistent rendering across Chrome,
Safari, and Firefox.
The Header
The <header> contains introductory content or navigation links.
index.html
<body>
<header>
<nav>
<a href="#">Home</a>
<a href="#">Articles</a>
</nav>
<h1>The UNDR Journal</h1>
</header>
<!-- Remaining body content -->
</body>Identity
By using <header>, you signal to screen readers that this is
the site-wide branding area. You can have multiple headers on a page (e.g., inside an
<article>), but there's usually one primary one at the top.
Breaking News
Add a sense of urgency with the <marquee> tag for scrolling highlights.
index.html
<!-- Below the header -->
<marquee behavior="scroll" direction="left">
BREAKING: HTML Mastery Lab 05 has just been released!
Don't miss out on the latest updates.
</marquee>Fun Fact
The <marquee> tag is a "legacy" element from the early days of
the web. While technically deprecated in modern standards, it's still fun to use for simple,
retro scrolling effects!
The Article
The <article> tag represents a self-contained composition that makes sense on its
own.
index.html
<main>
<article>
<h2>Mastering Grid Layouts</h2>
<p>CSS Grid has changed how we think about space...</p>
<p>With just a few lines of code, you can create complex,
responsive designs that were once impossible.</p>
<!-- Table will go here later -->
</article>
</main>Portability
The <article> tag is perfect for content that could be
distributed in an RSS feed or shared as a standalone piece. It should contain its own headings
and internal structure.
Side Content
The <aside> tag is used for content "to the side"—related but not part of the
primary flow.
index.html
<!-- After the <main> element -->
<aside>
<h3>About the Author</h3>
<p>Alex is a front-end engineer obsessed with clean HTML
and accessible interfaces.</p>
</aside>Context
Asides are great for author bios, related links, terminology definitions, or advertisements. They are typically styled as sidebars on larger screens.
Structured Data
Use <table> to display categorical information about your post.
index.html
<article>
<!-- Previous paragraphs... -->
<table>
<tr><th>Metric</th><th>Value</th></tr>
<tr><td>Reading Time</td><td>5 Minutes</td></tr>
<tr><td>Category</td><td>Web Design</td></tr>
</table>
</article>Tabular Logic
Only use <table> for data that has a logical relationship.
Never use tables for layout; use CSS Flexbox or Grid for that!
The Footer
Finish your document with copyright, contact info, and legal links.
index.html
<footer>
<p>© 2026 The UNDR Journal. Built with Semantic HTML.</p>
<nav>
<a href="#">Twitter</a> | <a href="#">Newsletter</a>
</nav>
</footer>Internal CSS
Add a <style> block in the <head> to polish your blog's
appearance.
index.html
<style>
body {
font-family: sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
header { border-bottom: 2px solid #333; }
article { margin-top: 30px; }
table { width: 100%; border-collapse: collapse; }
td, th { border: 1px solid #ddd; padding: 8px; }
</style>You've built a fully semantic, styled blog article. Review the final code and preview below.
final-blog.html
<!DOCTYPE html>
<html>
<head>
<style>
body { max-width: 800px; margin: 0 auto; display: grid; grid-template-columns: 1fr 200px; }
header, marquee, footer { grid-column: 1 / -1; }
table { border: 1px solid #ddd; width: 100%; border-collapse: collapse; }
td, th { border: 1px solid #ddd; padding: 8px; }
</style>
</head>
<body>
<header><h1>The UNDR Journal</h1></header>
<marquee>BREAKING: HTML Mastery released!</marquee>
<main>
<article>
<h2>Mastering Grid Layouts</h2>
<table>
<tr><th>Metric</th><th>Value</th></tr>
<tr><td>Reading Time</td><td>5 mins</td></tr>
</table>
</article>
</main>
<aside><h3>About Author</h3></aside>
<footer>(c) 2026 UNDR</footer>
</body>
</html>