[HTML5] How These Off-Brand Divs Help With SEO
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.
- [HTML5] Presentational vs Semantic Elements
- Whatever Happened to Microsoft Silverlight? | Press F to Pay Respects
- What is the Wayback Machine? | How the Internet Archive uses Web Crawlers to Preserve Internet History
- Search No Further... 7+ Search Engines That Are Worth Checking Out
- What is DuckDuckGo and What Advantages Does it Have Over Other Search Engines?
- [Solved] CKEditor Autosave Draft Functionality - 1.4KB, No Plugin
- How to Make a Website: A Simple Guide for Complete Beginners
- 5 Tasks You Didn't Know Could be Done from the Developer Console
- The Ultimate WordPress Performance Resource
- How much is my website worth?
- GeneratePress: Total overview of what it can offer and why it's the only theme I use.
- DreamHost: Review, FAQ, and Affiliate Program
- Get These Dependencies Off My Lawn: 5 Tasks You Didn't Know Could be Done with Pure HTML and CSS
- How to Parse a User Agent in PHP with Minimal Effort
- Best PHP Frameworks
Post a New Comment
Do you like having a good time?
Register an Account
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.
Argue with People on the Internet
Use your account to explain why people are wrong on the Internet forum.
Vandalize the Wiki
Or don't. I'm not your dad.
Ask and/or Answer Questions
If someone asks a terrible question, post a LMGTFY link.
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.