Andrew Shipp
Jun 25, 2019 | 17 min read

We’re used to the fact that most of the work related to HTML is done by coders. But in no way does this mean that SEO pros shouldn’t have an understanding of the essential HTML tags. What tags and attributes matter when it comes to website promotion? Why do you need them and how should they be used?

We went through all the HTML tags there are and put together a list of the most important ones so that you can learn the ropes of HTML from scratch or simply refresh your memory.

Breaking down HTML basics

HTML is the standard markup language for documents that is used by web pages to tell browsers what elements it contains and which ones need to be displayed on the screen.

In layman’s terms, if you visit any web page as a human, you will see a marked-up text along with sections, subheadings, images and links. But keep in mind that for web browsers and search engines, web pages are no more than just a list of HTML code with specific elements.

HTML code example

Now, a website frame — a part of a page or browser window that shows content independent of its container — consists of three main tags that divide the whole HTML file into parts:

  • The <html> tag contains all of the website’s tags;
  • The <head> tag contains the <title>, <meta>, <link> and <script> tags that provide technical information on the website;
  • The <body> tag contains all of the website’s content intended for users (text, images, and so on). This is the content people see when they visit the page.

<html>
   <head>
      <title>
         Page title
      </title>
   </head>
   <body>
      Page content
   </body>
</html>

Now, we’ve already mentioned such terms as HTML element and tag, but there are also meta tags and attributes. It can get very confusing fast if you don’t know the difference.

So, let’s take a look at the basics terms we will be using throughout this post.

HTML element structure

An HTML code is made up of elements, each one of which can either be a tag or a meta tag. If a tag or a meta tag has any additional characteristics, then it is an attribute. Below you can see just what an HTML element consists of:

Structure of an HTML element

In this case, the HTML element is a header that’s indicated in the code with the <h1> start tag and </h1> end tag. Since the header has the align=“left” attribute, it’s aligned along the left side of the page.

Next up, the tag. It is the basic HTML entity that marks the start and end of each element. Moreover, the text that’s placed between tags is displayed according to the tag’s properties. For example, you can use the <u> tag to underline a part of text on a web page:

<u>SEO platform</u>

Tags can either be paired, as in they start and end (for example, <i>…</i>), or single (for example, <br> or <img>).

Now, a meta tag is a type of tag that provides web browsers and search engines with technical information on a web page, such as description, keywords, document encoding, bot indexing rules and so on.

Note that all meta tags must be placed inside the document’s <head> tag. An interesting fact is that while the description and keywords are meta tags, the title is a tag.

Here’s what a meta tag that’s placed inside a page’s <head> tag looks like:

<head>
   <meta charset="UTF-8"> 
   <meta name="description" content="In this post, you will find a list of the most useful HTML tags for SEO pros and learn how to use them correctly"> 
   <meta name="keywords" content="HTML, tags, SEO"> 
   <meta name="author" content="John Smith"> 
</head>

An attribute is an additional bit of information about a tag or meta tag. For example, earlier on in this post, we mentioned a tag that adds images to web pages. Well, its alt attribute displays an alternative image title if the image itself can’t be displayed for any reason (as shown below).

<img src="list.png" alt="list of online marketing websites" height="42" width="42">

Why users and search engines need tags

First off, Google uses meta tags with the goal of obtaining information on a page’s content and, ultimately, including it in the search results.

In fact, the snippet is the direct confirmation of this since it’s made up of the title tag and description meta tag. However, if the page’s title and description are set up incorrectly (misleading, overspammed with keywords, etc.), Google will replace them with more appropriate content.

Example of a title and description in the snippet

Google’s Search Console Help Center has a list of all the meta tags supported by the search giant.

The SEO value of meta tags lies in their ability to help both users and search engines understand what to expect to see on a page after clicking on it in the SERPs.

The catchier your snippet is, the more people will click it, visit your page, and, consequently, boost its ranking.

Additionally, tags help browsers read the page’s information. In turn, this allows texts, images and links to be displayed exactly as indicated in the HTML code. Can you imagine if users had to fish out the site’s content out of all the HTML code?

HTML tags useful in SEO

And now, on to the main course: HTML tags that come in handy in SEO.

