What is Semantic HTML? 🀨

Cover Image for What is Semantic HTML? 🀨

What's goooooood, coders! 😎 I've been crazy busy with homework for my Computer Science classes, but I wanted to talk about an important topic I've come across in my self-taught frontend journey: semantic HTML! 😍😍😍

Table of Contents 🀩

What exactly is 'Semantic HTML'? 🀯

Good question πŸ˜‰ let me break it down for ya: to write semantic HTML is to use elements in the correct way!

A semantic element clearly describes its content (between the tags) to both the browser AND the developer. 🚫 Simply using div's for your header, navbar, footer, sections, etc. is not good practice! 🚫

Let me elaborate further: when creating a header for your website/portfolio, some programmers might write them as: <div class='header> , <div id='header'>, <div class='head'> or simply <div>. (Or you can just use <header> πŸ˜‰ ).

There are so many ways you could create a header element, and it does depend on the personal preference on the programmer...😜 BUT by creating a standard semantic element that's consistent throughout your entire project, it makes your code more readable and helps with debugging!

More Easily Readable Code w/ Semantic HTML πŸ˜‹

Take a look at the block of code below ⬇️

Notice all the <div>'s?

<div id="header"></div>
<div class="section">
    <div class="article">
        <div class="figure">
            <div class="figcaption"></div>
<div id="footer"></div>

Now take a look at this block of code below ⬇️


Do you see how I replaced all the <div>'s from the first block of code to their corresponding semantic tag? 🧐

Look how much easier the 2nd block of code is to read! 😎 This is a super small example, but as a programmer you could be reading through hundreds/thousands lines of code... the easier it is to read and understand that code, the easier it makes your job!

➑️ For example: using the tag <div>, there are multiple ways to create a header element, versus just using <header> consistently every time! Semantic HTML elements === consistent code 😍

Increase Accessibility with Semantic HTML Tags🀯

More easily accessible webpage for your users AND search engines! 😎

For sighted users, it’s easy to identify each part of a website. Form elements, headers, footers, and menus are all visually apparent.

BUT, for bots like Google’s spiders (before you make a Google search, these web crawlers gather information from hundreds of billions of webpages and organize it in the Search index), or a screen reader, these visual semantics aren’t as obvious.

By defining block-level elements with semantic elements, we can communicate to the search engines & screen readers what the elements are, so they can render them appropriately! πŸ˜› Cool, right?

➑️ Here's an example: we don't declare italic elements with an <i> for italics anymore, (which is a purely visual change, without intrinsic meaning) but with an <em>, for emphasize.

On the screen, the browser will display text wrapped in an <em> in italics. But, on an audio device for the visually impaired, the text will be pronounced with a corresponding emphasis, just like a friend would say it. 😊❀️

Using Semantic HTML Tags Correctly 🀩

So, now that you know the basics of Semantic HTML tags, I bet you're ready to see them in action 😎 Below is a cheatsheet I've created to compare an incorrect HTML layout design with the semantically correct layout design:


Which one reminds you of your code? 😏

Now, let's take a look at an example of a semantically correct webpage layout ⬇️


I bet you're thinking "But, will I know when to use which semantic HTML tag to use and when?". Well, my friend, I have THE GOLDEN FLOWCHART! Check it out below ⬇️


YOU'RE DONE! πŸ₯³πŸ₯³πŸ₯³

I'll be creating more Hashnode blog posts about frontend development as I go through my self-taught frontend journey --if you enjoyed this post, follow me here on Hashnode and on Twitter! ❀️❀️ also feel free to save these cheat sheets in this article! I've made them for anyone who needs them πŸ₯°πŸ₯°

DM me on Twitter or leave a comment if you get confused about any of these! 😜