Webbo3 Frontend Development · Month 1 · Lesson 6

Semantic HTML: Writing Markup That Means Something

Learn to restructure a page using semantic HTML header, nav, main, section and article tags instead of divs for better accessibility.

When you start building web pages, it's easy to get into the habit of using the div tag for everything. You might have a navigation menu that's a div, a header that's a div, and a footer that's a div. But as your pages get more complex, this can start to get messy. It's hard to look at your code and understand what's going on, and it's even harder for someone else to read and understand. You might find yourself adding lots of comments to explain what each div is for, or using complicated class names to try to make it clearer. By the end of this lesson, you'll be able to restructure a page using semantic HTML tags instead of a pile of divs. This means you'll be able to use tags like header, nav, and footer to give meaning to the different parts of your page. You'll be able to look at your code and immediately understand what's going on, and you'll be able to explain it to someone else. You'll also be able to use tags like section, article, and aside to break up your content into logical chunks. This will make your code easier to read and understand, and it will also help search engines and other tools understand the structure of your page. Using semantic HTML tags is an important part of building accessible and maintainable web pages. It's not just about making your code look pretty - it's about making it clear and understandable, both for humans and for computers. By the end of this lesson, you'll have a solid understanding of how to use semantic HTML tags to structure your pages, and you'll be able to apply this knowledge to your own projects. You'll be able to take a messy, complicated page and turn it into a clean, organized, and easy-to-understand piece of code.

What you need before starting

Everything from the previous lesson, and the project folder you have been building in. Work along in your own editor as you read — this lesson is written to be typed, not skimmed.

What Semantic Means in Practice

Defining Semantic HTML

Semantic HTML refers to the use of HTML elements that provide meaning to the structure of a web page, rather than just providing a visual representation. In other words, semantic HTML is about using the right HTML elements to convey the purpose of each part of a web page. This approach helps to make web pages more accessible, maintainable, and efficient.

For example, instead of using a generic div element to represent a header, you would use the header element. This tells the browser, screen readers, and search engines that this section of the page is the header.

Example of Semantic HTML

<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>
</header>

In this example, the header element is used to define the header section of the page, the h1 element is used to define the main heading, and the nav element is used to define the navigation menu. The ul and li elements are used to define the list of links.

A common mistake beginners make is using the wrong element for the job. For example, using a h2 element as a container instead of a div element. To spot this mistake, look for elements that are being used in a way that doesn't match their intended purpose. In this case, if you see a h2 element that doesn't contain a heading, it's likely being used incorrectly.

How Semantic HTML Affects SEO

Search Engine Understanding

Search engines like Google use semantic HTML to understand the structure and content of a web page. By using the right HTML elements, you can help search engines to better understand the meaning and context of your content, which can improve your page's visibility and ranking in search results.

For example, if you use the article element to define a block of content, search engines can recognize it as a self-contained piece of content and may display it as a rich snippet in search results.

Improving Accessibility

Semantic HTML also improves the accessibility of your web page. Screen readers and other assistive technologies can use the semantic meaning of HTML elements to provide a better experience for users with disabilities. For example, if you use the button element to define a button, screen readers can announce it as a button and provide the correct functionality.

By using semantic HTML, you can ensure that your web page is accessible to as many users as possible, which can also improve your search engine ranking. A common mistake beginners make is not testing their web page for accessibility. To avoid this, make sure to test your page with different screen readers and devices to ensure that it is accessible to all users.

<article>
  <h2>My Blog Post</h2>
  <p>This is my blog post.</p>
</article>

In this example, the article element is used to define a self-contained piece of content, which can help search engines to recognize it as a separate entity and may display it as a rich snippet in search results.

Semantic HTML Elements

Introduction to Semantic Elements

Semantic HTML elements are used to define the structure and meaning of a web page. They provide a way to describe the content of a page in a way that is understandable by both humans and machines. The most common semantic elements are: <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>.

A common mistake beginners make is using <div> elements for everything, without considering the meaning of the content. This is often referred to as "div soup".

Using Semantic Elements

The <header> element is used to define the header section of a page, which typically includes the logo, navigation, and other introductory content. The <nav> element is used to define a section of navigation links. The <main> element is used to define the main content of a page.

A <section> element is used to define a self-contained section of related content, such as a chapter or a news article. An <article> element is used to define an independent piece of content, such as a blog post or a news article. An <aside> element is used to define content that is related to the main content, but not essential to it. The <footer> element is used to define the footer section of a page, which typically includes copyright information, contact details, and other secondary content.

<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>
<main>
  <section>
    <h1>Introduction to Semantic HTML</h1>
    <p>Semantic HTML elements are used to define the structure and meaning of a web page.</p>
  </section>
  <article>
    <h2>The Benefits of Semantic HTML</h2>
    <p>Using semantic HTML elements provides a way to describe the content of a page in a way that is understandable by both humans and machines.</p>
  </article>
  <aside>
    <p>This is a related but non-essential piece of content.</p>
  </aside>
</main>
<footer>
  <p>© 2023 Webbo3 Academy</p>
</footer>

In this example, the <header> element defines the header section of the page, which includes the navigation links. The <main> element defines the main content of the page, which includes a <section> element, an <article> element, and an <aside> element. The <footer> element defines the footer section of the page, which includes copyright information.

Screen Reader Navigation

How Screen Readers Move Through a Page

Screen readers are software applications that read out the content of a web page to users who are blind or have low vision. When a screen reader moves through a page, it uses the semantic HTML elements to understand the structure and meaning of the content.

When a screen reader encounters a <header> element, it will announce that it is entering the header section of the page. When it encounters a <nav> element, it will announce that it is entering a navigation section. When it encounters a <main> element, it will announce that it is entering the main content of the page.