With the help of tags, you can tell browsers and search engines everything they need to know in a language they can understand, like how the page should be treated, what it’s about and what its purpose is.

The only trick is knowing how to correctly say what you want to say — and that’s where having a clear understanding of tags comes into play. The bottom line is if you use them efficiently, your website promotion efforts will significantly benefit.

1) The <title> tag describes the page’s content

Being one of the most favorite tags of SEO pros, the <title> tag helps both users and search engines understand what a page is about.

The title isn’t only displayed in the snippet but in the browser tab as well, which helps users understand in a glance what pages are open in the browser. Some pages add titles with the aim of attracting the attention of users. For example, when you switch to another tab in the browser, the title text can change to something along the lines of “Come back, we miss you!”.

Adaptive page title example

The title is also displayed as the anchor text when you post links on social media. That is exactly why the title must be concise, informative, unique and interesting to attract potential readers.

Here’s what this looks like on Facebook:

Facebook post title

The title length should be around 60-70 characters since excessively long titles will be cut down to 600 pixels anyway. As a result, incomplete information will get pulled into the snippet.

Structure of the <title> tag

<title>Page title</title>

Interestingly enough, since the <title> element is a part of the <head> tag of the HTML file, it isn’t displayed on the page itself. Plus, there can only be one <title> tag in a single document that must be placed inside the <head> container.

2) The <meta> tag provides additional page information

Meta tags help browsers and search engines read service information about your page. Such information is placed inside the <head> container and includes the page description, keywords, indexing rules and other data. The following attributes are used in the <meta> element:

Attributes

  • Name attribute

This attribute indicates the meta tag you’re dealing with.

For example, the author value specifies the name of the person who authored the document, the description value indicates the document’s description, the keywords value provides a list of the page’s keywords, and the robots value lays out the page’s indexing rules.

<meta name="keywords" content="seo, HTML, tags">
<meta name="robots" content="noindex">
<meta name="description" content="Find out why HTML tags are important for SEO pros, which ones are the most important ones and how to use them correctly.">	 

There are a lot of opinions online about whether it’s necessary to include keywords in the meta tag or not. Sure, ten years ago this could have helped your promotional efforts, but not anymore. Google representatives have stated time and time again that the search giant doesn’t take keywords into account when ranking sites. On top of that, the same goes for Bing’s stance on keywords.

As for the meta description tag, it is displayed in the snippet. For this reason, don’t provide random page information in it or turn it into a list of keywords. Tell users why they should click your link, what they will see on the page and what’s in it for them. Instead of focusing on keywords, focus on the description’s value and relevance for the users. The recommended length of the description is 70-200 characters, which is 400 to 930 pixels.

The meta robots tag is responsible for scanning the document in its entirety, and allows you to tell search engine crawlers what content should and shouldn’t be indexed.

Here are a few examples of the commands that can be used in the meta robots tag (they can be used in combination):

— nofollow

Do not follow any links from the page, and also do not take link juice into account when calculating rankings.

— noindex

Do not index the content of the page.

— index, nofollow

Index the content of the page, but do not follow any links from the page.

  • Content attribute

This attribute works in combination with the name attribute and reveals the meaning of the meta tag to the search engine. Essentially, it specifies the content that contains the meta tag.

<meta name="description" content="Find out why HTML tags are important for SEO pros, which ones are the most important ones and how to use them correctly.">

  • Charset attribute

This attribute is responsible for document encoding. The encoding needs to be specified so that browsers can correctly display the text of the document on the page. If the tag with the encoding data contains an error, you will only see scrambled characters on the page.

The key here is not to use several coding standards (for example, ISO 8859-1 and UTF-8) in a single document as this will confuse browsers and search engines alike. In turn, this can lead to content indexing issues and incorrect display of text.

Nowadays, practically every search engine knows how to identify page encoding without external help. But, to be on the safe side, it’s best if you specify the encoding used on the page to avoid having issues. One of the most frequently use coding standards is UTF-8 that’s supported by all modern browsers and search engines.

<meta charset="utf-8">

  • HTTP-equiv attribute

This attribute displays the content of the HTTP header and is used by servers to collect additional page information. The HTTP header reveals a lot of data that is useful for SEO specialists, such as the server response status (200, 404 and so on) or the name of the server that sent the response. In addition, it can be used to specify the canonical URL for the requested page or block robots from indexing a page using the X-Robots-Tag HTTP header.

