What are the differences of Semantic tags to other HTML tags?

Most Semantic HTML tags are pretty straightforward but others are confusing…

For example: don’t “body” and “main” target the same thing? isn’t it the same meaning in the context of coding? same could be said for “foot” and “footer”. What is the difference between those tags?

There are also context giving HTML tags inside of tables (thead, tfoot) are those also considered Semantic?

1 Like

hi! using the body tag will apply styling to all of the content on the page, where as using main will only apply the element marked as main in your HTML.

for example:

body { font-family: Helvetica }
will change all the font on the page to Helvetica (if there are no other overriding styles.) where as the following:

main { color:red; }

will only affect the content in the main element.

does that help?

1 Like

Hi lenthava01,

The main advantage typically in using semantic HTML tags is that it works better for people with accessibility issues and that it looks nicer and is easier to parse than using a bunch of divs to accomplish the same task.

To demonstrate the latter, consider these two files:

<html>
<head>
<body>
  <header>
    <nav>Logo and navigation links</nav>
  </header>
  <main> 
    Where the primary content of your website goes.
  </main>
  <footer>
    About us and FAQ link
  </footer>
</body>
</html>
<html>
<head />
<body>
  <div id="header">
    <div id="nav">
      Logo and navigation links
    </div>
  </div>
  <div id="main">
    Where the primary content of your website goes.
  </div>
  <div id="footer">
    About us and FAQ link
  </div>
</body>
</html>

The content of both websites would render identically, assuming you adjusted the CSS to work with them. However, which file is easier to parse from a glance? Which file would you rather work with?

Morever, the former file would work better for accessibility concerns, like a screen reader. See Landmark regions for reference.

4 Likes

Thank you for this extensive reply.
cheers!

Thanks for the reply!
kind regards!

Hi @lenthava01 ,
When you use an html tag which is meaningful for the type of data that it contains, you are helping search engines like Google or Bing to read and classify the information on your web page. Thus, the web page has more chances to appear in the top results of a related search.

Humans can see patterns like color, size and position. However, search engines’ web crawlers rely on plain-text. Therefore, from a web crawler’s perspective is better to use <h1>HTML Tutorial</h1> for the main heading of your web page instead of a semantically neutral tag like <span>HTML Tutorial</span>

Finally, if you doubt about the purpose-meaning of an html tag, you can check mozilla’s developers website. For example, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer

Good Luck!
Luis


1 Like

Thanks for the info.
Kind regards
lenthava01.