HTML tags you need for SEO

This article is intended to help you understand what HTML is and which tags and attributes are most important for web positioning.

What are HTML tags?

HTML (HyperText Markup Language) is the basic language we use to structure content on the web. We can think of HTML tags as "boxes" where we place content. Whether it's text, images, videos, or other elements that make up a web page.

Each of these boxes has a specific function: some define titles (<h1>), others describe paragraphs (<p>), or even links (<a>), images (<img>), and many more.

Over time, many of these boxes (tags) have been standardised so that all browsers interpret them in a similar way.

Although some HTML tags are essential for SEO, such as headings that help structure content, Google has made it clear that simple factors like the mere existence of these tags are not automatically ranking signals in themselves.

While valid HTML is not a ranking factor, and using an HTML standards checker tool won't directly improve positioning, there are tags and attributes that Google takes into consideration, and HTML errors that can affect a website's readability.

Parts of an HTML tag

For those of us who are technical, breaking down an HTML tag is as basic as it is necessary, because this is where it all starts. Each tag has its own role and structure, and knowing it in detail is essential to optimise any web page. Let’s go step by step:

Tag: This part always starts with a “<” followed by the name of the tag and can include attributes that add specific properties. For example, in <a href="https://example.com">, the opening tag is <a> and it has the href attribute, which defines where the link points.

The div tag is the most common and comes from the word "division". However, different tags have certain native properties that will be very useful to us.

Content: This is what goes inside the tag. In the previous example, the content would be the visible text in the link, such as "Visit us here". Not all tags have visible content (for example, <img> does not), but in many tags, such as paragraphs or links, the content is crucial for SEO, as it is what search engines crawl.

Attributes: These are additional instructions we give to the tag. They are in the opening tag and follow a name="value" format. Continuing with the link example, the attribute href="https://example.com" tells the browser where the link should lead. Other attributes like alt in images or title in links can also improve accessibility and SEO if used correctly.

Closing tag: Closes the box. It always has the same name as the opening tag but with a forward slash at the beginning: </a>. Without this closing tag, the browser wouldn't know when the content of the box ends, which can cause errors in the interpretation of the code. There are exceptions, of course, like <img> or <br> or our beloved <meta> tags, which are "self-contained" tags and don't need a closing.

Once we've understood this, we can look at some basic tags.

What are the basic HTML tags?

<head>: This tag provides the basic information about the page. These are usually non-visible elements but indicate files needed for the display of the page and meta tags. A meta tag, as its name suggests, is a tag that talks about the page itself.
<body>: This tag is where all the main content of a website should go.

<footer>: This is where we should put all the information we want in the footer of the page.

<header>: Corresponds to the visual header of a web page. This is usually where elements like the navigation bar are placed, and this tag should go inside the body.

<div>: This is the most common tag, although the HTML standard suggests using other tags like <section> or <article> to avoid using div for everything. It is used to divide content, as its name suggests.

<span>: The main difference between div and span is that when you place content in a div tag, that "box" is automatically created and forms a physical space. The span does not do this by default. So the span is mainly used to select a phrase or word within an element and highlight it with CSS styles.

<p>: This tag indicates a paragraph of text and is quite useful for separating different paragraphs of text.

<b>/<strong>: Both “b” and “strong” are tags for making text bold. If you've ever wondered, Google considers them to have the same effect.

Basic example of HTML for a simple website

HTML tags for SEO

There are certain HTML tags that we need to be aware of for web positioning.

Meta Viewport

The <meta name="viewport"> tag is used to control how content adapts to different devices. It is essential for mobile optimisation as it helps ensure that the site is "responsive", adjusting the size and scale on mobile devices.

Google prioritises mobile-optimised sites in its rankings, especially since the implementation of "Mobile-First Indexing". Poor use of the meta viewport can result in a poor user experience, which negatively affects SEO.

Image sourced from serpstat.com

Meta Tags

Meta tags <meta> in combination with attributes like name=”robots”, name=”description” or even Open Graph play a crucial role. They allow us to control the indexing and display of our content in the SERPs.

These tags are always responsible for describing features of the page itself.

Some even allow us to emulate server responses or indicate the canonical URL (canonical) of a different version of the URL.

Headings

The <h1>, <h2>, <h3>, etc., tags structure a page's content hierarchically. The <h1> is the main title of the page, while the subsequent tags (<h2>, <h3>, etc.) group important sections.

Summary details

The <summary> and <details> tags allow for hiding and revealing additional information when the user interacts. They are useful for displaying optional content more neatly.