<meta http-equiv="expires" content="7 Apr 2019">

Structure

More than one meta tag can be used in the HTML code, but all of them must be placed inside the <head> container. As a rule of thumb, the attributes of any meta tag are always passed as name/value pairs.

<head> 
   <meta content="...">
</head>

3) The <a> tag creates links and specifies the document’s language

Without the <a> tag, it’s impossible to create links in HTML files. In order to add a link to the code, you must specify the anchor text and insert the URL.

It is actually difficult to overestimate the SEO value of links, which is why it’s absolutely necessary to check how they are set up in HTML. If the URL contains an error, the link will break and, ultimately, your optimization efforts will take a hit. Similarly, if there’s an error in the tag (for example, the end tag is missing), the link will transform into unclickable text on the page.

Attributes

The href attribute specifies the URL of the page the link goes out to.

The hreflang attribute of the <a> tag specifies the language of the document in the link.

Structure

<a href="URL">The link is here</a>
<a href="URL">The link to the English version is here</a>

4) The <link> tag tells search engines how pages are related

The <link> tag defines the link between a document and an external resource – for example, a document containing fonts or styles.

Attribute

  • The href attribute indicates the URL of an external file.

  • The hreflang attribute lets search engines know that a site has multiple versions of a page for different languages or regions. The search engine decides on its own which version should appear in the SERPs, depending on the searcher’s location and language preferences.

  • The rel attribute specifies the relationship between the current document and the linked document by using various values.

For example, if you want to let search engines know that a page has a Spanish version, use rel=“alternate” to provide a link to the Spanish version of the page.

<link rel="alternate" hreflang="es" href="https://seranking.com/es/">

There are several other popular values that are used along with the rel attribute, such as:

rel=“next” (indicates a link to the next page)

rel=“prev” (indicates a link to the previous page)

rel=“nofollow” (signals search engines that no link juice shouldn’t be passed)

However, the search giant made it public that they no longer take the rel=“next” and rel=“prev” attributes into account (in fact, they haven’t supported them for several years). Nonetheless, these meta tags are still being used for pagination, but with another goal: help users with cognitive disabilities understand the page order.

Note: the <a> and <link> tags can get mixed up because they are often seen together with the same attributes. However, these tags have absolutely different values, which is why they can’t be used interchangeably. The <a> tag points to an object that should be created on the page, be it a URL, clickable text or an image. As for the <link> tag, it is an empty element that simply highlights the relationship with the external file and is used only in the <head> container.

Structure of the <link> tag

<link rel="alternate" hreflang="en" href="https://seranking.com/">
<link rel="next" href="https://www.example.com/page/7/">

5) The <img> tag displays and describes images

The <img> tag is present on any page that has an image. It is used to display images in PNG, JPEG or GIF formats. You can also add an image in the form of a link to another file. To do this, simply put the <img> tag into the <a> container.

Attributes

  • The src attribute specifies the URL of the image.

  • The alt attribute specifies the image’s alternate text, if the image cannot be displayed for any reason. Essentially, the alt attribute describes what is shown on the image so that both search engines and users could understand the image’s relevance.

  • The title attribute describes the image’s content. Although this attribute isn’t as vital for optimization as the alt attribute, it is still worth filling out since it can provide additional information when users hover over the image.

Many other attributes are used along with the <img> tag that are responsible for the image’s location on the page, size and design features, but it’s perfectly common for SEO pros not to know them by heart.

Note: fill out the alt and title attributes using the main language of your website.

Structure of the <img> tag

<img src="image.jpg" alt="labrador in sunglasses" title="dog">

6) The <i>, <b>, <strong> & <q> tags emphasize important text

A separate group of tags is responsible for emphasizing text — making it bold, italic, underlined, etc. Text selection is useful when you need to logically highlight an important part of the text both for readers and search engines.

The most common tags that help format text are:

  • The <i> tag makes the text italic.

<i>Italicized text</i>

  • The <b> tag makes the text bold.

<b>Emboldened text</b>

  • The <strong> tag makes the text bold as well. However, unlike the <b> tag that simply makes the text bold without any logical meaning behind it, this tag tells search engines that the emboldened text is of great importance.

