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?
Table of Contents
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 (<a>). Link/anchor elements establish clear hyperlinks between pages, demonstrating connections between different pieces of content on your website.
- Asides (<aside>). This semantic HTML element pinpoints content that’s only partially related to the primary content of the page, such as sidebars.
- Figures (<figure>). Figure tags typically offer descriptions of illustrations, images, or diagrams – along with a caption describing why the figure is relevant to the main text.
Semantic HTML: Not an SEO Ranking Factor
According to Google’s own John Mueller, “semantic HTML does help to understand a page. However, it’s not a magical multiplier for making a website rank higher.” He goes on to urge all website owners to incorporate semantic HTML into their websites, despite the fact that it’s not a ranking factor: “Please use semantic HTML. It’s not a ranking factor, but it can help our systems to understand your content better.”
So, while semantic HTML isn’t going to directly help you rank higher, it can be beneficial for your SEO strategy. In this way, it’s comparable to building a following on social media. Having more followers and shares on social media isn’t necessarily going to help your website rank higher directly, but it can help you earn more links, improve traffic flow to your website, and help you in a variety of other secondary ways.
How Does Semantic HTML Help Google Crawl Your Website?
How exactly does semantic HTML help Google crawl and understand your website?
- Providing clear structure. A knowledgeable, experienced human being should be able to understand the logical organization of your content, assuming it’s written reasonably enough, without any high-level structure to guide them. But for soulless bots, discerning your structure and organization is much harder without guideposts. Semantic HTML provides a very clear system of structure and organization to your website so that bots can delineate between different sections, understand how those sections relate to each other, and even parse data easier.
- Offering meaningful descriptive context. Semantic HTML tags also feed bots with meaningful, descriptive text, which often provides context to the content that surrounds it. For example, you might describe what’s happening in a photo, then use HTML to make comments about why this photo is relevant to the rest of your content. You can also define your sections and lists, and provide helpful details about the relevance of each piece of content on your website.
- Using table tags for organizing data. Table tags are indispensable for organizing data. If you have lots of figures to put on display, semantic HTML will make it easier for Google to understand how they work and what they’re saying.
How Does Semantic HTML Help Users?
What about the user side of the equation?
- Screen reading and assistive software users. Blind and visually impaired users may be unable to see your photos, illustrations, graphs, and graphics clearly. But if they have screen reading or other types of assistive software available, they can get access to your semantic HTML descriptions. This way, they can understand your website just as well as a user who isn’t visually impaired.
- Keyboard navigation. Semantic HTML is also useful for people who rely on a keyboard for website navigation. If a person has motor disabilities, or if they just prefer keyboard navigation to other types of navigation, they’ll have a much easier time browsing websites with effective semantic HTML in place.
- Responsive flexibility. In some cases, appropriate semantic HTML tagging can facilitate better and more appropriate sizing flexibility in responsive websites. If you’ve clearly marked how your content is organized, it will never be broken or shifted in a way that causes confusion for users.
- Future access. Including more descriptive, consistent semantic HTML throughout your website is a way of future proofing it. Just by keeping your HTML better structured and organized, you’ll set yourself up for easier website maintenance in the future. As technology evolves, semantic HTML is only going to become more important.
Tips and Strategies for Using Semantic HTML
Semantic HTML for SEO is about more than just including a wider range of HTML elements on the back end of your website. These tips and strategies can make sure you get the greatest value for your semantic HTML investment.
- Choose a convention and be consistent. Google isn’t picky about how, exactly, you use your HTML elements. In other words, there’s no prescription for exactly which tags you should use and how you should use them. Instead, what’s most important is that you remain consistent within your website. Choose a convention that makes logical sense and make sure every page of your website follows the same standard; if your structure or formatting is inconsistent, it could lead to crawling errors or a worse user experience.
- Don’t use HTML tags for aesthetics/styling. Certain HTML tags have an effect on styling and aesthetics of your content, but you shouldn’t use HTML tags for this purpose (at least, not exclusively). For example, header tags are meant to denote headings and new sections; you shouldn’t use them to arbitrarily increase the size of your text.
- Establish clear order and hierarchy. One of the most important functions of semantic HTML is establishing order and hierarchy, so use your tags wisely to do this. Make it clear how your secondary sections and subheadings relate to the broad topic (and include numbers when relevant).
- Avoid the temptation of copying your high-level organization. Search marketers are often tempted to include the titles of their sections and subsections, verbatim, in their organizational semantic HTML tags. But this isn’t always the right strategy. Consider tweaking your verbiage to make your organization and context clearer.
- Offer concise, meaningful descriptions. Remember your goal of improving accessibility for your users. Visually impaired users and others with non-conventional ways of exploring your website still deserve to have the full experience; your job is to offer concise, meaningful descriptions for any content they wouldn’t be able to consume normally. That means making it clear why this content is important (and doing so without extra fluff).
- Include target keywords (with caution). Despite the fact that semantic search has been a part of Google search for about a decade now, keyword optimization is still important for your SEO campaign. Accordingly, you may consider including target keywords and phrases in your semantic HTML strategy to increase a page’s relevance for those target words and phrases. However, you should do so with caution; keyword stuffing could end up getting your website penalized.
- Keep your users in mind. When in doubt, optimize for your users. This isn’t a direct ranking signal, so there aren’t many clear ways to “game” the system using semantic HTML tags. However, you should have a good idea of how your semantic HTML tags can be used to generally improve the experience of your users; follow those instincts and you’ll likely see positive results with both search engine bots and people.
Are you confused about this whole semantic HTML thing?
Or do you find yourself lost when it comes to onsite SEO in general?
You don’t have to do this alone.
SEO.co is home to a team of seasoned SEO experts who can help you with everything from initial planning and keyword research to ground-level content development and link building. If you’re ready for your free consultation, contact us today!
Tim holds expertise in building and scaling sales operations, helping companies increase revenue efficiency and drive growth from websites and sales teams.
When he's not working, Tim enjoys playing a few rounds of disc golf, running, and spending time with his wife and family on the beach...preferably in Hawaii.
Over the years he's written for publications like Forbes, Entrepreneur, Marketing Land, Search Engine Journal, ReadWrite and other highly respected online publications. Connect with Tim on Linkedin & Twitter.
- How to Rank for Local SEO in Multiple Locations - April 16, 2024
- SEO for Mass Tort Lawyers: Everything You Need to Know - April 3, 2024
- Natural Backlinks vs. Unnatural Backlinks: How to Build a Natural Link Profile - April 1, 2024
