Menu
HTML

Grouping Content

Grouping content in HTML is crucial for structuring and organizing your web page's elements, making it more accessible and understandable for both users and web crawlers. HTML provides several elements to group content based on their semantic meaning and purpose.

 

Using <div> Element

The <div> element is a generic container that does not carry any semantic meaning on its own. It is often used to group and style content for layout purposes or to apply JavaScript functionality.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grouping Content Example</title>
</head>
<body>
    <div>
        <h2>Section 1</h2>
        <p>This is the content of section 1.</p>
    </div>
    <div>
        <h2>Section 2</h2>
        <p>This is the content of section 2.</p>
    </div>
</body>
</html>

 

Using Semantic Elements

HTML5 introduced semantic elements that provide meaning to the content they contain. Some common semantic elements for grouping content include <header>, <footer>, <nav>, <main>, <article>, and <section>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grouping Content Example</title>
</head>
<body>
    <header>
        <h1>Website Header</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Section 1</h2>
            <p>This is the content of section 1.</p>
        </section>

        <section>
            <h2>Section 2</h2>
            <p>This is the content of section 2.</p>
        </section>
    </main>

    <footer>
        <p>© 2024 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

 

Using Lists

HTML lists (<ul>, <ol>, <dl>) can also be used to group related content, such as navigation links or definitions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grouping Content Example</title>
</head>
<body>
    <h2>Navigation</h2>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

    <h2>Related Links</h2>
    <ul>
        <li><a href="#">Terms of Service</a></li>
        <li><a href="#">Privacy Policy</a></li>
    </ul>
</body>
</html>

By appropriately grouping content using these HTML elements, you can create well-structured and organized web pages that are easier to maintain, understand, and navigate.

HTML