This article is written by an SEO expert for SEO professionals. The language is straightforward, and the concepts are simplified. If you’re looking to learn HTML like a developer, this might not be the best starting point. However, if you’re an SEO, you’re definitely in the right place. Let’s begin by discussing why it’s beneficial for an SEO to understand the basics of HTML.
Benefits of Learning HTML for SEOs : Improving Performance and Strategy
Unlocking Technical SEO Potential
The HTML source code of a page closely mirrors what a crawler sees, containing many elements that, while not visible on the page itself, exist within the code. As an SEO, it’s advantageous for you to identify these elements from the source code, as they might pose obstacles for crawlers attempting to crawl the page.
Conversely, there may be objects on the page that do not appear in the source code but are rendered for the user. It’s crucial for an SEO to be aware of these instances. This is because important elements of the page might be rendered with JavaScript on the client side, leading to potential delays or issues with Google’s ability to quickly and accurately index them. Understanding the basics of HTML enables you to recognize these elements and flag them to the development team before it’s too late.
Enhancing Collaboration Between SEOs and Developers
While HTML is a basic form of coding, it equips you with the confidence and knowledge necessary for sharing your insights with web developers more effectively. This foundational understanding helps bridge the gap between SEO and web development, facilitating smoother collaboration and more accurate implementation of SEO recommendations.
Less Dependence on SEO Tools, A Chance for Being More Creative
Although there are numerous excellent Chrome extensions and other paid and free tools available on the web, none can reveal 100% of the possibilities for optimizing a page. By reviewing the page’s source code—and even comparing it with the rendered code—an SEO can uncover vital opportunities to enhance a page’s SEO performance.
Understanding the basics of HTML enables a more comprehensive review of a page’s performance, assessing the efficiency of its code. As a website expands, it may accumulate unnecessary lines of code or sections that could be refactored for efficiency. More efficient code not only facilitates easier crawling by Google but also contributes to improved page speed, offering a better user experience.
How Much HTML Do SEOs Really Need to Know?
It’s not necessary for SEO professionals to write HTML code or understand every detail of a page’s source code to excel in their role. However, being able to read and comprehend the overall structure of an HTML page and recognize key elements relevant to SEO is crucial.
Basics of HTML
What is HTML?
HTML is not a programming language; it doesn’t control actions or process data in the way programming languages do. Additionally, without styling, HTML alone cannot create visually appealing web pages. It is, fundamentally, a markup language designed to structure content on the web, defining elements such as headings, paragraphs, and images. From my perspective, HTML is the most accessible and simplest form of code, and there’s no reason to feel daunted by it. To put it in terms more familiar to SEOs, consider HTML as the means of communicating with web crawlers. It allows us to specify which elements are present on a page. Since web crawlers currently lack the ability to visually perceive content, they rely on reading the source code—primarily written in HTML—to understand a page’s content.
Identifying and Understanding HTML Tags
When we view a webpage, we encounter numerous elements such as menus, featured images, headings (ranging from H1 to H3), paragraphs, images, and footers. In most cases, all these elements can be found within the HTML source code of a page.
HTML elements are identifiable by text enclosed within angle brackets (<>). Typically, an element begins with an opening tag (<tag>) and ends with a closing tag (</tag>). For instance, a simple paragraph is represented by the letter “p” in HTML. Below is an example of how HTML code for a simple paragraph looks:
<p>This is a paragraph.</p>As illustrated, understanding the basic structure is straightforward: an opening tag (<p>) indicates the start of a paragraph, and a closing tag (</p>) signifies its end. This rule applies to all other HTML elements on a page.
While the closing tag typically mirrors the opening tag with the addition of a forward slash (/), opening tags can vary in appearance and sometimes may be more challenging to recognize. We will delve into this topic further in the next section.
Understanding Opening Tags with Classes
Sometimes, an opening tag may include attributes like classes, making it appear more complex, such as <p class=”blog-paragraph”>. This addition might seem confusing at first, but let’s break down what a class is and why it’s used.
HTML is primarily for structuring a webpage, meaning that without any styling, the page would appear overly simplistic and challenging to navigate. To infuse design into HTML, we incorporate CSS (Cascading Style Sheets). CSS is responsible for beautifying the pages, dictating how browsers should display our content. However, it’s important to note that CSS is not a programming language but a styling language for specifying how elements should be rendered by browsers.
CSS code is typically housed in a separate file, often linked within the HTML file itself. This file, commonly named style.css, contains instructions for the browser on how to style different elements. For instance, if we wish for paragraphs on our blog to differ in appearance from those on our product page, we need a method to instruct the browser accordingly. We might specify that paragraphs on the blog should use Arial font, size 16, and dark grey color, whereas those on the product page should use Tahoma font, size 14, and black color.
This differentiation is achieved through the use of CSS classes. Classes allow us to assign specific styling attributes to any HTML element on the page, with those attributes being applied to all elements sharing the same class.
With this CSS background in mind, when you encounter <p class=”blog-paragraph”>, it simply signifies a paragraph (<p>) element assigned with the “blog-paragraph” class. Remember, class names can be anything, and my examples are chosen for their simplicity and educational value. So, the next time you see an HTML element with a class attribute, you’ll understand what it signifies.
Understanding Opening Tags with IDs
Now, what happens when you encounter something like <p id=”blog-paragraph”>? An ID is another way to apply CSS to your HTML, with the primary distinction being its uniqueness within a page. IDs must be unique—having multiple elements with the same ID can cause unpredictable outcomes. While IDs can be used to style specific elements distinctly, they hold particular value for SEOs in creating deep links to specific sections of a page. This allows users to navigate directly to a desired section via a click on a button or link. IDs are also useful for tracking interactions with specific elements, such as buttons.
To keep this article straightforward, we’ll pause the CSS discussion here. It’s essential to understand that encountering tags like <p id=”blog-paragraph”> or even <p class=”blog-paragraph” id=”first-paragraph”> is not as complex as it might initially seem. These are simply opening tags for HTML elements, indicating the start of a paragraph in these examples.
Therefore, a styled paragraph using a class might be represented as follows:
<p class="test-paragraph">...</p>Remember, whether using classes or IDs, the concept remains the same: they are tools to help customize and enhance the styling of web page elements, making your content more navigable and engaging for users.
Recognizing Inline CSS in Opening Tags
Is it only classes and IDs that can complicate an opening tag? Certainly not. You might encounter an element like <p style=”color:blue;font-size:18px;”>. But what exactly does this mean? Here, you’re witnessing CSS code applied directly within the HTML file, instead of being linked from a separate file like style.css. This practice is known as inline CSS.
So, the next time you come across an HTML element with a style attribute, understand it’s not something intimidating—it’s simply the opening tag of an HTML element, incorporating styling directly.
Given that our focus here is not on CSS, I won’t delve into the specifics of what style=”color:blue;font-size:18px” entails. However, it’s somewhat intuitive to grasp even without an in-depth explanation.
Now we understand that an opening tag of an HTML element can include classes, IDs, or inline CSS. But are these the only possible inclusions? The answer is no; there could be other attributes as well. However, for the scope of this article, we will leave the exploration here.
Essential HTML Tags for SEO
Now that we have a grasp on identifying the opening and closing tags of an HTML element, it’s the perfect opportunity to delve into other HTML elements beneficial for SEO. Generally, most web pages are structured into two main HTML tags: <head> and <body>. Let’s begin with the <head> tag and its components crucial for SEO.
The <head> Tag
Starting at the very top of a page, the first essential HTML element for an SEO is the <head> element. This section hosts critical information such as the title tag, meta description, directives like index or noindex, follow or nofollow, the canonical link, hreflang tags, and open graph tags, among others. While the <head> may contain various other elements, we’ll focus on those most relevant to SEO to keep things simple.
The <title> Tag
Our first point of interest is the <title> tag, typically found as <title>Your Page Title Here</title>. To locate the title tag in the source code, simply search for <title>, allowing you to verify whether the page has a unique title, which is vital for SEO.
Meta Description
But what about the meta description? It usually appears as <meta name=”description” content=”A brief overview of the page’s content.”>. Note that the <meta> tag does not have a closing tag. In HTML, <meta> is a void element, meaning it cannot contain content and therefore does not require a closing tag.
The Robots <meta> Tag
Another crucial <meta> tag to be aware of is the one for robots. To determine whether a page is indexable and followable by crawlers, look for a <meta> tag named “robots” and review its content. It typically appears as <meta name=”robots” content=”…”>, with the content possibly being “index, follow” or “noindex, nofollow”, among other directives.
The <link> Element
I’d also like to discuss the <link> element, which plays a significant role in the <head> section of a webpage. Unlike what its name might suggest, this element isn’t used to display internal or external links to users. Instead, its primary function is to define the relationship between the current document and an external resource. The <link> element is versatile, supporting a variety of use cases relevant to SEO, styling, and establishing document relationships. Here are some key applications of the <link> element that are particularly relevant to SEO and web development:
Linking external CSS files to HTML for styling purposes:
<link rel="stylesheet" href="styles.css">Associating a favicon with the webpage:
<link rel="icon" href="favicon.ico" type="image/x-icon">Specifying the canonical URL to help avoid duplicate content issues:
<link rel="canonical" href="https://example.com/page.html">Indicating alternate versions of a page for different languages or regions with the hreflang attribute:
<link rel="alternate" href="http://example.com" hreflang="en-us" />While there are additional uses for the <link> element, understanding these applications is crucial for anyone involved in SEO.
The Importance of <body> Tags for SEO
In our journey through HTML elements critical for SEO, we now turn our attention to the <body> tag. This section houses the main content of the webpage, containing numerous tags of significant relevance to SEO.
Headings
Let’s start with headings. When auditing your page for heading structure, look for the <h1>, <h2>, <h3>, and so forth. These tags are pivotal for structuring content and emphasizing key topics. An example of an H1 tag would be:
<h1>Your Main Headline Here</h1>Images and Their Significance
In HTML, the <img>, <figure>, and <picture> elements handle images but cater to different needs and functionalities.
The <img> Element
For SEO purposes, the <img> element and its alt attribute are important. To locate images on your page, search for the <img> tag and ensure it includes an alt attribute, like so:
<img src=”url-to-the-image” alt=”descriptive text here”>
Understanding the structure of an image tag can shed light on why optimizing the file name and alt text of an image is recommended for search engines. Since search engines cannot visually interpret images, they rely on the file name and alt text to understand and index the content effectively.
The <picture> Element
The <picture> element enhances flexibility in presenting images for various display conditions. Rather than using a single image that adjusts size across different viewports, it allows developers to specify multiple <source> elements tailored to different scenarios, such as screen width or pixel density. The structure of the <picture> element involves one or more <source> tags and a single <img> tag for fallback purposes. The browser selects the first <source> with a media query that matches the current viewport, displaying the appropriate image from the srcset attribute. The <img> tag serves as a backup if no <source> elements match.Here’s a sample <picture> tag setup:
<picture>
<source media="(min-width: 650px)" srcset="large-photo.jpg">
<source media="(min-width: 465px)" srcset="medium-photo.jpg">
<img src="small-photo.jpg" alt="A descriptive text about the image for SEO and accessibility">
</picture>The <a> Element
The <a> tag is essential for displaying links on a page, guiding crawlers to other pages via follow or no-follow links, alongside the anchor text. Here’s how a typical link appears in HTML code:
<a href="url goes here" rel="nofollow" target="_blank">Anchor Text</a>This tag supports attributes like nofollow, sponsored, and ugc. To determine if a link opens in a new tab or the same one, examine the target attribute: a value of “_blank” opens the link in a new window or tab, while a lack of this attribute or a value of “_self” keeps it in the same tab.
<button> Tag
The <button> element is designated for clickable buttons within a page. When auditing a page for SEO, it’s important to ensure that significant navigational links are enclosed within an <a> tag rather than a <button>. This distinction matters because Google may not follow links within a button, as they typically require user interaction. Here’s an example of how a button is coded:
<button>Click Me!</button>.<div> Tag
Frequently encountered, the <div> tag specifies a division or a section in an HTML document and is used for various purposes, from layout to styling. Its versatility means it can house any content or serve any function, which is why it’s indispensable for web design. Though there’s no direct SEO implication tied to <div> tags, their widespread use for structuring content makes them noteworthy for overall page organization and readability.
<footer> Tag
The <footer> tag defines the content of a website’s footer, a section that is pivotal for including navigation links, contact information, or copyright notices. It’s imperative to ensure that the footer is unique and not duplicated within a page to avoid confusion and maintain site structure.
Insights from the Field: Success Stories with HTML
I hope you’ve found the article insightful and helpful so far. Let me share a couple of success stories from my career to illustrate the practical benefits of understanding HTML.
Discovering Double Footers:
During a technical audit for a well-known brand, I didn’t solely rely on automated tools; I conducted my own manual examination of the website. To my surprise, I found that the site had two instances of the <footer> tag. This discovery prompted me to investigate further, leading me to realize that the site was loading a separate mobile footer within the mobile menu. The implications were significant:
1- Every internal link within the footer was duplicated across the website. If there were 20 links in the footer, Google would crawl 40 links instead. Given the website had over 5,000 indexed pages, the duplication was substantial.
2- The duplicate links affected the internal link structure as observed in the Google Search Console link report, highlighting the issue’s impact on SEO.
Unraveling Wrong Nesting:
In another instance, I encountered an image among many on a page that changed the cursor to a pointer and led to a 404 page upon clicking. The images weren’t supposed to be linked. A review of the source code revealed that the <img> tag was mistakenly nested within an <a> tag with a href attribute containing randomly generated text. Further investigation uncovered more instances of this error across the page. The consequence was:
- The random URLs leading to 404 errors had generated thousands of unnecessary URLs, causing a spike in redirected pages reported in our Google Search Console. This resulted in a significant portion of our crawl budget being wasted on non-existent URLs.
These examples underscore the importance of understanding of HTML basics, which enabled me to identify and rectify issues that significantly impacted the websites’ health and SEO performance.
The Importance of HTML Knowledge for SEOs
Understanding the basics of HTML can be really helpful for SEOs in conducting manual page audits and improving communication with developers. It can also boost your confidence when you’re faced with inspecting a page’s source code. I know HTML can seem intimidating at first, but I hope this article makes it feel more approachable.
Further Learning:
If you’re interested in diving deeper into HTML, check out W3Schools for a comprehensive guide on HTML tags:
https://www.w3schools.com/tags/tag_comment.asp
It’s a straightforward way to get more familiar with HTML and how it can support your SEO work.