for Enterprises
for Agencies
for SMBs
for Enterpreneurs
Keyword Rank Tracker
On-Page SEO Checker
Website Audit
Competitor Analysis Tool
Backlink Checker
Local Marketing Tool
US Agencies
UK Agencies
Backlink Monitoring guideWe’re used to the fact that most of the work related to HTML is done by coders, programmers, and software developers. But in no way does this mean that SEO pros and digital marketers shouldn’t have a good understanding of the essential HTML tags. The bottom line is that tags are a must-know if you want to properly develop technical specifications and understand how tags affect SEO.
So, which tags and attributes matter in search engine optimization? Why do you even need them and how should they be used? We went through every HTML tag out there and put together a list of the most important ones to help you learn the ropes of HTML or simply refresh your memory.
Breaking down HTML basics
HyperText Markup Language (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.
HTML is the basis of the vast majority of web pages and is one of the most essential parts of technical SEO. With the help of HTML elements, SEOs can relay information on web pages both to people and search engine bots. Doing so can make it clear to everyone what the page structure and order of content is, plus it clarifies how the page is related to other web pages online.
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 engine bots, web pages are no more than an HTML code with specific elements.
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 basic 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.
An HTML element is a type of HTML document component that is composed of a tree of simple HTML nodes like text nodes. Such elements allow the HTML document to include certain semantics and formatting. Here’s 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. Think of HTML tags as keywords that define how web browsers format and display page content.
Moreover, the text that’s placed between tags is displayed according to the tag’s properties. So, you could, for example, 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.
Lastly, an attribute is an additional bit of information about a tag or meta tag. They represent special words that are used inside the start tag to have control over an element’s behavior.
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.
How tags differ from attributes
Since a lot of people use the terms “tag” and “attribute” practically synonymously, let’s take a moment to get the terminology straight.
Here’s an example of an HTML element format that breaks the element down into three parts:
<h1>Welcome to my blog on SEO</h1>
In this example, “<h1>” opens the tag, “Welcome to my blog on SEO” is the content of the tag, and </h1> closes the tag.
The HTML element in the example above is a header that is used as a visible title on a web page to introduce content about search engine optimization. Now, let’s draw the distinction.
While tags must have the start and close elements to function properly, attributes don’t and they are added to HTML elements as modifiers, for example:
<link rel="canonical" href="https://www.website.com" />
In this example, rel= and href= are attributes of the <link> tag.
Note that there are also empty elements, like <br>, which do not have any content or end tag to them.
Why users and search engines need tags
Now that we have a clear understanding of tags and attributes, let’s discuss why search engines, browsers and users need them. 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 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 (as in are misleading, overspammed with keywords, etc.), Google will automatically replace them with more appropriate text from the page content.
Google’s Search Console Help Center has a list of every meta tag supported by the search giant. So, if you feel like you want to dig deeper into every HTML tag, be sure to check it out.
Tags help browsers read page information. That way, texts, images and links can be displayed exactly the way they are indicated in the HTML code. Can you imagine if users had to visually fish out the site’s content out of all that HTML code?
Now that we’ve covered all the HTML basics, let’s get to the good stuff: tags and attributes useful in search engine optimization.
3 fundamental HTML tags
If you want to create a web page that is useful to people and, more importantly in the context of this article, to search engines, there are three key HTML tags you must include.
The <!DOCTYPE html> tag points out that a page is a web page
The <!DOCTYPE html> tag is the very first tag you put up on your web page code. What it does is introduce the page to search engines as being a web page.
Note that although the <!DOCTYPE html> tag isn’t an HTML tag per se—which is why it doesn’t have any attributes—it provides vitally important information to browsers that lets them know what type of document to expect to find on the page and how it must be displayed.
Here’s an example of the code in use:
<!DOCTYPE html> <html> <head> <title>The title of the document</title> </head> <body> The content of the document </body> </html>
When used properly, the browser will understand that the web page was built on HTML. Ultimately, it will have no problem processing the code and displaying the page as intended.
The <head> tag contains page metadata
The <head> tag introduces the very first web page section and contains information on the page that isn’t displayed by browsers. I want to point out that it’s important to know that the <head> tag houses some of the most key SEO tags.
The <head> element serves as a container for metadata—as in data about the HTML document that isn’t displayed on the page—and goes between the <html> tag and the <body> tag. As a rule of thumb, metadata defines the title of the document, its character set, styles, scripts, and so on.
The <head> tag can contain such HTML elements as <base>, <link>, <meta>, <noscript>, <script>, <style>, and <title> which is a must.
Here’s what the HTML code looks like:
<!DOCTYPE html> <html lang="en"> <head> <title>Title of the document</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Once you run the code, you’ll see this:
As you can see in the example above, the <head> tag contains such metadata as the title of the document—which isn’t visible on the page—but it can contain various elements that provide data on the page.
On top of that, HTML Global Attributes that can be used with any HTML element are also supported by the <head> tag.
The <body> tag defines the page’s main content
The <body> tag defines the body of the document and acts as a container for information on the page intended for the eyes of your visitors. I am of course referring to the text, images, and videos you put up on your web page for everyone to see.
To elaborate, the <body> tag holds all of the contents of an HTML document, including headings, paragraphs, multimedia, hyperlinks, tables, lists, and so on. Basically, everything the human eye can see on a web page is housed in the <body> tag, which, by the way, there can only be one of.
Here’s what the HTML code looks like:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Once you run the code, you’ll see this:
Unlike the previous example, in this case we can actually see the HTML elements that are defined within the <body> tag: <h1> and <p>.
The <body> tag supports HTML Global Attributes that can be used with any HTML element. Moreover, it also supports HTML Event Attributes that let events trigger actions in browsers, similar to clicking on an element in JavaScript.
HTML tags useful in SEO and their attributes
And now, on to the other HTML tags that can help your SEO.
As we’ve already touched on, tags 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. The bottom line is if you use them in the right way, your website promotion and SEO 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.
Titles are displayed as clickable headings on SERPs. It is very important for usability, search engine optimization, and social media sharing. The purpose of this tag is to accurately and concisely describe the content of the page so that searchers are enticed to visit the page, and search engines have enough additional information about the topic of the page.
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, if you don’t use the Open Graph markup that is. 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 truncated down to 600 pixels anyway. As a result, incomplete information will get pulled into the snippet.
Alright, with the title length issue out of the way, let’s figure out whether we need to use target keywords in the title tag. Several years ago, Brian Dean of Backlinko did a study that mentioned how the use of the target keyword within the title tag can have a positive effect on a website’s rankings. The short answer is, yes. The target keyword can help boost rankings, but there is no direct relation between the use of the keyword in the title tag and an increase in rankings. Google has long learned to analyze web page semantics without getting hung up on tags alone, as was the case in the past.
The main takeaway is that you do need to use keywords but only with the aim of helping both search engines and users understand what your page is about, nothing more.
You are also at liberty to specify other additional information in the title, such as price, brand, delivery options, and so on.
Here’s what the HTML code looks like:
<!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
When you run a similar code on a published page, you’ll see this:
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. The <title> tag also supports HTML Global Attributes, but doesn’t support Event Attributes.
2) The <meta> tag provides additional page info
The <meta> tag, often referred to as metadata, defines the HTML document’s metadata that isn’t shown on the page, but can be processed by search bots (to identify keywords) and by browsers (to display content or reload the page).
It must always be placed within the <head> element of the page, and is usually used to specify the set of characters used on the page, the page description, keywords, document author, as well as viewport settings.
First, let’s look at the attributes that the <meta> tag can contain.
Name attribute
One of the first attributes of the <meta> tag that we’ll focus on is the name attribute. Its main purpose is to inform bots that visit the page whether the information on the page is intended for them or not.
For instance, by including a name attribute in the meta tag like
<meta name=”robots” content=”noindex” /> or <meta name=”googlebot” content=”noindex” />
you’ll point out to all bots and Google’s bot respectively that they should consider the “noindex” directive. As a matter of fact, when the meta tag contains a name attribute intended for bots, it will often be referred to as the “meta robots tag”.
From the standpoint of SEO, using the name attribute in the meta tag is a great way of preventing certain bots from interacting with your pages, plus it allows you to provide additional data on the page.
But besides working just for bots, the name attribute can also be used to:
- specify the target keywords on the page (although it is a bit outdated now)
<meta name=”keywords” content=”HTML, tags, attributes”>
- define the page’s description:
<meta name=”description” content=”Must-Know HTML tags and attributes”>
- define the author of the page’s content:
<meta name=”author” content=”John Appleseed”>
I want to point out that 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. The same goes for Bing’s stance on keywords.
Furthermore, SEO expert Bill Slawski conducted a poll that confirmed that meta keywords are a thing of the past.
But these are not all the values of the name attribute. Let’s take a closer look at some other ones.
Description attribute
The description attribute, often referred to as the meta description, is another attribute used with the <meta> tag.
This attribute provides a textual description of the page’s content that is displayed in SERPs right below the <title> tag:
Here’s what its HTML code looks like:
<meta name="description" content="HTML tags and attributes you need to know">Besides providing additional information on the page to search engines, the description attribute gives content creators an opportunity to write enticing text that will encourage people to click through to the page directly from the SERPs.
As a rule of thumb, the description text has to be a little clickbaitish, so that people will be motivated to go to the page. But note that Google will most often replace the provided page description with parts of the content that are relevant to a user’s search query.
Now, although the text of the description doesn’t provide a direct boost in rankings, it can increase your CTR, which, in turn, is seen as a positive ranking signal.
Viewport meta tag
Although it’s not an attribute, the viewport meta tag lets you control the width and scaling of the viewport—the user’s visible area of a page—so that it’s displayed correctly on screens of all sizes, from desktop computers to laptops and from tablets to mobile phones.
Here’s what the HTML code looks like and I advise you to added it to all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
With the help of this data, browsers can get information on how to control the dimensions and scaling of web pages.
Taking a closer look at the code, we can see that the width=device-width part is set up in such a way that the width of the page will match the screen-width of the used device.
As for the initial-scale=1.0 part, it sets the initial zoom level when the page is first loaded by the browser. So you may want to test it out depending on how your page is set up.
Below, you’ll find an example of a page that doesn’t use the viewport meta tag, along with the same web page that does use it:
In the modern age, when the usability of a site directly affects its ranking positions, it is simply unacceptable to create pages that do not adjust to the sizes of different screens. People will immediately leave your page if it looks like the example of the left.
Twitter Card
A Twitter Card is a multimedia tweet add-on. They are customizable media units that PPC specialists can use to drive traffic to their sites and/or mobile apps.
There are different types of Twitter Cards, with each one built specifically to cater to the needs of Twitter’s desktop and mobile users:
- Summary Card includes a Title, description, and thumbnail
- Summary Card with Large Image additionally includes a front-and-center image
- App Card allows for direct downloads to a mobile app
- Player Card lets you display videos, audio, and other media
To start implementing Twitter Cards markup, you need to specify the type of card your content requires by adding HTML markup to the page’s head section:
Here’s what the HTML code looks like:
<meta name="twitter:card" content="summary_large_image">
< meta name="twitter:site" content="@Airbnb_UK" >
<meta name="twitter:title" content="Pubs on Airbnb">
<meta name="twitter:description" content="From Old Cross Saws inn to The Whistling Badger, pubs scattered all over the UK are taking advantage of listing their spare room on Airbnb.">
<meta name="twitter:image" content="https://pbs.twimg.com/card_img/1409915304122089473/Zhi5ikFr?format=jpg&name=medium">Thanks to the presence of this meta tag in a tweet that links out to your site, a page card will be displayed for Twitter users to see:
Without the Twitter Card tag, your content’s page title, description, image, and so on won’t be pulled up and displayed in your Twitter posts along with the link. Instead, Twitter will pull data from relevant Open Graph tags, if there are any.
Learn more about Twitter Cards here.
Content attribute
This attribute works in combination with the name and http-equiv attributes and reveals the meaning/data type of the meta tag to the search engine. Essentially, it specifies the content that contains the meta tag.
Here’s an example of the content attribute used in the meta tag:
<meta name="description" content="What are HTML tags and attributes? How do you use them to get an SEO advantage? Check out every important HTML tag and its attribute in this post!">
And here’s what it looks like on a live page (remember that the description is only displayed in the SERPs):
In the context of the HTTP-equiv attribute, which we’ll get to next, the content attribute defines the type of data that is sent to the browser.
But first, let’s focus on a very important value of the content attribute.
Noindex attribute
Noindex is another commonly used meta tag attribute for SEO purposes.
This attribute lets publishers identify content that can be indexed by search engines and included in the SERPs. Basically, the noindex attribute allows you to tell search engines that they may not use the given page in their respective indices.
Similar to the “meta robots tag”, the noindex attribute is commonly referred to as the “noindex tag” because of its use, although it is an attribute of the meta tag.
Here’s what the HTML code looks like:
<meta name="robots" content="noindex" />
Here are a few examples of the commands that can be used in the meta robots tag besides “noindex” (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.
- index, nofollow
Index the content of the page, but do not follow any links from the page.
This attribute comes in very handy when you want to hide sensitive data from organic search. You could, for example, have an area on your site that can only be accessed by paid members, and failing to use the “noindex tag” will make the content accessible to anyone from the search result pages.
When using robots directives on your page, make sure it is not blocked by the robots.txt file. Otherwise, search engines simply won’t be able to access the page and see the directives specified in the meta tag.
HTTP-equiv attribute
The http-equiv attribute displays the content of the HTTP header and is used by servers to collect additional page information.
In layman’s terms, browsers convert the value of the http-equiv attribute—specified with the help of the content attribute—to the HTTP response header format and treat them as if they came directly from the server.
Here’s an example of what the HTML code looks like:
<meta http-equiv="expires" content="4 May 2022"> or <meta http-equiv="refresh" content="60">
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, block robots from indexing a page using the X-Robots-Tag HTTP header or set up an HTML redirect using the refresh attribute.
Here are some of the attribute values that can be used in the http-equiv attribute:
| Value | Description |
| content-security-policy | Specifies the document’s content policy Example: <meta http-equiv=”content-security-policy” content=”default-src ‘self'”> |
| content-type | Specifies the document’s character encoding Example: <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″> |
| default-style | Specify the document’s preferred stylesheet Example: <meta http-equiv=”default-style” content=”the document’s preferred stylesheet”> Note that the value of the content attribute must match the value of the title attribute on a link element, or it must match the value of the title attribute on a style element. |
| refresh | Defines how often (in seconds) the document needs to automatically refresh Example: <meta http-equiv=”refresh” content=”120″> |
Charset attribute
The charset attribute is responsible for document encoding. It defines the character encoding style of a website.
The encoding needs to be specified so that browsers can correctly display the text of the HTML document on the page. If the tag with the encoding data contains an error, you will only see scrambled characters on the page.
Here’s what the HTML code looks like:
<head>
<meta charset="UTF-8">
</head>One of the most frequently used coding standards is UTF-8, with 96.6% of analyzed websites using it. It’s supported by all modern browsers and search engines. Some other encoding standards include ISO-8859-1, Windows-1251, and Windows-1252, but they are used by less than 3% of websites.
The key here is not to use several coding standards in a single document as this will confuse browsers and search engines alike. In turn, this can lead to content indexing issues and the 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.
3) The <a> & <link> tags create links
The <a> tag serves to define hyperlinks that link out from one page to another. Basically, a standard hyperlink on a web page is an <a> tag.
Here’s an example of what its HTML code looks like:
<a href=”www.website.com”>link anchor text</a>
When added to the HTML code and placed in-content, the example above will look like this:
Now, let’s break it down to understand its parts. First, we have the <a> tag that indicates that the element is a link. Then, the href= attribute defines the page the link links out to, which is www.website.com in our case. The text that you can see between the start <a> tag and the close </a> tag is the anchor text, as in the clickable in-content text website visitors will see on the page.
Note that the <a> tag is used for clickable links that are placed within the page’s content, as in within the <body> tag. If you need to link a web page to an external resource, like a document containing fonts or external style sheets, you need to use the <link> tag that appears in the <head> of the page.
Here’s what its HTML code looks like:
<head> <link rel="stylesheet" href="styles.css"> </head>
Note that <link> tag links aren’t hyperlinks, they cannot be clicked on, and the <link> element itself contains only attributes. They simply show how web documents are related to one another.
Now, let’s take a look at the attributes that are associated with link tags.
Hreflang attributes
The most important attributes of the <a> tag are the href and hreflang attributes that indicate the link’s destination and specify the country and language of the alternate page, respectively.
The hreflang attribute was primarily designed for websites that contain the same copy in different languages. It lets search engines know which page version must be displayed to website visitors, allowing them to see the content in their preferred language.
The hreflang attribute can also be used in the <link> tag where it defines the language of the linked-to web page. Just like the <link> tag, the href attribute must be housed within the page <head> element, and here’s what its HTML code looks like:
<link rel="alternate" href="https://website.com" hreflang="en-gb" />
The code can be split up into three parts:
- The rel=”alternate” indicates to search engines that the web page has an alternative relevant page.
- The href= attribute defines the URL of the linked out to page.
- The language code indicated after the hreflang= attribute lets search engines know the language of the linked page. Check out the full list of language codes known as ISO 639-1 codes.
Note that the hreflang attribute can additionally be used in the HTTP header for non-HTML documents or it can be specified in the site’s XML sitemap.
Rel=“nofollow” attribute
The rel=”nofollow” attribute points out to search engine bots that they aren’t allowed to follow the URL indicated in the href attribute.
This attribute does not have any effect on website visitors, so they can still click links to go to other pages. However, it does impact bots, as in they can’t follow a link to visit a page or highlight any specific positive aspect of linking one page to another.
This attribute can either be applied to a single link like so:
<a href=www.website.com rel="nofollow">link anchor text</a>
Or you can mark all links on a web as “nofollow” by using it in the <head> tag like the “noindex” attribute:
<meta name="robots" content="nofollow" />
But it’s not just about search engines and their bots. You can still benefit indirectly from nofollow links if your website visitors click through to the linked web page.
Google’s use of the rel=“nofollow” attribute
Several years ago, the search giant made a few alterations to the “nofollow” attribute and introduced the rel=”ugc” and rel=”sponsored” attributes. Unlike the “nofollow” attribute, these new ones allow publishers to state the relationship between links and their target pages in a much clearer way.
They help Google recognize when a linked-to page shouldn’t be taken into account when ranking pages:
- rel=”ugc” attribute stands for user-generated content and is used to mark links that have been added through publicly available resources, such as forums.
- rel=”sponsored” attribute is used to identify links that were obtained through ads or sponsorships.
Furthermore, Google also stated that the “nofollow”, “rel=“ugc” and rel=“sponsored” attributes are now looked at as hints by the search colossal. Google’s bot used to ignore such links, but now it may consider the provided “hint”, but can still treat the link as “nofollow”.
Canonical attribute
The link tag’s rel=”canonical” attribute lets SEOs point out which other web page is to be considered canonical—as in it is the main version of the page, but it’s copies may exist.
From the SEO perspective, this helps promote a specific page in organic search, blocking its copies from getting ranked.
Here’s what this attribute looks like:
<link rel="canonical" href="https://www.website.com/" />
The code with the canonical attribute should be placed within the page’s <head> element. Note that you should indicate the page you want search engine bots to see as canonical after the “href=” attribute.
Check out what Google has to say about canonical links to find out more.
4) The <img> tag displays and describes images
The <img> tag is present on any page that has an image. It is used to embed images into HTML code and display them 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.
Images can also be used as HTML image maps when the image contains clickable areas that act as links. Image maps don’t differ from regular images in any way except that the former can be broken down into invisible zones of various shapes that can be clicked on.
Interestingly enough, this tag doesn’t actually insert any images into pages, but links out to them so that they are displayed on the page. The <img> tag basically serves as a container for images that are in fact located somewhere else, like a server.
Here’s what the HTML code of the <img> tag looks like:
<img src="imagefilename.jpg" title=”image description goes here” alt="alternative image description goes here">
As you can see, there are three attributes in this tag. One of them must be filled out correctly in order for the tag to function, while the other ones can be left without a value. Let’s look at the three in closer detail.
Src attribute
The main purpose of the src= attribute is to indicate where (URL) the file of an image shown on a web page is located.
The image’s location, as in its URL, can be specified in two ways for the src= attribute:
- If it can be found on the same domain as the container that houses it, then you should use a relative URL. In this case, the domain name isn’t included in the URL address. If there’s no slash at the start of the URL, it is relative to the page at hand.
src=”imagefile.png”
But if there is a slash at the start of the URL, then it’s relative to the domain.
src=”/images/imagefile.png”
Note that relative URLs won’t break with a domain change, for example, when switching from HTTP to HTTPS.. And if an image can’t be found by a browser, the alt text will be displayed along with the broken link icon.
- But if you want to use an image that is located on another website, use the absolute URL.
src=”https://www.website.com/images/imagefile.png”
Note that using images from external sources without permission may violate copyright laws, plus you have no control over them and won’t know when they are removed or updated.
The sole purpose of this attribute in terms of SEO is that you need it to index images and see them ranked in image search. Plus, the image tag simply won’t work without this attribute.
Alt attribute
The main purpose of this attribute is to indicate alternate text that will appear if an image can’t be displayed on the page for any reason. On top of that, since search engines are still struggling to come up with the technology that will allow them to perfectly understand what is portrayed on images, the alt attribute provides another way—in addition to the title attribute—for them to understand what is depicted on an image and, ultimately, rank it in image search.
So, try to use keywords that a) describe the image, and b) use keywords relevant to the topic of the web page.
In terms of human website visitors, the text in the alt= attribute is used by screen readers and assistive tech to give blind or visually impaired people an understanding of what the image contains. So, you may want to make the most of the alt attribute in terms of helping such people absorb content.
Remember how I said that two <img> attributes can be left without a value? Well, although the alt= attribute must be present in the image tag like the title= attribute, you aren’t obligated to fill it out. However, considering the points made above, you may want to fill it out after all.
Title attribute
The title attribute describes the image’s content.
Although this attribute isn’t as vital for optimization as the alt attribute as it is not used for search ranking, 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. So, here’s a short table that covers them:
| Attribute | Value | Description |
| crossorigin | anonymoususe-credentials | Allows the use of images from third-party sites that permit cross-origin access use with canvas |
| height | pixels | Defines the image height |
| ismap | ismap | Defines an image as a server-side image map |
| loading | eagerlazy | Defines if a browser should load an image right away or wait until specific conditions are met |
| longdesc | URL | Defines a web page that contains a detailed image description |
| referrerpolicy | no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-url | Defines what referrer info must be used when fetching an image |
| sizes | sizes | Defines the sizes of an image for different page layouts |
| srcset | URL-list | Provides a list of image files that should be used in different scenarios |
| usemap | #mapname | Defines an image as a client-side image map |
| width | pixels | Defines the image width |
The <img> tag also supports HTML Global Attributes and HTML Event Attributes.
5) The <i>, <em>, <b> & <strong> 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.
Here are the most common tags that help format text:
- The <i> tag makes the text italic.
<i>Italicized text</i>
- The <em> tag defines emphasized text. The content within the tag is displayed in italic. Screen readers use verbal stress when pronouncing words in <em>.
<em>Emphasized text</em>
Note that the key difference between the <i> and <em> tag is that the latter provides a semantic emphasis on an important word or section of words (useful for SEO), while the former is just offset text conventionally styled in italic to show alternative mood or voice.
- 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>
6) 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:
Here’s what the clean HTML code looks like without all the extra information:
<table> <tr> <th>FIFA rankings</th> <td>Portugal</td> </tr> </table>
I get that there are too many abbreviations and two-letter codes here, so let’s break it down and find out 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.
- 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.
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 boosts the page’s chances of appearing in the featured snippet.
Here’s an example of what the HTML code looks like for unordered (<ul>) and ordered (<ol>) lists:
<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>
Once again, let’s break it down and learn 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.
From the standpoint of SEO, it is way more beneficial to use tables instead of lists because tables allow search engines to easily fetch table data and rank articles higher as a result.
7) The <header> tag makes content scannable
The <header> tag was designed to define a page or section header to introduce the content ahead and typically has a logo or icon, navigational links, and a search bar.
It’s important to point out that there can be several <header> tags in a single HTML code, but the tag itself can’t be housed in a <footer>, <address> or another <header> tag. The <header> tag supports HTML Global Attributes and HTML Event Attributes.
Here’s what the HTML code looks like:
<!DOCTYPE html> <html> <body> <article> <header> <h1>Write a heading here</h1> <p>Posted by John Appleseed</p> <p>Introduce your piece of content</p> </header> <p>Now get into all the deets</p> </article> </body> </html>
Once you run it, you’ll get the following:
Now, this is just an example, but you can easily find the <header> element used in at the very top of a lot of websites:
In terms of SEO benefits, search engine bots consider headers to be user-friendly because they provide page formatting, making the content on the page scannable. Without the presence of headings, search bots may think your page isn’t user-friendly, and as a result, your rankings may take a hit. Plus, since the header can also contain internal navigation links, this gives search engines a clear understanding of what pages are most important in your site’s structure.
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 in the vast majority of cases.
Here’s what the HTML code looks like:
<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>
By the way, an experiment confirmed the priority of using <h1>. No matter how many <h2> headings you optimize, they still won’t be able to outrank a web page with an optimized <h1>.
So, to get SEO benefits, it’s best to stick to best practices regarding the use of headers in content—use only one h1 header and maintain header hierarchy.
Note that 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. On top of that, they have to differ since they serve different purposes: the title attracts people from the SERPs, and the <h1> tag confirms that the searchers arrived on the right page by describing the content.
9) The <footer> tag provide internal link structure and navigation
The <footer> tag was designed to define a document or section footer on a website.
As a rule of thumb, this tag contains information on authorship, copyright, contact details (must go inside <address> tag within the <footer>), links to related docs and pages, back to top link, and perhaps even a sitemap. An HTML code can contain several <footer> tags, plus it supports HTML Global Attributes and HTML Event Attributes.
Here’s an example of what the HTML code looks like:
<!DOCTYPE html> <html> <body> <h1>The footer element</h1> <footer> <p>Author: John Appleseed<br> <a href="mailto:[email protected]">[email protected]</a></p> </footer> </body> </html>
The live code produces the following page:
The example above isn’t the typical footer that comes to mind, but it can be found under various articles. Below, you’ll can see the link-packed footer from SE Ranking’s homepage along with its HTML code:
In most cases, the footer is the same across the entire website and provides users with all the information they could possibly need.
But what’s the SEO benefit of using the footer? Well, the footer contains links. A lot of links. And in SEO, this matters as it provides a clear internal link structure. So make sure that all of your important pages are linked out to from the footer for search engines to see.
10) Too many <div> tags slow down web pages
The <div> tag was designed to define a section in an HTML code. It’s used to contain all types of HTML elements.
To elaborate, the <div> tag is a block element that is intended to highlight a fragment of a document in order to change its content’s appearance. So that you don’t have to describe the style of the tag each time, choose the style from an external style sheet, also add a class or id attribute along with the selector name.
Here’s what the HTML code looks like:
<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
border: 7px outset black;
background-color: lightgreen;
text-align: center;
}
</style>
</head>
<body>
<h1>The div tag</h1>
<div class="myDiv">
<h2>Heading in a div tag</h2>
<p>Text in a div tag.</p>
</div>
<p>Text outside the div tag.</p>
</body>
</html>
Once you successfully run the code, you’ll see the content within the div element is separated from the rest:
The <div> tag can contain two attributes:
- The align attribute defines how the div element will be aligned on the page in relation to its surroundings.
- The title attribute adds additional popup information to the content.
The <div> tag also supports HTML Global Attributes and HTML Event Attributes.
From the SEO point of view, wrapping page content in <div> tags won’t be a direct problem, however, having a lot of unnecessary code in your HTML document can slow down the page, leading to UX issues.
11) The <section> tag wraps logical groups of related content
Plain and simple, the <section> tag was designed to define an HTML document section. But besides this purpose, it can also be used to mark news blocks, contact details, content chapters, and dialog box tabs, to name a few.
It must be noted that this element typically has a title, and you can place one section element within another. HTML Global Attributes and Event Attributes are supported by the <section> tag.
Here’s what the HTML code looks like:
<section> <h2>Santiago Bernabéu Stadium</h2> <p>The Santiago Bernabéu Stadium is a football stadium in Madrid, Spain. With a current seating capacity of 81,044, it has been the home stadium of Real Madrid since its completion in 1947. </p> </section>
Once you run it, you will see something that visually doesn’t look any different from the <article> or <aside> elements:
As you can see in the screenshot below, we also use the <section> element on our website to tag different parts, or sections, of our homepage:
In terms of SEO, the <section> element is similar to the <div> tag, but, although it looks as if nothing is happening, it sends a more powerful signal to search engines. It tells them that a logical group of related content is wrapped within the tag, like a contact details section.
11) The <article> tag points out self-contained content
The <article> tag denotes content that is cohesive and distinct. But, unlike the <section> tag, you can cut and paste it from one place to another, like another site, and the article won’t lose its meaning. Moreover, this can be done in a matter of minutes. The tag is often used for articles and blog posts.
Below you can see a SEJ article page that has an infinite scroll. Once you finish reading one article, another one starts straight away.
The <article> tag simplifies the process of highlighting new articles or blog posts in an online publication for search engines. That way, search engines like Google can put more emphasis on content wrapped in the <article> tag.
Plus, the use of <article> tags cuts down on the use of <div> tags and cleans up your page’s HTML code.
13) The <aside> tag creates sidebars
The <aside> tag is used to define a block on the side of the page that contains headings, links to other content, tags as well as other info. This is usually referred to as a sidebar, although it can contain a footnote, an ad, or something else.
As a rule of thumb, the content placed within the aside element must not be directly related to content of the page. Similar to the <div> tag, aside only creates a sidebar and doesn’t display any design aspects. It can, however, be styled via CSS. The <aside> tag supports HTML Global Attributes and HTML Event Attributes.
Here’s what the HTML code looks like for the sidebar on our blog’s homepage:
The <aside> tag helps search engines quickly obtain valuable page information like author, number of views, and date. Moreover, this tag can be used to provide additional enclosed content on a page that is relevant to the entire page and not one of its blog posts. This gives search engines the opportunity to analyze the page’s surroundings to better understand its overall and more specific topic with the ultimate goal of ranking the page for relevant queries.
15) The <iframe> vs <frame> tags: which is preferred by SEOs
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.
As you can see, it doesn’t look great, but there’s a lot more going on behind the scenes that causes such pages even more issues.
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.
The <iframe> tag is used to specify an inline frame. In their essence, iframes let you embed another website in the HTML code of your site like interactive maps as well as YouTube videos.
So, the <iframe> tag gives you the possibility to embed content from another website inside your own website. Are there any SEO benefits in this? Well, since search engines understand that iframed content is being pulled from another resource, web pages that use the iframe element won’t get any positive signals, but it’s still better to use it than <frame>.
15) The <nav> tag defines priority pages
The <nav> tag is used for site navigation and points out the most important pages of the website.
Since we already discussed navigational and internal structure links in the <header> and <footer> sections of this blog post, you may be wondering how this tag is different. Well, if your page contains several blocks of links, you can use <nav> to mark priority links. But don’t go overboard and tag all links with the <nav> element.
Did you notice how I said links in plural? The <nav> tag can be used more than once in an HTML document, but make sure you don’t put it into the <address> tag.
With the help of this tag, screen readers can understand if they need to skip the content’s initial rendering. Plus, the <nav> tag supports HTML Global Attributes and HTML Event Attributes.
Here’s what the HTML code looks like:
<!DOCTYPE html> <html> <body> <h1>The nav element</h1> <p>The nav element defines a set of navigation links:</p> <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/python/">Python</a> </nav> </body> </html>
Below you can see what the HTML code looks like once it’s live:
And this is how to the tag works once it’s added properly to a site’s HTML code:
For search engine optimization, the links tagged with the <nav> element send a signal to search engine bots regarding the pages that you deem to be the most important ones on your website. Furthermore, it provides them with quick and easy access to these web pages.
16) The <script> tag speeds up page via embedded scripts
The primary purpose of the <script> tag is to add scripts, mainly JavaScripts, to HTML documents. JavaScript is used for the creation of interactive maps that react to user actions. For example, the menu expands on a click, a like is added after the Heart icon is clicked on, and so on. It’s very difficult to imagine a quality site that doesn’t use JavaScript.
This element can contain a link to an external link file, or its text in a specific coding language known as a scripting statement. Scripts can be housed in external files and be linked to any HTML document.
The <script> tag can be placed in the head or body of an HTML document an unlimited number of times. In most cases, the location of the script does not affect its performance in any way. However, note that you should place scripts that you want to be executed first in the head of the HTML code.
Here’s what an example of the HTML code looks like:
<script src="javascript.js"></script>
Now, it doesn’t make much sense to show you what the example code will look like in action because you won’t have any context, so here’s how we use the script tag to pull a HelpCrunch widget into our website:
Before we get to the SEO advantages of using the <script> tag, here’s a table that will give you an understanding of how you can execute external scripts on your pages and what attributes can help.
| Attribute | Value | Description |
| async | async | Specifies that the script will be executed as the page is parsing |
| defer | defer | Specifies that the script will be executed once the page is parsed |
| language | JavaScript (recent versions of HTML, XHTML, its successor don’t use this attribute) | Specifies the coding language in which the script was written |
| src | URL | Specifies the URL address of an external script file to be imported into the current document |
| type | scripttype | Specifies the content type of the <script> tag |
Note that if there aren’t any async or defer attributes in the script, it will be fetched and executed with no delay, even before the browser parses the resource.
It’s also worth remembering that search engines have problems with JavaScript. Its use often means that certain content will appear on the site only after a user performs an action, so most search engines simply will not see this content and it will not be indexed as a result.
So far, only Google knows how to handle JavaScript, so if you want your JavaScript content to be seen by all search engines, we recommend using dynamic rendering or server-side rendering.
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. 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.
Thanks For sharing this kind of information about react native app development services.
Sure thing! Let me know if you have any requests on how to expand the topic and I’ll write everything out.