
Why Semantic HTML Is Important for SEO (Even If It’s Not a Ranking Factor)
We all know, but sometimes forget that every website we visit looks a lot different on the back end than it does on the front end. We usually see a beautiful, inviting layout with some of the best content this website owner has to offer. But on the back end is an unintuitive, sometimes jarring smattering of computer code. If you’re familiar with HTML, or any modern programming language, you might be able to parse this, at least slightly – but even the most experienced programmers out there would probably admit it’s easier to understand and engage with a website without this code complicating things. For most people, this is the case. But the web isn’t just about “most people.” We also need to think about people with disabilities. And believe it or not, we also need to think about bots. Even though most people will never see or interact with it, the semantic HTML on the back end of your website can have a meaningful impact on your search engine optimization (SEO) strategy and make your site more accessible and navigable for millions of people. So what exactly is semantic HTML? And why is it so important? What Is Semantic HTML? Before we can understand semantic HTML, we need to understand HTML. Hypertext Markup Language (HMTL) is the standard markup language for any materials that are designed to be displayed in web browsers. In other words, it’s a system of scripting and tagging that makes it easier for websites to be interpreted and displayed by web browsers. By default, these browsers don’t display HTML tags; instead, these are featured and processed only on the back end. HTML tags are indispensable in building web pages, and you can use them to deliver specific content assets, provide structure, and even include scripts to influence how the web page is processed and used. Semantic HTML is a strategy of intentionally using HTML tags to offer meaningful descriptions of content on your website. When reviewed, these descriptive HTML tags provide context to help crawlers and bots “understand” the purpose and structure of your website. Semantic HTML elements, while arguably unnecessary for your page to be a minimum viable, functioning product, are incredibly useful for keeping things organized and described in accessible language. It’s perhaps easiest to understand semantic HTML in relation to non-semantic HTML: non-semantic HTML tags like <div> and <span> are used to hold content, but they provide no meaningful descriptions of the relevance or meaning of that content. A website without semantic HTML might have all its content housed with these two tags. In contrast, a website with semantic HTML would use a wide variety of tags and elements to appropriately structure and organize that content. Why Does Semantic HTML Matter? Why should you care about semantic HTML? Well, for starters, it makes the lives of designers and developers much easier. When you look at the HTML code of a website, semantic HTML tags make it incredibly easy to parse. You can see how the author of the website wanted the content to be organized, and even find helpful descriptions about the types of content that are offered. Think of it like a book with an in-depth table of contents, clear chapter titles, bookmarks to flag important sections, and highlighted words throughout the text; it would be much easier to read this book than a book with all of the same text, but no real formatting for navigability or readability. Second, semantic HTML is a way of making your structure, hierarchy, and context clear for bots that crawl your website. Already, you’re probably thinking of the SEO implications; semantic HTML may not be a Google ranking factor, as we’ll see, but it can be valuable in ensuring your website is crawled, indexed, “understood,” and displayed appropriately by Google and other search engines. Depending on your goals, and how you use semantic HTML, this could be a strategy for improving the relevance of specific pieces of content for specific keywords and phrases, changing how your web content is viewed or displayed, or making your best content available in search engine results pages (SERPs). Third, semantic HTML elements can make it easier for people with certain types of disabilities to consume your content and browse your website. For example, people with visual impairments may not be able to see the photos on your website, but they may have software that allows them to read/hear a description of the alt text that describes what’s happening in the photo. To this end, mastering the art of semantic HTML makes your website more accessible. Semantic HTML Elements Semantic HTML can be used across a wide range of elements, including: Header tags (H1-H6). Headings are used to establish a hierarchy with clear labels, and can be used to describe the content included in a given section. The <h1> tag is the most important, with <h6> being the least important. Onsite SEO best practices typically dictate optimizing these header tags with meaningful descriptions – and target keywords. Paragraph tags (<p>). This HTML element is used to represent a block of text. It defines a paragraph for web crawlers. Lists (<ul>/<ol>). Lists can also be used to organize content with unordered and ordered list elements. You can also use <li> to define individual list items. Tables (<table>). While you’re organizing data, you can use the <table> element to create a table, with descriptions for rows (<tr>), columns (<th>), and individual data cells (<td>). Images (<img>). As you can guess, <img> allows you to describe and provide context for photos and graphics. With the alt attribute, you can describe what’s contained in the image, which is especially important for visually impaired users. Articles (<article>). All your news stories, blog posts, and other types of reusable content can be marked with the <article> element. Sections (<section>). These tags allow you to establish different components of a cohesive piece of content, such as chapters of a bigger document. Links or anchors