Main Content HTML

Main Content HTML

With the header and footer in place, let's build the main content area between them. We'll create a hero section, an about area, a services/blog card grid, and a sidebar.

The Hero Section

<section id="hero">
    <div class="container">
        <div class="hero-content">
            <h1>Web Development & Design</h1>
            <p>Tips, tutorials, and reviews to help you become
               a better developer. Grab a coffee and start learning!</p>
            <a href="blog.html" class="btn">Read the Blog</a>
        </div>
    </div>
</section>

The Main Content Wrapper

We wrap the content area in <main> with a two-column layout — content and sidebar:

<main id="main-content">
    <div class="container">
        <div class="content-wrapper">
            <!-- Primary content -->
            <div class="primary-content">
                <!-- sections go here -->
            </div>
            <!-- Sidebar -->
            <aside class="sidebar">
                <!-- widgets go here -->
            </aside>
        </div>
    </div>
</main>

Blog Post Cards

<section id="blog-posts">
    <h2 class="section-title">Latest Posts</h2>
    <div class="post-grid">
        <article class="post-card">
            <img src="img/post-1.jpg" alt="Post title">
            <div class="post-card-body">
                <h3><a href="single.html">Getting Started with CSS Grid</a></h3>
                <p class="post-meta">
                    <span class="date">March 10, 2025</span>
                    <span class="author">by Admin</span>
                </p>
                <p>CSS Grid is a powerful layout system that
                   lets you create complex two-dimensional layouts...</p>
                <a href="single.html" class="read-more">Read More →</a>
            </div>
        </article>
        <article class="post-card">
            <img src="img/post-2.jpg" alt="Post title">
            <div class="post-card-body">
                <h3><a href="single.html">JavaScript ES6 Features</a></h3>
                <p class="post-meta">
                    <span class="date">March 8, 2025</span>
                    <span class="author">by Admin</span>
                </p>
                <p>Modern JavaScript introduced many powerful
                   features that make code cleaner and more efficient...</p>
                <a href="single.html" class="read-more">Read More →</a>
            </div>
        </article>
        <article class="post-card">
            <img src="img/post-3.jpg" alt="Post title">
            <div class="post-card-body">
                <h3><a href="single.html">Responsive Design Tips</a></h3>
                <p class="post-meta">
                    <span class="date">March 5, 2025</span>
                    <span class="author">by Admin</span>
                </p>
                <p>Making websites work beautifully on every
                   device is a critical skill for modern developers...</p>
                <a href="single.html" class="read-more">Read More →</a>
            </div>
        </article>
    </div>
</section>

The Sidebar

<aside class="sidebar">
    <div class="widget">
        <h3 class="widget-title">Search</h3>
        <form class="search-form">
            <input type="text" placeholder="Search...">
            <button type="submit">Go</button>
        </form>
    </div>
    <div class="widget">
        <h3 class="widget-title">Categories</h3>
        <ul>
            <li><a href="#">HTML & CSS (12)</a></li>
            <li><a href="#">JavaScript (8)</a></li>
            <li><a href="#">WordPress (6)</a></li>
            <li><a href="#">Design (4)</a></li>
        </ul>
    </div>
    <div class="widget">
        <h3 class="widget-title">Recent Posts</h3>
        <ul>
            <li><a href="#">Getting Started with CSS Grid</a></li>
            <li><a href="#">JavaScript ES6 Features</a></li>
            <li><a href="#">Responsive Design Tips</a></li>
        </ul>
    </div>
</aside>

Why the Sidebar Matters for WordPress

This sidebar will become a WordPress widget area later. WordPress lets users add widgets (search, categories, recent posts, custom HTML) from the admin panel — no coding required.

Full Page Structure

<body>
    <header id="main-header"> ... </header>
    <section id="hero"> ... </section>
    <main id="main-content">
        <div class="container">
            <div class="content-wrapper">
                <div class="primary-content">
                    <section id="blog-posts"> ... </section>
                </div>
                <aside class="sidebar"> ... </aside>
            </div>
        </div>
    </main>
    <footer id="main-footer"> ... </footer>
</body>

Key Takeaways

• Use <main> for the primary content area between header and footer
• Use <article> for individual blog post cards
• Use <aside> for the sidebar — it will become a WordPress widget area
• The two-column layout (content + sidebar) is the classic WordPress blog structure
• Include post metadata (date, author) — WordPress generates these dynamically