Semantic HTML, a term many web developers have encountered but they might not be absolutely sure about the meaning. It is often brought up during technical interviews to challenge our ability to explain this concept. Let's dig deeper to discover what it is and why we should aim to use it in our everyday work.

Many HTML elements have semantic meaning. It means that the element itself has some information about the type of content placed between the opening and closing tags.

Often, HTML is one of the first technologies web developers learn. Once we start focusing more on JavaScript and making the UI fun, it's easy to slip and start filling our templates with <div>s, maybe some occasional <span>s. That's unfortunate because semantic HTML can create visually pleasing templates that are fun to work with.

Semantic HTML (sometimes called POSH, or Plain Old Semantic HTML) is not an empty phrase, it is an important concept every developer should be aware of. Better yet, we should be applying it in our everyday lives. There are reasons:

• Semantic HTML helps other developers read our code
  Semantic HTML gives structure to our code and helps provide context for what we were aiming for when writing the code in the first place. Is this piece of code meant to be navigation? If the HTML tag says <nav> then the intention is clear.

• Semantic HTML improves accessibility of our site
  Screen readers are able to identify semantic tags and present them accordingly to the user. Screen readers have built-in shortcuts for navigation that the user can use for example to read only the headings. If our headings are properly coded, the user experience of a blind user may be very similar to a sighted user skimming through the page. If the headings are not coded properly, the user might need to listen to the content of the whole page with no clear structure.

• Semantic HTML improves SEO
  Who doesn't want to have their site easily searchable, right? If we want our website visible to the search engines, we need to cooperate with them. The easiest way is to implement semantic HMTL. It shows the engine what the title of the page is, what the headings are etc. Similar to a screen reader, the engine is able to parse semantic HTML way easier than a bunch of <div>s.

There are roughly 100 semantic HTML tags for our disposal. Let's start using them properly and improve both the developer and the user experience. We can start by simply typing <h1>, <section>, <nav>, <button>, and <a>.

Sources of images:
Title Photo by Miguel Á. Padriñán from Pexels
medium.com/@ajaezokingsley/semantic-html-an..