No announcement
 

Semantic Elements

Semantic elements are HTML elements that convey meaning and describe the structure or purpose of the content they wrap. They provide a clearer understanding of the content to both browsers and developers.

Example:

semantic.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Semantic Elements Example</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>About Us</h2>
            <p>This is the about section of the website.</p>
        </section>
    </main>
    <footer>
        <p>© 2023 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

In this example, semantic elements such as <header>, <nav>, <main>, <section>, and <footer> are used. These elements provide meaningful structure and help convey the purpose or role of the content they contain. The <h1>, <h2>, <p>, <ul>, and <li> tags are also semantic elements that define headings, paragraphs, lists, and list items respectively, further enhancing the clarity of the content.

Please note that while the examples above demonstrate the usage of non-semantic and semantic elements, it is generally recommended to use semantic elements wherever possible. Semantic elements improve accessibility, search engine optimization, and facilitate better understanding and maintenance of the HTML structure.