256 Kilobytes

[HTML5] How These Off-Brand Divs Help With SEO

Articles in Web Development | By Louis J. V. Cicalese

Published | Last Update

An Overview on How Semantic Elements are used for web-crawling and ranking

379 views, 0 RAMs, and 0 comments

Off-Brand Divs Can Help Robots Be Smart Like You and Me

As you probably know, a <div> tag acts purely as a container that holds other page elements and organizes the HTML document into distinct sections. They allow the developer to keep different areas of the page separate, and are perfect for combining with class and ID selectors to style entire sections of the document at once.

Though <div> tags seem perfectly adequate for structuring sections of documents, HTML5 introduced semantic elements -- such as <article>, <aside>, and many others -- that serve essentially the same purpose. At a glance, it might seem that these semantic elements serve only to overcomplicate things.

What is the point of having <div> tags and semantic elements when they have the exact same effect on the appearance of the webpage? Mainly, semantic elements help robots (see image below) understand your page, which in turn helps you.

What are Semantic Elements Good For Anyway?

Becoming Familiar with Semantic Elements

Semantic elements are essentially <div> tags that also provide additional semantic information to the browser (and to developers). Here is a list of some of the more commonly used semantic elements introduced in HTML5:

  • <header> - Specifies a header section for a document, not to be confused with headings tags such as <h1>, <h2>, and so on.
  • <footer> - Specifies a footer for a document or section; fairly self-explanatory.
  • <nav> - Defines a set of navigation links.
  • <article> - Specifies self-contained content.
  • <section> - a thematic grouping of content. It is common to find <section> tags nested inside of <article> tags, and vice versa.
  • <aside> - Defines content to the side of the main content, like a sidebar.
  • <figure> - Typically used to group an image with an explanation or caption.
  • <figcaption> - Usually nested inside of a <figure> tag and used to describe an <img> tag.

For people who have been writing making websites since HTML4 or earlier, semantic elements might come across as pointless, off-brand <div> tags. While semantic elements do essentially fulfill the same function as <div> tags -- they organize your page and act as a container for other elements, without altering the presentation of these in any way -- they also standardize naming conventions, which efficiently communicates the structure of your page to a browser.

Semantic Elements are Good for SEO

Though <div> tags work fine when it comes to stylizing a page for the human eye, using semantic elements makes it much easier for browsers and search engines to perform automated processes on the document. Semantic elements allow for clean markup, which makes it easier for Google Bots to crawl and index a page.

From a person’s perspective, a web page will look the same whether the HTML contains mostly <div> tags or semantic elements. However, a web-crawler (see image below) cannot easily tell which part of a document is which. It might be able to guess based off of context clues, but it won’t really know. For example, it could probably guess that a <ul> containing a bunch of internal is some kind of navigation menu, but if you use the <nav> semantic element then it will know for sure.

Though Google does not generally explicitly state how specific factors affect SEO, there are many reasons to believe that using semantic elements is a benefit. For one, it is already generally accepted that previously existing semantic elements (such as h1, title, and so on) form the basis of on-page SEO. It stands to reason that Google would take into account these new, purely semantic elements as well.

Google generally suggests that developers make their sites easily accessible in order to improve rankings, and using semantic elements surely makes pages more accessible. In any case, it is possible that semantic elements will have even more of a role in SEO moving forward, which means it is a good idea to begin implementing them into your web pages now.

Related Articles

Download more RAM. 🐏 ⨉ 0Posted by Louis J. V. Cicalese 1 year ago

Edit History

• [2019-03-06 18:18 PST] Louis J. V. Cicalese (1 year ago)
• [2019-03-06 18:18 PST] Louis J. V. Cicalese (1 year ago)
• [2019-03-06 18:18 PST] Louis J. V. Cicalese (1 year ago)
🕓 Posted at 06 March, 2019 18:18 PM PST

Profile Photo - Louis J. V. CicaleseLouis J. V. CicaleseAuthor

Post a New Comment

Do you like having a good time?

Register an Account

You can also login to an existing account or reset your password. All use of this site is subject to the terms of service and privacy policy.

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account