HTML - Let's Talk About Semantics

Salam and hello, folks!

Today, let's discuss semantics. So, what's about it?

Semantics

So, what is the dictionary meaning of semantics?

Semantics is the study of meaning, reference, or truth.

Then, how about in the computer science field?

Semantics is the field concerned with the rigorous mathematical study of the meaning of programming languages.

So, put it easy, semantics is a way to understand easily what programming syntax means, so your code will be easily read, or the right word is "more verbose".

Is it just about you able to read the code? Let's proceed with the discussion.

The screen readers

Technology in general, and specifically the web, is not just about doing the products, but beyond that. Delivering a quality web means that more and more audiences can benefit from it, whether they are visually challenged or not, or anything that makes the experience of visiting the web difficult. At least, that is one of definitions that I come up with throughout my years (though it is still little compared to other "lions" in the web development industry).

To assist these kinds of difficulties, semantics are some aspects that should be highlighted, so screen readers can recognise each element inside your HTML, and people that require accessibilities can benefit from it.

Crawlers

Other than that, there is an entity that will crawl through your page and see what your page features. Other than all your Meta tags (oooops.. I mean, meta tags), crawlers will crawl through your DOM and see what is inside your content and try to classify based on the content.

That is why semantics is important if you really prioritise your Search Engine Optimisation (SEO), so crawlers can keep their eyes on your pages and serve them to the deserving audience.

Verbosity

And of course, for developer experience, verbosity is one of the scoring points so your page can be easily maintained. Providing the elements gives a contextual meaning, the readers, whether the technical or non-technical ones, can distinguish which part of your code needs to pay attention to when the time comes.

Okay, so my point is - semantics is quite important for these aspects:

• Accessibility
• Verbosity
• SEO

Maybe there are a lot more reasons for semantics, so put in the comments below what you think about semantics 👇

So..... onto the HTML!

Semantics in HTML

So, what about semantics in HTML? All the elements in HTML do give meaning to what you want to put inside it, whether it contains navigations, or information, or maybe emphasising the content. It's up to you of course, but improving your HTML elements does give a lot of benefit to the audience 🧑 and the robot 🤖.

Let's dive in.

Text

<p>Hello DEVto!<p>

As simple as paragraph element <p>, displaying text to the user. So to tell that the tag is a title, you may use class or style to indicate that is the title, sure. Let's do just that.

<p class="title">Hello DEVto!</p>

Is this a good practice? Well, it is subjective whether it is right or wrong, but to help screen readers and crawlers to understand your content, you can use several other tags that can assist you there, and improve the styling using those tags.

Headings (title) => <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Text highlights => <strong>, <em>, <small>, <sub>, <sup>, <abbr>, <code>
Text formatting only => <b>, <i>

You can actually wrap your text without any of these tags, but I would not recommend that practice, because screen readers won't know what those text contexts refer to.

Not recommended
<div>Hello DEVto</div>

Instead,
<div>
  <p>Hello DEVto</p>
</div>

Containers

<div>
  <p>Hello DEVto</p>
</div>

I have seen a lot of pages that use div elements, and that is okay. Of course, div is a way to containerise your content, but oftentimes, I see the div element is abused, especially used for button 💀. Not exactly abused, but it is better to give it meaningful context.

For example, for navigation, you can use the nav element. You can put all your navigation content inside nav, so your crawlers understand that the division represents your page navigation or any navigation context you intend to.

Navigation => <nav>
Layouts => <main>, <section>, <article>, <header>, <footer>
Contexts => <mark>, <figure>, <figcaption>, <summary>, <details>, <aside>, <address>

Forms

Most of the websites nowadays required input from users, whether for newsletters, or registration, or login, or the exact thing I did so this article can be read by you!

Usually, for simple single input, I can just put <input>. But for more than two inputs, I will use <form> for the purpose.

<form>
  For simple input => <input>
  For more diverse options => <select><option>, <textarea>, <meter>, <datalist>
  For labeling => <label>, <legend>, <progress>
  For actions => <button>
</form>

But heed my advice. NEVER USE DIV FOR BUTTONS for screen won't detect it for keyboard users. This is what I am talking about regarding people abusing <div> for buttons.

Other existing semantic elements

Well, of course, there are other elements that already have contexts within.

<table> - <thead>:<th>, <tbody>:<tr>, <td>
<ul> and <ol> for list, <dl> for more advanced list

Well, there are actually a rough total of 100 semantic elements you can use to give more meaning of course!

Is semantic a must?

Well, I wouldn't say you have to, but try to improve your content, so others can benefit from it, and might as well help you in future for your page discovery! The reason behind my writing today is about encouraging web developers to pay attention to semantics.

You might be thinking "There are a lot of tags that I have to know then". Well, HTML elements are interchangeable, which means that changing from div to main doesn't break any of your page content, as long as you know which context it belongs to, so improvisation can even come later, given if you still have the motivation to go to your code and replace it 🤨.

My personal approach

Oftentimes, you want to make your design system first before creating your content. You can standardise your content globally using these semantic tags. For example, in my CSS sheet;

h1 { font-size: 3rem; }
h2 { font-size: 2.75rem; }

h1, h2, h3 { font-weight: 700; padding: 1rem 0px 0.5rem; }

section { padding: 1rem 0.5rem; }

And then, later you want to develop more complex components, so then you will utilise class.

<section class="blog-card">

.blog-card { border-radius: 4px; }

Or with Tailwind utilities

.blog-card {
  @apply bg-blue-500;
}

With these, your design system will be organised, standardised, and easy to debug later on. Well, it is up to the developer in which they prefer.

What next after semantics?

If you are into semantics, you might be interested in ARIA standards in HTML, where it really boost experience in screen reading and accessibility.

Well, what is your opinion in semantics? Write what you think below, and keep the discussion healthy. A meme or two should be okay for a little bit fun, but keep it in context.

That's it for this week. And for that, have some rest, and peace be upon ya!