m2-front-end-101/s2-html-semantics/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML semantics</title>
</head>
<body>
    
    <header>
        <h1>HTML Semantics</h1>
        <a href="https://blog.hubspot.com/blog/tabid/6307/bid/5847/a-marketer-s-guide-to-html5.aspx" target="_blank" rel="noopener noreferrer" aria-label="Marketer's Guide to HTML5">
            <img src="img/HTML5_logo_and_wordmark.svg" width="200px" alt="HTML5 logo">
        </a>
    </header>

    <nav aria-label="Main navigation">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about-us.html">About us</a></li>
            <li><a href="contacts.html">Contacts</a></li>
        </ul>
    </nav>

    <main>
        <section>
            <article>
                <h2>What is HTML semantics?</h2>
                <p>HTML semantics is the use of HTML markup to reinforce the meaning of the information in webpages rather than merely define its presentation (look).</p>
            </article>
            <article>
                <h2>Why is HTML semantics important?</h2>
                <p>HTML semantics is important because it helps search engines understand the content of webpages and display them in search results accordingly.</p>
            </article>
        </section>
    </main>

    <aside>
        <h2>Related articles</h2>
        <ul>
            <li><a href="https://www.w3schools.com/html/html5_semantic_elements.asp" target="_blank" rel="noopener noreferrer">HTML5 Semantic Elements</a></li>
            <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines" target="_blank" rel="noopener noreferrer">Using HTML sections and outlines</a></li>
        </ul>
    </aside>
    
    <footer>
        <hr>
        <p>&copy; 2024 A Python Student Assignment</p>
    </footer>
</body>
</html>