What is HTML?
HTML stands for HyperText Markup Language and is a markup language for web pages. The markup includes a series of <> tags along with a corresponding </> tag. It is an easy way to markup text, images and videos into a website.
Originally, HTML also included fonts and font-sizes that you would use. However, as time progressed this role moved to Cascading Style Sheets (CSS). Over time it has further been enhanced through server-side scripts such as PHP Hypertext Preprocessors (PHP).
The current iteration of HTML that the web uses is HTML 5, though most browsers support backwards compatibility with earlier versions.
Essential HTML Tags for SEO
Learning HTML is an integral part of developing as an SEO. However, these tags are especially important to learn. Furthermore, you will also need to learn when to use each tag.
Below, I’m going to cover the six most important HTML elements. Additionally, you can find more information over at W3C Schools.
1. Title Tags
Title tags are essential to all search analysts. It is the most potent factor for Google in determining how a page should rank. These tags are easy to implement between the <head> and </head> tags.
To implement this, you can write <title>Your Page Title Goes Here</title> in the head section.
Depending on which Content Management System you are using, it may change how you implement these tags into your page.
You can find out more in the SEO Checklist: Page Titles article.
2. Heading Tags
The heading of each article is essential for helping users to understand the purpose of the page. Typically, the strongest headings are h1 tags and h2 tags. However, it’s more important to structure them properly.
For example, here is how this article has structured its headings to detail to search engines the structure of the content correctly:
- <h1> HyperText Markup Language (HTML) </h1>
- <h2> What is HTML> </h2>
- <h2> Essential HTML Tags for SEO </h2>
- <h3> 1. Title Tags </h3>
- <h3> 2. Heading Tags </h3>
- <h3> 3. Image Tags </h3>
- <h3> 4. Inline HTML Tags </h3>
- <h3> 5. Meta Tags </h3>
- <h3> 6. HTML 5 Semantic Tags </h3>
As you can see from the above structure, each <h2> represents a new section to the content. Inside this section, there are subheadings that use <h3> tags to indicate that they are nested inside of the <h2>.
This structure is the correct way to markup your page headings. You should avoid using too many <h1> tags or <h2> tags just to manipulate the algorithm.
3. Image Tags
Images are an essential part of building a website. It helps to bring a sense of interest to your page, but also, it provides meaningful content. Part of creating a site using HTML requires you to use the <img> tags.
From an SEO perspective, there are several factors that you should consider:
- Alternate information provides a text description within the attributes of the <img> element. It is regularly referred to as the “alt tags”, despite being an attribute of images.
- Files are named appropriately, to be descriptive of what the image includes.
- Reduce the file size as much as possible through compression and using the correct image dimensions.
There are other factors to consider, but these three are the most important.
4. Inline Content Tags
HTML separates tags into block elements and inline elements. A block element visually starts on a new line, while inline elements exist inside the current line. An example of a block element is the <p> tag. Each paragraph starts on a new line.
Examples of inline tags include <b> or <strong> tags. Both of these tags give the document information on how to display content, rather than creating a new block of content.
|<b>||If you would like to bolden text without placing importance, then this tag can help you out.|
|<strong>||Similar to the <b> tags, these can bolden your content. However, they also place strong importance on the text.|
|<i>||If you would like to italicize text without placing importance, then this tag can help you out.|
|<em>||Similar to the <i> tags, these can italicise your content. However, they also place a strong emphasis on the text.|
|<span>||Functions similar to a <div> tag, except this is inline as opposed to a block element.|
5. Meta & Link Tags
Some of the most important tags for HTML aren’t visible to the users. You can use both the <meta> and <link> tags for essential tasks in web development, and you should know the difference.
Meanwhile, the <link> tag is used to indicate a connection between a document and an external resource. For example, CSS files are often stored externally and are referenced using link tags. References can exist in both the <head> and <body> of a page.
Link tags are also often used for pagination, which is an essential way of connecting multiple pages on the same topic. Similarly, both Canonical Tags and hreflang information is stored inside of the <link> elements.
Both the <meta> and the <link> tags display no content on the page. It makes them great for storing important information that you do not want users to see on your website.
6. HTML 5 Semantic Tags
HTML 5 takes advantage of several block elements that include semantic meaning. Previously, the <div> tag was used to make divisions, and it was near-impossible to understand web page wireframes.
With the addition of new block elements, this problem no longer exists. Instead, you can specify the type of division. An example is the <nav> which determines the page navigation. Although, it maintains the same functionality as a <div> tag.
When learning HTML for SEO, it’s important to familiarise yourself with these basic building blocks.
|<nav>||Functions the same as a <div> tag, but indicates it is a navigation.|
|<main>||Indicates that the content between here is the main body of content. It can be used between a <nav> and <footer> tag to cover all the main content.|
|<footer>||Functions the same as a <div> tag, but indicates it is the footer.|
|<article>||Functions the same as a <div> tag, but indicates the content inside is an article.|
|<section>||Functions the same as a <div> tag, but indicates a specific section of the content.|
|<header>||Surrounds several heading tags to indicate that they’re all part of the article’s headings. For example, your main heading followed by a subheading and teaser.|