Building Layouts with Semantic HTML

Tutorial 5 of 5

1. Introduction

In this tutorial, we will learn how to build effective website layouts using semantic HTML. By using semantic tags, we not only make our HTML easier to read and understand, but we also provide important context to search engines and assistive technologies.

You will learn:
- What is Semantic HTML and why it's essential.
- How to structure HTML code using semantic tags.
- Best practices for creating layouts with semantic HTML.

Prerequisites:
Basic understanding of HTML.

2. Step-by-Step Guide

Semantic HTML is the use of HTML markup to reinforce the semantics or meaning of the content. Tags like <section>, <article>, <header>, <footer>, <nav>, and <aside> provide information about the type of content they contain.

Example:

<article>
  <header>
    <h1>Title of the article</h1>
  </header>
  <p>Article content...</p>
  <footer>Author details...</footer>
</article>

In the above code, we used semantic tags to structure our article. This makes it clear what each section of the code represents.

Best Practices:
- Use the <main> tag to wrap the main content of your webpage. There should be only one <main> per page.
- Use the <header> tag for introductory content and navigation links.
- Use the <footer> tag for information about the author, copyright information, etc.
- Use the <nav> tag for major navigational blocks in your webpage.
- Use the <article> tag for self-contained content like a blog post or a news story.

3. Code Examples

Example 1:

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <header>
    <nav>
      <a href="#">Home</a> |
      <a href="#">About</a> |
      <a href="#">Contact</a>
    </nav>
  </header>
  <main>
    <article>
      <h1>Welcome to my website</h1>
      <p>This is my first website built using semantic HTML.</p>
    </article>
  </main>
  <footer>
    <p>Copyright &copy; 2022 My First Website</p>
  </footer>
</body>
</html>

In this example, we have created a simple webpage layout with a header, main content area, and a footer. The header contains a navigation menu, the main tag wraps around the main content of the webpage, and the footer contains copyright information.

4. Summary

In this tutorial, we have learned the importance of semantic HTML and how to use semantic tags to structure our HTML code. The next step is to apply these concepts in your projects and explore more about HTML5 semantic tags.

Additional Resources:
- HTML5 Semantic Elements - W3Schools
- Semantic HTML - MDN Web Docs

5. Practice Exercises

Exercise 1: Create a webpage layout for a personal blog using semantic HTML tags.

Exercise 2: Update the layout you created in Exercise 1 by adding a sidebar with links to recent posts. Use the <aside> tag for the sidebar.

Exercise 3: Create a webpage layout for a news website. It should have a header, main section with news articles, a sidebar for trending news, and a footer.

Solutions:
While there are many ways to solve these exercises, the key is to make use of semantic HTML tags appropriately. The header should contain navigation links, the main section should contain the main content of your webpage, the aside tag should be used for content that is indirectly related to the main content, and the footer should contain information like author details, copyright information, etc.

Tips for further practice: Try to use more semantic tags like <figure>, <figcaption>, <section>, <time>, etc. in your layouts.