A common mistake beginners make is not using semantic elements, which can make it difficult for screen readers to understand the structure and meaning of the content. This can result in a poor user experience for users who rely on screen readers.

To spot this mistake, look for pages that use only <div> elements to define the structure of the content. This is a sign that the page is not using semantic HTML elements, and may not be accessible to users who rely on screen readers.

By using semantic HTML elements, developers can create pages that are more accessible to users with disabilities, and that provide a better user experience for all users.

• Use <header> to define the header section of a page
• Use <nav> to define a section of navigation links
• Use <main> to define the main content of a page
• Use <section> to define a self-contained section of related content
• Use <article> to define an independent piece of content
• Use <aside> to define content that is related to the main content, but not essential to it
• Use <footer> to define the footer section of a page

The Difference Between <section> and <article>

Understanding the Purpose of Each Element

The <section> and <article> elements are often confused with one another, but they serve distinct purposes. A <section> is a generic section of related content, whereas an <article> is an independent piece of content that can stand alone. Think of an <article> as a self-contained piece of writing, such as a blog post or a news story, that can be distributed or syndicated independently.

A common mistake beginners make is using <section> for everything, without considering whether the content could stand alone. To spot this mistake, ask yourself: "Could this piece of content be taken out of the current page and still make sense on its own?" If the answer is yes, it's likely an <article>.

Example Code: Using <section> and <article> Correctly

<main>
  <section>
    <h2>About Our Company</h2>
    <p>We are a team of experts in our field...</p>
  </section>
  <article>
    <h2>Our Latest News</h2>
    <p>We are proud to announce our latest achievement...</p>
  </article>
</main>

In this example, the "About Our Company" section is a generic piece of content that is related to the main content of the page, so it's wrapped in a <section> element. The "Our Latest News" section, on the other hand, is a self-contained piece of content that could be taken out of the page and still make sense, so it's wrapped in an <article> element.

The One-

-Per-Page Rule

Why You Should Only Have One <main> Element

The <main> element represents the primary content of a document, and it's essential to have only one <main> element per page. Having multiple <main> elements can confuse screen readers and other assistive technologies, which can lead to accessibility issues.

A common mistake beginners make is creating multiple <main> elements for different sections of the page. To spot this mistake, look for multiple <main> elements in your code and ask yourself: "Do I really need multiple <main> elements, or can I use a single <main> element and nest other elements inside it?"

Example Code: Using a Single <main> Element

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>Welcome to Our Website</h2>
      <p>We are a team of experts in our field...</p>
    </section>
    <article>
      <h2>Our Latest News</h2>
      <p>We are proud to announce our latest achievement...</p>
    </article>
  </main>
  <footer>
    <p>Copyright 2023 Our Company</p>
  </footer>
</body>

In this example, we have a single <main> element that contains all the primary content of the page. The and <footer> elements are separate and do not contain any primary content. This structure is clear and easy to follow, and it ensures that our page is accessible to all users.

Do this now

It's time to put semantic HTML into practice. This exercise should take around 20-30 minutes, depending on the size of your About Me page. Follow these steps:

1. Open your About Me page in a code editor, such as Visual Studio Code or Sublime Text. Make sure the file is named something like "about-me.html" for easy identification.
2. Look for every div element on the page and ask yourself what it represents. Is it a header, a navigation menu, a main content area, or a footer?
3. Replace each div with the correct semantic element. For example, if a div contains a logo and a navigation menu, replace it with a header element. If a div contains the main content of the page, replace it with a main element.
4. Save your changes and open the page in a web browser to ensure everything still looks correct.
5. Now, try reading the page out loud, but only follow the landmarks. Start at the top of the page and read the content of each semantic element in order. This will help you understand how screen readers and other assistive technologies navigate your page.

This exercise will help you understand the importance of using semantic HTML and how it can improve the accessibility of your web pages.

How to know you got it right

Here's a short checklist to verify you've completed the exercise correctly:

• You have replaced most div elements with semantic elements like header, nav, main, and footer.
• Your page still looks correct in a web browser.
• You can read the page out loud, following the landmarks, and it makes sense.

Common mistakes

• Using <div> for everything: This looks like
  HTMLExample and result

  <div>Hello, world!</div>

  Result
  . It happens because beginners don't know the purpose of other tags. The fix is to use the correct tag, like
  HTMLExample and result

  <h1>Hello, world!</h1>

  Result
  for headings.
• Not closing tags: This looks like
  HTMLExample and result

  <p>Hello, world!

  Result
  . It happens due to carelessness. The fix is to always close tags, like
  HTMLExample and result

  <p>Hello, world!</p>

  Result
  .
• Not nesting tags correctly: This looks like
  HTMLExample and result

  <p><span>Hello, </p>world!</span>

  Result
  . It happens because beginners don't understand the concept of nesting. The fix is to nest tags correctly, like
  HTMLExample and result

  <p><span>Hello, world!</span></p>

  Result
  .
• Using tags for styling: This looks like
  HTMLExample and result

  <b>Hello, world!</b>

  Result
  for bold text. It happens because beginners confuse HTML with CSS. The fix is to use CSS for styling, like
  HTMLExample and result

  <p>Hello, world!</p>

  Result
  or better, in a separate CSS file.

Questions students ask

1. What is the difference between <div> and <span>?

   The <div> tag is a block-level element, while the <span> tag is an inline element.

2. Can I use <table> for layout?

   No, use <table> for tabular data only, and CSS for layout.

3. Is it necessary to use semantic HTML?

   Yes, semantic HTML makes your website accessible and easier to maintain, as it provides meaning to the structure of your content.

Next lesson: Forms and Tables In Depth.