Basic HTML Tags You Need To Know For SEO

Understanding the basics of HTML lets you better diagnose problems on your website that affect SEO and user experience. You don’t need to understand everything about HTML, or even be an expert, but there are a few basic HTML tags you need to know. Knowing these basic HTML tags will also improve your communication with a developer, allowing you to write more effective JIRAs and have more productive conversations.

How Does HTML Work?

Let’s start with the basics. A website’s content is coded in HyperText Markup Language or HTML. HTML marks up the text, images, videos, and other content presented on the web page. Each type of content is marked up using different types of tags. For example, <p> for a paragraph or <img> for images. This markup provides the basic structure of the web page—for example, within HTML you can specify what text is a header, sub-header, or main text.

The web server hosting the website sends the HTML code for a page to a browser when that page is requested. The browser interprets (or parses) this markup to determine how to output and display the page. As a simple example, when a browser sees a <strong> tag, the browser knows to bold the text contained within that tag. Robots from search engines use a headless browser to parse these tags, allowing these bots to see the website like other visitors.

How Do You View a Page’s HTML?

There are a few different methods to view the HTML for a web page (called viewing the source), but the easiest method is to go into your browser, open the web page, and then right-click anywhere on the web page. Then click “View page source”. This will open a new tab containing the source of the web page. What you see on View Source is the code as it is delivered to the browser from the web server called the server-side or raw code.

If you have a lot of JavaScript that runs on your website and manipulates your HTML, the HTML contained in View Source may not accurately reflect what appears in the browser. To view the HTML after JavaScript has manipulated it, you can select “Inspect” instead. Selecting “Inspect” will open a new panel that shows you the code for the website, referred to as “Elements”.

Two Parts of the HTML Head & Body

There are two parts of an HTML document: the head and the body.

The head contains information about the page but is not visible in what the browser displays. In the head, you’ll find links to JavaScript and CSS files, along with meta tags that describe various aspects of this page. As well, many types of analytics code should be placed inside the head in order to accurately track traffic and to get an accurate understanding of conversions. Human visitors won’t see what is contained within the head, though what is available in the head will be important for how browsers present the page. What is contained in the head is also important to search engines.

The head begins with the <head> tag and ends with the closing </head> tag.

<head>
…
</head>

The body contains the code that controls how the website appears. This includes all the content that people see when visiting the website and the various layout elements that determine the page’s design and layout. In the body, you’ll find header tags, hyperlinks, paragraph tags, and more. The body begins with the <body> tag and ends with the closing </body> tag.

<body>
…
</body>

title

Located in the head, the title tag is what specifies the name of the page as displayed in the browser and as displayed in search results. It begins with <title> and has a closing tag of </title> at the end of the tag. For example, this is Elementive’s title tag:

<title>Elementive | Tech SEO Research & Consulting</title>

The title tag is displayed to a visitor in the browser as the name of the document in the tab. If a visitor bookmarks your page, the title is used in the bookmark bar as a reminder to that person what page they bookmarked.

The title tag is used by Google and Bing to understand the page. It is not the most important signal but you want to make sure you use appropriate information in the title tag so that search engines correctly understand the page.

More importantly, though, the title tag is also displayed in the search result (though Google may rewrite the title tag). The more compelling and descriptive the title tag, the better your chances of getting people to click on your website in the search results.

There should be one—and only one—title tag on each page. If you have more than one title tag, you have a problem to address. However, Google will typically ignore the second title tag or combine the second title tag with the first. Most browsers will also ignore the second title tag.

To make sure the title tag displays correctly within search results the length should be between 50-60 characters. Note that Google no longer measures title tags by character count, but instead by pixel count, which means the size of the letters used in your title tag will alter the length. This means if you use all caps (please don’t!), you will need to write title tags closer to 40-45 characters. Moz has a helpful tool for previewing title tag length.

meta

A meta tag describes information about the page, referred to as the page’s metadata. This can include the author of the page, the character encoding, the viewport size, how robots should interact with the page, and a description of the page.

A meta tag is located in the head of the document and you can have as many unique meta tags as are appropriate for your website. Unlike most of the other tags discussed in this post, the meta tag is a self-closing or singleton tag—that means everything is contained within attributes of a single tag and you will never see a closing meta tag.

Meta Description

A meta description is a meta tag with a name attribute set to “description”. The text of the description is included within the content attribute. For example, here is Elementive’s meta description tag:

<meta name="description" content="Elementive is a Colorado-based consulting firm that helps clients with technical SEO, research and web analytics. Contact us today to learn how we can help you.">

Google may display this description in search results. However, there are plenty of instances where Google chooses other text to display instead of the meta description. Although the description doesn’t change where your website ranks, the description can encourage more people to click on your website from a search result.

Meta Robots

The other type of meta tag that is often used in SEO is a meta robots tag. This meta tag has a name attribute set to robots. The content attribute can contain two sets of information: whether the page should be indexed (index or noindex) and whether robots should follow links contained on the page (follow or nofollow). Learn more about the meta robots and setting robot controls. For example, here is a meta robots tag sets the page to noindex and nofollow. This example would prevent a robot from including the page in a search result and prevent a robot from following links contained on this page.

<meta name="robots" content="noindex,follow">

link / canonical tag

The link tag is also placed in the head and it is used to define links to other resources needed for this page. The link tag, like the meta tag, is a singleton or self-closing tag, meaning you won’t see a closing link tag. Instead, all the information needed is included in attributes within the tag.

