HTML Tutorials

HTML - Example of a Semantic HTML Layout

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

Beginner 5 Hours

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.

Related Tutorials

Frequently Asked Questions for HTML

  • HTML stands for HyperText Markup Language.
  • It is used to create the structure of web pages and web applications.
  • HTML defines elements such as headings, paragraphs, links, images, and other content.

  • Block-level elements (like <div>, <p>, <h1>) start on a new line and take full width.
  • Inline elements (like <span>, <a>, <strong>) stay within the flow of the text.
  • Understanding this helps with layout and styling.

  • A basic HTML page includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body>.
  • The <head> section contains metadata like the title and links to stylesheets.
  • The <body> section contains all the visible content of the webpage.

  • The <meta> tag provides metadata such as page description, keywords, and author.
  • It helps browsers and search engines understand the content of the page.
  • One common use is specifying the character encoding: <meta charset="UTF-8">.

  • Forms collect user input using the <form> tag.
  • Inside a form, use <input>, <textarea>, <select>, and <button>.
  • The action attribute specifies where to send the form data.

  • The <label> tag defines a label for an input element.
  • It improves accessibility and allows users to click the label to focus the input.
    Example: <label for="email">Email:</label><input id="email">.

Comments in HTML are written between <!-- and -->.

Example:
<!-- This is a comment -->.
Comments are not displayed on the webpage and are used for documentation.

HTML entities are used to display reserved or special characters.

For example, &lt; displays < and &amp; displays &.
Use them to avoid confusion with actual HTML syntax.