When building web pages, organizing content using sections is essential for creating a structured and easy-to-read layout. In HTML, different sectioning elements help to logically divide content and arrange it on the page.

Basic HTML Sectioning Elements

  1. <header>: Represents the header of a section or page. It usually contains the logo, navigation menu, or heading of the page.
  2. <nav>: Used for navigation links, such as a menu that guides users to different parts of a website.
  3. <main>: Represents the main content of the document, excluding headers, footers, and sidebars.
  4. <section>: Defines a section in a document. It can group related content together, such as articles, topics, or themes.
  5. <article>: Represents a self-contained piece of content, such as a blog post or news article.
  6. <aside>: Typically used for sidebars, advertisements, or content that is related but not central to the main content.
  7. <footer>: Represents the footer of a section or page. It usually contains copyright information, links, or contact details.

 

Basic HTML Layout Structure Example

Here’s a simple example to demonstrate how these elements work together to create a basic web page layout:

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Simple Web Page Layout</title>
    <link rel=”stylesheet” href=”style.css”>
</head>
<body>
    <!– Header Section –>
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href=”#home”>Home</a></li>
                <li><a href=”#about”>About</a></li>
                <li class=”dropdown”>
                    <a href=”#services” class=”dropbtn”>Services</a>
                    <ul class=”dropdown-content”>
                        <li><a href=”#webdesign”>Web Design</a></li>
                        <li><a href=”#seo”>SEO</a></li>
                        <li><a href=”#marketing”>Marketing</a></li>
                    </ul>
                </li>
                <li><a href=”#contact”>Contact</a></li>
            </ul>
        </nav>
    </header>
    <!– Main Content –>
    <main>
        <!– Main Section –>
        <section id=”home”>
            <h2>Welcome to My Website</h2>
            <p>This is the main content of the website. Here you can find various sections about different topics.</p>
        </section>
        <!– Article Section –>
        <article>
            <h3>Latest News</h3>
            <p>Stay updated with the latest news and trends.</p>
        </article>
        <!– Sidebar Section –>
        <aside>
            <h4>Related Links</h4>
            <ul>
                <li><a href=”#link1″>Link 1</a></li>
                <li><a href=”#link2″>Link 2</a></li>
            </ul>
        </aside>
    </main>
    <!– Footer Section –>
    <footer>
        <p>&copy; 2024 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

Explanation of the Example

  1. <header> contains the website’s title and a navigation bar.
  2. <nav> has links that allow users to navigate to different sections of the page.
  3. <main> wraps the main content, which includes a section (<section>), an article (<article>), and an aside (<aside>).
  4. <section> is used for the “Home” content.
  5. <article> represents a piece of content that could be a news story.
  6. <aside> serves as a sidebar for related links.
  7. <footer> includes copyright information.

Tips for Beginners

  • Use these sectioning elements to create a well-organized layout.
  • Nesting elements like <nav>, <section>, and <article> inside <main> helps separate the main content from headers and footers.
  • Always include <header> and <footer> for a complete page structure.

 

 

Here’s a simple CSS stylesheet to style the basic HTML layout from the previous example. This CSS will improve the visual appearance and layout of the sections, making it more organized and appealing.

 

/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Body styling */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
    line-height: 1.6;
}
/* Header styling */
header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}
/* Navigation styling */
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}
nav ul li {
    position: relative; /* Needed for the dropdown */
}
nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 12px;
    display: block;
}
nav a:hover {
    text-decoration: underline;
}
/* Dropdown styling */
.dropdown .dropbtn {
    cursor: pointer;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 5px;
}
/* Dropdown menu items */
.dropdown-content li {
    border-bottom: 1px solid #ddd;
}
.dropdown-content li:last-child {
    border-bottom: none;
}
.dropdown-content a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {
    background-color: #f1f1f1;
}
/* Show the dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block;
}
/* Main content styling */
main {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 20px;
    padding: 20px;
}
/* Section styling */
section {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Article styling */
article {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}
/* Sidebar styling (aside) */
aside {
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Footer styling */
footer {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 10px;
    position: relative;
    bottom: 0;
    width: 100%;
    margin-top: 20px;
}
/* Responsive styling for small screens */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }
    main {
        grid-template-columns: 1fr;
    }
}

Explanation of the CSS

  1. Basic Reset: The * selector resets default browser margins and padding, ensuring consistency across different browsers.
  2. Body Styling: Sets a background color, font family, text color, and line height to give the entire page a uniform appearance.
  3. Header Styling: The header is given a green background, white text, padding for spacing, and center-aligned text.
  4. Navigation Styling:
    • The navigation menu is displayed as a horizontal list using flexbox.
    • The links are styled with bold white text, and a hover effect is added.
  5. Main Content Layout:
    • Uses CSS Grid to create a two-column layout, with a wider main content area and a narrower sidebar.
    • The grid adjusts to a single-column layout on smaller screens using a media query.
  6. Section and Article Styling: Adds padding, background color, rounded corners, and a subtle shadow to make these elements stand out.
  7. Sidebar (aside) Styling: Similar to section styling but with a different background color for distinction.
  8. Footer Styling: Styles the footer to match the header with a consistent green background and white text.
  9. Responsive Design: The media query at the bottom ensures that the layout adjusts gracefully on screens smaller than 768px.

 

Explanation of the Dropdown CSS

  1. Dropdown Styling:
    • The .dropdown-content is hidden by default and set to position: absolute for positioning below the parent list item.
    • Uses a white background and a box-shadow for visual separation from the main menu.
  2. Show on Hover:
    • The dropdown becomes visible when the parent .dropdown list item is hovered over, thanks to the rule .dropdown:hover .dropdown-content.
  3. Dropdown Menu Item Styling:
    • Each dropdown menu item is styled similarly to regular navigation links but with additional padding and a hover effect.
  4. Responsive Navigation:
    • The media query ensures that the navigation adjusts to a vertical layout on smaller screens.

This will create a styled dropdown menu that appears when hovering over the “Services” menu item.

Applying the CSS

To apply this CSS to your HTML file:

  1. Save the CSS code in a file named style.css.
  2. Link the CSS file in the HTML file’s <head> section:

<link rel=“stylesheet” href=“style.css”>