Web Development for Beginners

Previous Lesson
Next Lesson

Lesson 3: Structuring Your Page with Semantic HTML

Web Development for Beginners Lesson 3: Structuring Your Page with Semantic HTML

Semantic HTML provides meaning to content, improving accessibility and SEO.

Common Semantic Tags:

  • <header>: Contains introductory content or navigation links.
  • <nav>: Represents navigation links.
  • <main>: The main content of the webpage.
  • <section>: A thematic grouping of content.
  • <article>: A self-contained piece of content.
  • <footer>: Footer content, such as contact info or copyright.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Semantic HTML Example</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <a href="#home">Home</a> |
        <a href="#about">About</a> |
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="home">
        <h2>Welcome!</h2>
        <p>This is the home section of my website.</p>
      </section>
      <section id="about">
        <h2>About Me</h2>
        <p>I am learning to build websites!</p>
      </section>
    </main>
    <footer>
      <p>© 2024 My Website</p>
    </footer>
  </body>
</html>
Previous Lesson
Back to Tutorial
Next Lesson