<strong>Strong text</strong>

  • The <q> tag highlights a quote in the text, automatically displaying the content of the tag between quotation marks.

<q>Quote</q>

7) The <table>, <ul>, <ol> tags help get into Google’s Answer Box

Tables and lists help organize information on a page, but they can also give you a sweet bonus — a chance to appear in Google’s Answer Box. For example, when entering the query “video card comparison”, we see an Answer Box with the following table:

Example of Google's Answer Box

Now, if we check the code of the page that appeared in the Answer Box, we can find a table in the code that looks something like this:

HTML table code example

How to use the <table>, <caption>, <tr>, <td> and <th> tags correctly:

  • The <table> tag defines the table’s structure and content. The <caption>, <td>, <th>, <tr> and other elements are used inside the <table> tag. You can completely change the table using attributes: align the table, set a background image, change the bgcolor (background color), set the border width, etc.  

  • The <caption> tag creates a title for the table description. This is where you need to add the keyword that you want the page to rank for.

  • The <tr> tag creates a row in the table.

  • The <td> tag creates a standard cell in the table.

  • The <th> tag creates a header cell in the table with justified emboldened text.

Structure of the table

<table>
   <tr>
     <th>FIFA rankings</th>
     <td>Portugal</td>
   </tr>
</table>

As far as lists go, we can see a similar story. The SEO value of lists lies in their clear, concise, step-by-step structure that boost the page’s chances of appearing in the Answer Box.

Example of Google's Answer Box with list

How to use the <ul>, <ol> and <li> tags correctly:

  • The <ul> tag defines an unordered (bulleted) list.

  • The <ol> tag defines an ordered list.

  • The <li> tag specifies the value of a list item, where each element in the list must begin with the <li> tag.

Structure of the list

<ul>
   <li>Unordered list item</li>
   <li>One more list item</li>
</ul>
<ol>
   <li>Ordered list item</li>
   <li>One more list item</li>
</ol>

8) The <h1> … <h6> tags structure the text into sections

Every piece of online content is structured in a way that helps both search engines and users understand what it’s about. As a result, the entire text gets a title and is broken down into logical semantic blocks, each with its own title. HTML uses special tags to highlight such elements on the page: headings.

There are 6 levels of headings: from h1 to h6. <h1> is used as the main heading and is usually placed above the text. All of the headers must stick to the hierarchy principle (from <h1> to <h6>), with the <h1> tag being used only once.

By the way, an experiment confirmed the priority of using <h1>. It turns out that because some sites can’t use <h1> due to design restrictions, webmasters use <h2> instead to indicate the page title.

But how does this affect SEO?

Well, it has been proven that replacing <h1> with <h2> leads to a drop in rankings, meaning that it is absolutely necessary to use the <h1> tag on pages.

Structure of subheadings

<h1>Everything SEO newbies need to know about tags</h1> 
<p>We decided to write this article because our Support Team has been getting lots of questions relating to HTML tags.</p> 
<h2>Where to start</h2> 
<p>We aren’t going to teach you to code, but we will show you the most frequently encountered tags in SEO.</p>

Note: the <title> and <h1> tags are not the same thing. The confusion can be caused by the fact that both of them have similar functions of describing the page’s content. But the main difference between these two tags is that the title is displayed in the snippet, social media and browser tabs, while the <h1> tag is only displayed on the page as the header. Plus, since both tags are read by search engines to understand what the page is about, they have to clearly and concisely reveal the main idea of the text. On top of that, they have to differ since they serve different purposes: the title attract people from the SERPs, and the <h1> tag confirms that the searchers arrived on the right page by describing the content.

Why don’t SEO pros like the <frame> tag

You’ve probably heard that most SEO specialists frown upon sites that use frames (the majority of such sites were created back in the 90s). If we look at the reasoning behind these sentiments, we can see that such sites are difficult to optimize, they are indexed more slowly and not always correctly, plus these sites have plenty of usability problems.

So, what do you need to know about the <frame> tag?

The <frame> tag defines the properties of a single website frame. It is placed inside the <frameset> container that splits the page into different areas. At the heart of it, each area is a separate web page.

Today, this technology is considered obsolete since traditional frames are no longer supported by HTML5. However, many modern technologies support <iframe>, which allows you to insert frames into text blocks on pages.

