Ever wondered how search engines understand your website’s structure? Or why some parts of your text stand out while others don’t? The answer lies in semantic HTML5. In this blog, we’re going to dive into why semantic elements like <mark>, <strong>, and many others are not just about visual appeal, but they also give meaning to your content.
So, semantic HTML is all about using HTML tags that clearly define the purpose and meaning of the content they are associated with. Unlike non-semantic tags like <div> or <span> that are just for layout or styling, semantic tags give extra info about the type of content.
So it’s like, imagine you’re reading a newspaper. There’s the main headline, subheadings, paragraphs, quotes, and other important info. Each part has its own role that’s pretty easy to spot. Semantic HTML does the same thing for the web. It helps:
Let’s check out some commonly used semantic elements and how you can make the most of them:
The first one is the <mark> tag, which is used to mark or highlight relevant parts of text in a specific context. It’s like using a digital highlighter.
<p>I want to buy fruits like <mark>apples</mark>, oranges, and bananas.</p>In the example above, ‘apple’ is what we want to highlight, maybe because it’s the most important fruit or the one people are looking for.
The second one is the <strong> tag, which is used to show that its content is really important, serious, or urgent. It adds a strong emphasis.
<p>Don't forget to always <strong style="color: red;">save energy</strong> for the future.</p>The text inside <strong> will visually look bold, but more than that, it tells the browser and assistive technology that the part has significant meaning.
The third one is the <em> tag, which is used to emphasize a word or phrase, usually to change the meaning or intonation of a sentence.
<p>I can't believe that <em>really</em> happened!</p>By default, text in <em> will be displayed in italics, but the goal is to add verbal emphasis.
Next up, there’s the <cite> tag when you’re quoting a work like a book, song, movie, etc. Use the <cite> tag to show the title of that work.
<p>As it says in <cite>The Hitchhiker's Guide to the Galaxy</cite>, "Don't panic."</p>Next up, the <abbr> tag is used to define abbreviations or acronyms. You can add a title attribute to give the full version.
<p>I'm going to take an <abbr title="HyperText Markup Language">HTML</abbr> training next week.</p>When users hover their cursor over ‘HTML’, a tooltip will show ‘HyperText Markup Language’.
Lastly, there’s the <time> tag, which is used to specify a date or time. This is super helpful for events, blog posts, or any time-sensitive information.
<p>The meeting will take place on <time datetime="2025-07-25T10:00:00Z">Friday, July 25, 2025, at 5 PM WIB</time>.</p>The datetime attribute on the <time> tag gives a machine-readable date and time format.
So that’s it, using semantic HTML5 isn’t just about sticking to standards, it’s about building a better, more accessible, and more efficient web. By understanding and applying elements like <mark>, <strong>, and others, you’re not just creating visually stunning web pages, but also giving rich meaning and context to your content.
