This post exists because in the last weeks I've been teaching the basics of HTML and I realized that when you're teaching or trying to explain something to others, you learn more. Also, seeing people trying to get into the world of web development and that I can help in that process really makes me happy 😄.

The first thing I did when I started teaching my friends was going over the basics and look for ways of teaching them. I saw some videos and read material online (thanks mozilla and frontendmasters 🎉👏👏). HTML itself is not a complex language, so I focused on trying to teach the most important part for me: the semantics of the elements.

HTML is about structure, and describing our content in the best way possible.

What does it mean when we say semantics?

Semantics means knowing the meaning of each HTML element and understanding what we want to communicate and how is the best way to do it.

Elements like div or a span are generic containers without any special meaning nor semantics.

One important thing when we are creating our documents is thinking several times which is the best element to describe what we want to display. Today, thanks to HTML5, we have a lot of new semantic elements that we can benefit from.

With the rise of HTML5 we got several new elements that help us to better describe our content: elements like header, footer and main describe our layout and are widely used today. But we can go further, don't always use div, instead use section or article, don't always use img instead use figure and picture, use strong and em instead of b or i...

All of this not only helps us get the most out of our HTML and really understand while we're creating it, but also search engines can find our content and accessibility tools can provide a better experience. So next I create a component I'll be asking myself twice what I want to describe and communicate, and which is the best element to it.