Go back Solution

1.1 Semantic HTML

Introduction

Web standards are rules and guidelines used to promote code consistency when building a web page. With those, anyone (people and robots) can access and understand the content of a webpage in a meaningful way.

One of the Web standards consists in writing semantic HTML markup: Go beyond <div /> and <span> (non-semantic elements) and replace them by semantic elements. Use them where it makes sense: to describe sections, text, media, and so on. This way, we are not only writing readable code, but we are also making the web a more accessible place.

Exercise

In the exercise page, there's a layout implemented that looks good but the semantics are a mess.

People who read this page through an Assistive Technology (AT), for example, a SR (screen reader), will struggle to understand and interact with the page.

🎯 Goal: Improve the HTML by using semantic elements.

Tip: For now, we won't use a SR. Instead, we'll use an analogy. Let's imagine the page as if it was a book: plain old text. Remove the page styles and improve the HTML until this book makes sense to you.

Bonus

1. Order of content

In a book, the title is always the first thing to show up. However, on this page, the tag "On Sale" appears before the title.

🎯 Goal: reorder the HTML elements so that the title and the tag appear in the correct order, but without changing the design!

🍀 Toggle CSS hint #1

Perhaps some flexbox trick can help us to reverse the order visually.

🍀 Toggle CSS hint #2

With CSS flexbox there are 2 ways to display the tag before the title:

2. Missing content

We can visually understand that the plant is on sale ($40 to $30). However, if we see the page naked (without styles), it doesn't make much sense. We see two price tags, but we don't know the difference between them. Some people may not even understand that's the plant price.

🎯 Goal: Add the missing words to be visible when the page is displayed without styles.

<span class="visually-hidden">Price:</span>

Hint: What CSS will you use at .visually-hidden? There are better ways to hide content than using display: none;. Check how to visually hide content.

Further reading

WCAG Success Criterion

Exercise takeaways

(After the exercise) Reveal takeaways