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.
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.
<title> Page title </title> Page content
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:
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:
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:
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.
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!”.
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:
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
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:
- 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.
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):
Do not follow any links from the page, and also do not take link juice into account when calculating rankings.
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.
- 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.
- 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.
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.
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.
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.
<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.
- 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.
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
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.
- 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.
- The <b> tag makes the text bold.
- 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.
- The <q> tag highlights a quote in the text, automatically displaying the content of the tag between quotation marks.
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:
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:
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.
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.
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.