Without needing JavaScript, they let us show content in an accordion mode, like FAQs, while ensuring that Google and other search engines can find these tags.

Tables and lists

Tables (<table>) and lists (<ul>, <ol>, <li>) structure content logically.

Search engines prefer clearly structured content. Well-labelled lists and tables make content analysis easier, and Google may even highlight them as rich snippets.

Nav

The <nav> tag indicates the navigation section of a website, generally used for the main menus.

A clear navigation structure improves user experience and makes it easier for search engines to crawl and index the important pages of the site. It helps enhance "crawlability" and the site's architecture.

Iframes

Iframes are used to display videos or external content on your website. They can be very powerful when combined with lazy loading techniques (such as loading="lazy" or “loads on interactions”) or when displayed directly with proper implementation of the indexifembedded meta tag.

IMG

The <img> tag is used to include images in content. It’s important to use attributes like alt and title to describe the image.

Well-optimised images with descriptive alt attributes help search engines understand the content of the image. This is especially important for image search and accessibility. Moreover, the correct use of the alt attribute can improve a page’s ranking if the keywords are well integrated into the description.

Picture

The <picture> tag not only allows serving images of different resolutions depending on the device's characteristics but also facilitates delivering different image formats.

This is especially relevant when it comes to optimising site load and performance, as some image formats, like WebP or AVIF, are much more efficient than traditional formats like JPEG or PNG, but not all browsers process them correctly.

Interesting HTML attributes for SEO

data-nosnippet

Prevents certain content snippets from being displayed in search results. It can be useful for controlling which parts of your page appear in Google's snippet.

If you want to prevent content like CTAs or the Cookie banner from appearing in your SERPs, it is a good option to implement on div, span, or section tags, which are recognised by Google.

loading="lazy"

Loads images or iframes only when they are about to be visible on the screen, improving initial load times.

This improves page speed, positively affecting Core Web Vitals, which is an important ranking factor. However, it should be used sparingly and only applied to content that is not displayed in the viewport.

rel

By using nofollow, ugc, or sponsored, we control whether or not Google should follow those links in an <a> tag.

Async and Defer

They optimise the loading of JavaScript scripts:

defer: Delays script execution until the HTML is fully loaded.
async: Executes the script in parallel with the rest of the page.

In short, when used correctly, they improve load times, which can influence Google rankings by improving user experience and Core Web Vitals.

ALT Attribute

Provides a textual description for images, used by search engines and for accessibility. It’s how search engines understand the content of the image and helps improve positioning in image searches.

How to analyse HTML tags

There are several ways to see what HTML tags your website has, and each one may have different uses.

Web browser

You can use your web browser to check the HTML tagging of a website. Since there are many browsers, I will explain the examples with Google Chrome, which is the most common browser. Although, in most cases, it is done in the same way.

Source

You can view the original source of your page's HTML by adding view-source: before a URL. For example:

view-source:https://ahrefs.com/blog/

Or by using the keyboard shortcut Control + U (or right-click > View page source) to view this information.

This method allows us to see what the code looks like that reaches our browser before JavaScript makes changes to the DOM (basically before JavaScript changes the code within the website).

This allows us to see what content is present before rendering, but since Google renders JavaScript, this way of analysing it, though relatively convenient at times, may be incomplete depending on the website's technology.

But it does allow you to see more or less what type of website it is, even from a mobile device.

Devtools

This is a more advanced way to view a page's HTML. The code we see here is the code after JavaScript acts and is the resulting and processed code that both Google and users end up seeing.

This tool is enabled by default in our browser, except on Mac, where it’s hidden.

We can view it with F12; with Control + Shift + I; or with Control + Shift + C; or by right-clicking > Inspect.

On Mac, we have to go to More settings > Developer tools:

And the keyboard shortcut in this case would be Option + ⌘ + I

The good thing about this is that if we click the little arrow at the top left, we can select the HTML element we want visually.

In fact, with this tool, we can modify the HTML to see how the content would look:

ahrefs

With the Page Inspect function in ahrefs, we can not only view the HTML of any page we have analysed, but also its entire change history. This is perfect for checking if the changes we requested from a developer were actually implemented.

We can also analyse whether there was any growth or decline based on changes to the HTML of our website.

Search Console

If we go to the page inspector in Search Console, we can analyse the HTML from Google's last crawl and even test it in real-time.

This allows us not only to see the rendered HTML of our website but also to know how Google is viewing it.

HTML search engines

If we want to see how an HTML tag or attribute works on a website, we can search for a website that contains it with an HTML search engine like PublicWWW or nerdydata. Especially if we use regex.