While this is traditionally used to include stylesheets that dictate different aspects of the website design, the link tag is also used to define a canonical. A canonical URL helps to control and prevent duplicate content on a website. In a canonical tag, you define a rel attribute set to canonical and an href attribute set to the canonical URL. For example:

<link rel="canonical" href="https://www.domain.com/canonical-url">

h1

An h1 tag is the highest-level header in a page’s hierarchy. This tag should be used to define the page’s name. Search engine bots can use this tag as one way to understand the intention of that page. There should only be one h1 tag on any given page and it should contain the name of the page. If you see more than one h1 tag, that won’t break anything for users (it is technically valid HTML) but it might cause ambiguity and worsen the experience for visitors who use screen readers.

It is worth noting that you can display the page’s header using other tags that are styled to look like a header. Google may use these styles as an indication of a page’s structure and treat this text the same as an h1. Human visitors rarely can tell the difference, unless they are using a screen reader and need the h1 to be used correctly to understand the page. To be certain Google and all users correctly understand your page, it is best to place an accurate name for the page in an h1 tag.

When you view your source code, see if you can find an h1 tag in the <body> of the HTML document. If you do have an h1 tag, make sure it contains a descriptive name for the page that accurately characterizes the page’s content. Next, check to make sure you only have one h1 tag. If you see multiple h1 tags in the source code on your website’s pages, talk to your developer to resolve that and reduce to using just h1 tag.

The h1 tag begins with <h1> and it has a closing </h1> tag. As an example, here is the h1 tag used on this blog post:

<h1>Basic HTML Tags You Need To Know For SEO</h1>

header tags – h2 to h6

There are six levels of header tags, including the h1. Some claim that an h2 matters for SEO, but there is little evidence this is the case. To help with accessibility perspective, such as supporting visitors using screen readers, these additional headers do matter to communicate the structure of your page. Given this, even if it doesn’t directly help SEO, I recommend using appropriate header tags to accurately convey how your page is organized. In this article, there are plenty of examples of h2 and h3 tags to break up different sections. View the source of this blog post to explore how h2 and h3 tags are used to communicate the page’s structure.

a

The a tag defines a hyperlink. This means the a tag is not only important for SEO but is (arguably) the most important tag in all of HTML. As you look through your source code, you should see a large number of a tags that route people to different parts of that page or different pages altogether.

An a tag begins with <a> and ends with a closing tag of </a>. In between the tags, you’ll see the linked text, also called the anchor text. An example of an a tag:

<a href="/books/">Matthew's Books</a>

The most important attribute with an a tag is the href, which stands for hypertext reference. That href attribute in the above example goes to my website’s books page. The href is what makes the a tag a link and defines where this link will take the visitor (or the search robot) when the link is clicked or tapped.

The other attribute to pay attention to is the rel attribute, or the relation attribute. The rel attribute specifies how the page containing the link relates to the page that is being linked to. In SEO, the most common rel attribute is nofollow, which changes how Google will view the page being linked to (learn more about rel nofollow here).

img

Finally, we have the img tag. The img tag states that an image should be included in a particular location of a page. The img tag is self-closing containing various attributes within the <img> tag.

The most important attribute in this tag is src. The src defines the source URL for the image. Although not a direct ranking factor, it is helpful to have the name of the image be descriptive and include appropriate keywords as this can help the image rank more highly in search results. Make sure that your website’s images can be crawled by search engine robots and aren’t blocked by any robot commands. Here is an example of an img that has a src to my headshot:

<img src="https://www.matthewedgar.net/wp-content/uploads/2026/08/matthew-edgar-headshot-profile.webp">

Along with the src attribute, another important attribute for SEO is alt. The alt attribute defines the alternative text describing the image to any visitor who can’t see this image. Visitors who can’t see the image include people with screen readers and search engine robots. You want to make sure your alt text accurately describes the image and uses appropriate keywords where possible because, among other benefits, doing so will help your image rank highly in search results. Learn more about writing proper alt text for your website’s images. Here is that same example image, but with an alt attribute added.

<img src="https://www.matthewedgar.net/wp-content/uploads/2026/08/matthew-edgar-headshot-profile.webp" alt="Matthew Edgar, Technical SEO Consultant, Elementive">

Other important attributes are height and width. These define the size of the image that will be displayed in the browser. These do not directly affect how your image or how the page containing the image will rank in search results. But these attributes can help you diagnose issues with speed. If, for example, you have a 500 pixels wide image, but the width attribute is set to 200 pixels, then you are loading a larger image than you need and that will slow down this page’s overall load time.

The final attribute I’ll mention is the loading attribute. This can be set to lazy, which tells the browser to delay loading this image until the image is about to be scrolled into view. This will improve speed because not all images will need to be loaded immediately but can be delayed until they are needed. You only want to use this on images lower on the page because the images at the top of the page are needed as soon as the page is loaded.

<img src="https://www.matthewedgar.net/wp-content/uploads/2026/08/matthew-edgar-headshot-profile.webp" alt="Matthew Edgar, Technical SEO Consultant, Elementive" loading="lazy">

Final Thoughts

Hopefully, this guide through basic HTML tags for SEO will help you better understand how your website is built and how search robots view the page. If you’ve never looked at your website’s source code, I highly encourage you to do so. You don’t need to understand all of it, but the important part is understanding the key aspects that impact your SEO work. If you have any questions or would like help looking at your website’s technical structure, please contact me.