Wednesday, 27 November 2024

Improve semantic structure of webpage using main Element

The <main> element is an HTML5 structural element introduced to help improve the semantic structure of web pages.

The <main> element represents the dominant or main content of the <body> of a document. It is intended to contain the core content that is directly related to or expands upon the central topic of the document, excluding headers, footers, navigation, and sidebars. The <main> element helps search engines identify the most relevant parts of the content, which can contribute to improved SEO.

 

main-tag.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main Tag Example</title>
</head>
<body>

    <header>
        <h1>My Website</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>
        <h2>Main Content</h2>
        <p>This is where the primary content of the page goes.</p>
    </main>
    
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

 

  

Previous                                                    Next                                                    Home

No comments:

Post a Comment