Creating The Main Content HTML

Creating The Main Content HTML

With the header in place, let's build the main content area and footer. We'll create an "About" section, a "Services" section, and a full website footer with contact information.

Section 1: About

<section id="about">
    <div class="container">
        <h2 class="section-title">About Us</h2>
        <div class="about-content">
            <div class="about-img">
                <img src="img/about-photo.jpg" alt="About our company">
            </div>
            <div class="about-text">
                <p>We are a creative agency specializing in web design 
                   and development. With over 10 years of experience, 
                   we've helped hundreds of businesses build their 
                   online presence.</p>
                <p>Our team of designers and developers work together 
                   to create beautiful, functional websites that drive 
                   results for our clients.</p>
                <a href="about.html" class="btn">Learn More</a>
            </div>
        </div>
    </div>
</section>

Section 2: Services

<section id="services">
    <div class="container">
        <h2 class="section-title">Our Services</h2>
        <div class="services-grid">
            <div class="service-card">
                <img src="img/service-1.jpg" alt="Web Design">
                <h3>Web Design</h3>
                <p>Beautiful, modern designs that capture 
                   your brand identity and engage visitors.</p>
            </div>
            <div class="service-card">
                <img src="img/service-2.jpg" alt="Development">
                <h3>Development</h3>
                <p>Clean, semantic code that's fast, accessible, 
                   and works across all devices.</p>
            </div>
            <div class="service-card">
                <img src="img/service-3.jpg" alt="SEO">
                <h3>SEO</h3>
                <p>Search engine optimization to help your 
                   website rank higher and attract more traffic.</p>
            </div>
        </div>
    </div>
</section>

Semantic Elements for Content

Element	Purpose
<section>	Groups related content with a heading
<article>	Self-contained content (blog posts, cards)
<aside>	Sidebar or related content
<main>	The primary content of the page
<figure>	Self-contained image with optional caption

Wrapping with <main>

Wrap all content sections (between header and footer) in a <main> element:

<main>
    <section id="about">...</section>
    <section id="services">...</section>
</main>

The Footer

<footer id="main-footer">
    <div class="container">
        <div class="footer-grid">
            <div class="footer-col">
                <h4>About</h4>
                <p>We create beautiful, responsive websites 
                   for businesses of all sizes.</p>
            </div>
            <div class="footer-col">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Contact Us</h4>
                <ul class="contact-info">
                    <li><span class="icon">📍</span> 123 Web Street, Digital City</li>
                    <li><span class="icon">📞</span> (555) 123-4567</li>
                    <li><span class="icon">✉️</span> info@example.com</li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Follow Us</h4>
                <div class="social-links">
                    <a href="#" aria-label="Facebook">Facebook</a>
                    <a href="#" aria-label="Twitter">Twitter</a>
                    <a href="#" aria-label="Instagram">Instagram</a>
                    <a href="#" aria-label="LinkedIn">LinkedIn</a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 My Website. All rights reserved.</p>
        </div>
    </div>
</footer>

Complete Page Structure Overview

<body>
    <header id="main-header">
        <!-- logo, nav, hamburger -->
    </header>

    <section id="hero">
        <!-- hero headline + CTA -->
    </section>

    <main>
        <section id="about">
            <!-- about image + text -->
        </section>

        <section id="services">
            <!-- services grid -->
        </section>
    </main>

    <footer id="main-footer">
        <!-- footer columns + copyright -->
    </footer>

    <script src="js/script.js"></script>
</body>

Accessibility Checklist

• All images have descriptive alt attributes
• Navigation uses <nav> with a list structure
• Social links have aria-label attributes
• Headings follow a logical hierarchy (h1 → h2 → h3 → h4)
• Interactive elements are keyboard-accessible

Key Takeaways

• Use <main> to wrap the primary page content
• Each content area gets its own <section> with a heading
• The footer typically has multiple columns with links, contact info, and social links
• Follow semantic HTML and accessibility best practices from the start
• The complete page skeleton is: header → hero → main (sections) → footer