Go Back

1.2 Semantic HTML

Introduction

Web standards are rules and guidelines used to promote code consistency when building a web page. We should follow these standards so that anyone (people and robots) can access and understand the content of a webpage properly and 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 follows appearance guidelines! However, under the hood, if we see the page naked (without CSS styles), it doesn't make much sense. People who read this page through an Assistive Technology (AT) (for example, a Screen Reader) won't understand it properly.

🎯 Goal: Improve the HTML by using semantic elements.

Hint: You can start by removing the styles and try to read the page as if it was a book: plain old text. Improve the HTML until this book makes sense to you.

Bonus

1. Order of content

In a book usually the title is always the first thing to show up. However, in 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!

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

2. Missing content

In this page 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 2 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;.

Notes

Did you know? There's a global CSS naked day on April 9. In this day, developers release their websites without styles, showing only the HTML behind it. The idea behind this event is to promote Web Standards. This includes proper use of HTML, semantic markup, a good hierarchy structure, and of course, a good old word play.