HTML Layout Elements

HTML5 provides semantic elements to create a more meaningful page structure.

Semantic Elements

header

<header>
    <h1>Website Name</h1>
    <nav>
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">About</a></li>
        </ul>
    </nav>
</header>

nav

<nav>
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

main

<main>
    <article>
        <h2>Article</h2>
        <p>Article content...</p>
    </article>
</main>

article

<article>
    <h2>Article Title</h2>
    <p>Article content...</p>
</article>

section

<section>
    <h2>Section</h2>
    <p>Section content...</p>
</section>

aside

<aside>
    <h2>Sidebar</h2>
    <p>Sidebar content...</p>
</aside>

footer

<footer>
    <p>&copy; 2024 Website</p>
</footer>

Case Study: Complete Campus Website

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Campus Website</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }

        header {
            background: #1e40af;
            color: white;
            padding: 1rem;
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 1rem;
            margin-top: 0.5rem;
        }

        nav a {
            color: white;
            text-decoration: none;
        }

        main {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        article {
            margin-bottom: 2rem;
        }

        section {
            margin-bottom: 1.5rem;
        }

        aside {
            background: #f3f4f6;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 1rem;
        }
    </style>
</head>
<body>
    <header>
        <h1>Technology University</h1>
        <nav>
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="academic.html">Academic</a></li>
                <li><a href="research.html">Research</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Latest News</h2>

            <section>
                <h3>New Student Registration</h3>
                <p>New student registration opens on January 1.</p>
            </section>

            <section>
                <h3>Odd Semester Graduation</h3>
                <p>The graduation ceremony will be held on February 15.</p>
            </section>
        </article>

        <aside>
            <h3>Important Info</h3>
            <p>The even semester course schedule is now available.</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2024 Technology University</p>
    </footer>
</body>
</html>

Everyday Case Study

Case: A developer needs to create a campus blog.

<article>
    <header>
        <h2>Tips for Successful College</h2>
        <time datetime="2024-01-15">January 15, 2024</time>
    </header>

    <section>
        <h3>1. Time Management</h3>
        <p>Use a schedule to manage your study time.</p>
    </section>

    <section>
        <h3>2. Active in Class</h3>
        <p>Participate actively in class for a better understanding.</p>
    </section>

    <footer>
        <p>Written by: Dr. Susanti</p>
        <p>Category: Academic Tips</p>
    </footer>
</article>

Best Practices

1. Use semantic elements: For meaningful structure
2. Correct hierarchy: header → main → article → section → footer
3. One main per page: For accessibility
4. Nav for navigation: Not for other content
5. Aside for related content: Not for main content

Summary

HTML5 layout elements provide meaningful structure. Use semantic elements for SEO and accessibility.