How to check if your tags are in order

To avoid making mistakes in your HTML tags that may affect the quality of your site’s promotion, it is necessary to run a full analysis of the site. Luckily, you can easily audit your entire website with the help of SE Ranking Website Audit.

Website Audit in SE Ranking

A detailed analysis of every single one of your site’s pages will show those with the noindex, hreflang, rel=”canonical” and rel=”alternate” tags. Moreover, the tool checks the headers and meta tags for uniqueness and compliance with length restrictions, locates all duplicates and images with empty alt tags, analyzes h1-h6 tags and so much more. Besides errors and comments, the report also includes suggestions on how to solve them. Additionally, you can manually configure how often audits should be performed based on your needs and how often you make changes to the website.

In this blog post, we only covered the tags and attributes that SEO pros are most often faced with. Having a good understanding of the importance of each of these elements, their structure and role on the page, you can identify tag usage errors, correctly develop tasks for programmers and content writers, and, perhaps even do some coding without any help.

You don’t necessarily need to love HTML tags, but knowing which ones are important for site optimization is a definite must. If you want search engines to rank your pages, help them by providing useful and relevant information in the HTML code.

Share article
10 comments
  1. Thanks for the awesome post, Andrew! I try to track all the mentioned above HTML tags. That’s amazing how many info we can get knowing and analyzing tags.

    1. Thanks, glad to hear it! We will definitely look into covering more advanced HTML tags in the future.

  2. This is great info, Andrew. Have one question tho: if i leave the meta description blank and the robots pull the meta description from the article’s content, will this increase the chances of matching search query with description? Can this help me get more traffic on maximum queries or not?

    1. Thanks, Cecilia! If you leave the meta description empty, your website will automatically generate one. But it won’t be optimized for search engines.

  3. You said how h1 tags are important. I use WordPress, do you think I should add h1 tags to the title too? Or should they be within the article? Plus can i possible to get penalized for having too many h1 tags?

    1. Good question, Jurgen. The title tag on WP is H1, but don’t use more than one H1. You won’t get penalized but it will not you help one bit.

    1. If you’re thinking about replacing the h1 tag with h2 – don’t as it will lead to a decrease in rankings. As a rule of thumb, use just one h1 tag (main heading), use h2 tags for subheadings, h3 for sub-subheadings. As for how many times it can be used, there’s no such limit that impacts SEO. Hope this helps!

  4. This is great info, Andrew. Have one question tho: if i leave the meta description blank and the robots pull the meta description from the article’s content, will this increase the chances of matching search query with description.

    1. Great question, Aliyan!
      If you leave the meta description blank, it’s a wasted opportunity. As a result, search engines have fewer data to work with when ranking and trying to understand the relevance of a web page.
      When you don’t have a meta description, Google pulls one from the page content. So, say someone entered 2 separate search queries and your page came up in search. Depending on the search query, Google will pull different meta descriptions from the page content.
      From the visitors’ point of view, this is beneficial, as users will see the info in the snippet that will let them know that the content they’re looking for is in fact on the page.
      Hope this helps! Cheers

Leave a Reply

Your email address will not be published. Required fields are marked *

More Articles
SEO Insights
How to handle 301, 404, 503 and other scary HTTP numbers
Sep 30, 2019 13 min read

Occasionally, when we visit a web page and no content shows up, we typically get a three-digit status code that tells us exactly what went wrong. In fact, various HTTP status codes like 301, 404 and 503 tell an entire story. Here you can find out about the most common ones.

Andrew Shipp
SEO Insights
Using the power of internal linking
Sep 26, 2019 8 min read

The power of internal linking is often underestimated. And still, a killer internal linking strategy may bring you closer to reaching your goals. In this post, we'll explain why internal linking matters and how you can get the most out of it.

Sylvia Shelby
SEO Insights
13 metrics to identify quality backlinks
Sep 23, 2019 12 min read

If you're in charge of SEO, there’s no way you can avoid dealing with backlinks and evaluating their quality. Obviously, everyone’s hunting for those high-quality backlinks. But have you ever wondered what exactly does this mean? This post will help you find out what you need to do to quickly evaluate backlink quality and what metrics can be of great help with this.

Julia Jung