Meta Tag SEO

6/8 HTML semantic tags for SEO（html5 seo tags） - How to Use HTML5 Semantic Tags to Improve Your SEO?

Kevin Li
by Kevin Li 5:31 PM



Before the introduction of HTML5 elements, we mostly used div tags to split HTML code into separate components, and then we used classes and ids to further specify those components. Each webmaster specified the components in their own custom way, and as such, it ended up being a bit of a mess, and a challenge for search engines to understand what was on each page.


With the introduction of semantic HTML5 elements, we’ve got a set of intuitive tags, each describing a separate page component. So, instead of tagging our content with a bunch of confusing divs, we now have a way of describing the components in an easy-to-understand, standardized way.


Search engines have always been madly in love with HTML since the very beginning, mainly because HTML was designed for well-structured semantic content forming the page’s core. As such, it helps search engines a great deal in finding where to find style sheets, scripts, images, videos, and many more sections of a page or piece of content.

The biggest problem was that developers often used their own unique ways when it came to defining different sections on pages, which made it almost impossible (okay, really difficult) for search engines to identify the desired content on a website.

With the introduction of HTML5, new semantic elements have been added to improve the understanding of web pages (both for developers and browsers) and have replaced elements like <div> or <span> that where non-semantic.

Even though initially, HTML5 received mixed reviews from developers, being deemed as “too complicated”, the time has passed and it’s clear now that its semantic elements and other features can greatly benefit websites and SEO efforts giving both browsers and users what they’re looking for.


HTML semantic tags for SEO（html5 SEO tags）

HTML5 SEMANTIC ELEMENTS AND WHY SHOULD YOU START USING THEM

These are the elements that help in defining different web page parts:

  • <header> – The element that defines the header area of the section or document
  • <main> – Defining the main part (content) of the given document not including navigation, footer, or other global items
  • <nav> – Used in defining navigation links
  • <article> – A piece of self-contained content within a document, like a comment, blog posts, and such
  • <section> – Used to define sections within the given document
  • <aside> – Used to define the content that can be found aside from the main content.
  • <figure> – Defining self-contained, independent content like videos, photos, or illustrations
  • <mark> – Used to help browsers identify important content or something that is highlighted
  • <figcaption> – The element which helps identify the caption for the figure
  • <hgroup> – Aids in identifying a group of header tags
  • <footer> – Used to help identify the footer area
  • <time> – Helps defining time



Post a Comment

0 Comments