HTML Tutorials

Example of a Semantic HTML Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic HTML Example</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>Welcome to My Website</h2>
            <p>This section provides an overview of the website.</p>
        </section>
        <article>
            <h2>Blog Post</h2>
            <p>This is a blog post about the importance of semantic HTML.</p>
        </article>
        <section>
            <h2>Services</h2>
            <p>Details about the services provided.</p>
        </section>
    </main>
    <footer>
        <p>Copyright 2023. All rights reserved.</p>
    </footer>
</body>
</html>

The user experience and SEO performance are enhanced by this structure, which guarantees that the online material is meaningfully structured.

logo

HTML

Example of a Semantic HTML Layout

Beginner 5 Hours
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic HTML Example</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>Welcome to My Website</h2>
            <p>This section provides an overview of the website.</p>
        </section>
        <article>
            <h2>Blog Post</h2>
            <p>This is a blog post about the importance of semantic HTML.</p>
        </article>
        <section>
            <h2>Services</h2>
            <p>Details about the services provided.</p>
        </section>
    </main>
    <footer>
        <p>Copyright 2023. All rights reserved.</p>
    </footer>
</body>
</html>

The user experience and SEO performance are enhanced by this structure, which guarantees that the online material is meaningfully structured.

Similar Data Science Tutorials

Related tutotials

Frequently Asked Questions for html

line

Mail us :

Address :

India

Categories

Copyrights © 2024 letsupdateskills All rights reserved