Using Semantic HTML for User Experience, SEO and Accessibility

Semantic HTML guides large portions of the entire internet, both for search engine crawlers and human visitors. Do you know how your business’s website is utilizing it?

Coding isn’t exciting for many people. Understanding how HTML elements relate to page structure and readability can seem a bit boring.

That’s why this is something that gets ignored by a lot of companies. It’s also what makes it a great opportunity for others willing to put in the work.

Semantic HTML is built into everything we do here at Leadflask, and we actually happen to think it’s kind of awesome. I hope a little bit of that enthusiasm rubs off on you after reading this article.

What Is Semantic HTML?

Semantic HTML, also referred to as semantic markup, are simple tags in the code of your website that relate to the meaning of the content contained within them.

For example, if you looked at most websites’ code, you’d see something like this:

…a bunch of lines of code of things in the header…

</header>

Those bracketed header words are the beginning and end of the header tag.

This helps search engines understand your site. It also helps your website designer. If you want a particular font used in the header of your website, they can then apply a font that applies to any text within the <header> tag, and it will populate sitewide. This saves tons of time as opposed to manually editing every line of code and every page where you’d want that font.

Heading Tags

Now I’m going to throw you a small curveball, because heading tags and header tags are different.

A header is usually at the top of a webpage, and deals with broad information like a main navigation menu, your company’s name and logo, and perhaps basic contact information.

Heading tags refer to headings like we’d think of in an article or table of contents. The heading of your page is the main idea. Subheadings are related ideas that are a subset of the main idea. And so on.

Some coders or content marketers will refer to these by shorthand labels such as H1, H2 and H3. Your page heading will be your H1, the sub-topics are H2s, and so on. HTML code that makes up a website can support up to H6 level, or a sixth level of heading that is nested in earlier levels.

Why is this important? Because headings are how you provide context for readers, and also how you teach search engines (Google, Bing, DuckDuckGo, etc.) what topics and ideas are most important on a page.

If I’m reading and I see large, bolded text, I know this is one of the main ideas of an article. If a heading beneath it is smaller but still larger than paragraph copy, I know that it’s another main idea, but a lesser one that likely relates to the earlier, larger text. This structure helps with reading comprehension.

Intuitive use of heading tags serves both functions of great web writing: being user-friendly and also easily understandable by search engines.

Structuring and Nesting Content

We talked about nesting content above in regard to heading tags. It’s valid to think of H3s as nested beneath H2s, for instance.

Nesting can occur in other ways as well, and programmers will handle these via semantic HTML tags.

It can often be useful to think of these tags as tools for structuring content. Nesting is one way to structure content, but not every tag listed below will always be in a nested structure.

<header> - mentioned earlier, but worth repeating. The items at the top of a website are usually continued within the header. This could also include information specific to search engines to help them interpret a website.
<nav> - this refers to navigation. You’ve undoubtedly seen navigational links near the top of most websites. Often, the <nav> tag is nested within the header tag. However, navigational items can be used elsewhere.
<article> - it’s useful to think of this as separate from a written article, since an article tag can appear on any type of page. It refers to self-contained content, such that it could stand on its own without context around it.
<section> - sections are more intuitive. If a grouping of content and other webpage elements have a consistent subject, they can be grouped into a section. This tag often helps web developers visually separate sections of a webpage, without worrying about visually separating elements that should be grouped together.
<aside> - exactly what it sounds like, and can be likened to a whispered aside in a film or stage play. Asides are tangentially related to the main topic, and are often separated visually on a page either literally to the side or in some other obvious way.
<footer> - opposite of the header in most respects, we’ve all seen footers on a website. These generally include site navigation links, address and contact information, and often social media links for the individual or business whose website it is.

Creative use of these tags can give you a lot of freedom in structuring content, which also helps designers to provide a visual layout that supports the content of a website.

Text Tags

Text tags are tags that denote paragraphs, numbered or bulleted lists, the aforementioned headings (H1 through H6), and words that should be emphasized, among a handful of others.

Importantly, the tags themselves relate to how the text is read by search engines, but adding - for example - the <ol> tag to some text (the tag for Ordered Lists) won’t automatically format your text as you’d like into a neatly packaged ordered list.

Rather, this can again aid designers, since they can apply stylistic elements to anything inside the <ol> tag.

Differences Between Semantic HTML and CSS

We’ve danced around this topic, but let’s state it outright: HTML tags don’t deal with the styling of those elements on a page. CSS - a related coding language - is used to style semantic elements on a page and website.

Stated differently, HTML deals primarily with what something is. CSS deals with how it looks.

The two work hand-in-hand on most sites, and will be incomplete without the other.

Semantic HTML and Accessibility

HTML tags can be useful for accessibility as well. For blind or otherwise sight-impaired users of websites, semantic tags can help users to understand how content is sectioned on a page, and what is separate or related on a page.

Clear semantic tags can do this on a pagewide level, and also for specific text if it should be separated or emphasized relative to the text around it.

Accessibility is lacking on many websites, and semantic tags aren’t the only step developers need to consider when designing for accessibility. But it’s a step in the right direction and can assist some who would otherwise struggle to use a site.

How Semantic HTML Affects SEO

Search Engine Optimization, or SEO, is a necessity for any website trying to create or maintain a robust digital presence that generates leads and revenue.

How you structure your pages using semantic HTML tags is one way you can improve your SEO.

Perhaps the most important semantic elements, and the ones most SEO experts will be familiar with, are heading tags. Savvy use of H1, H2 and H3 tags (and others if needed) can help to categorize not just individual pages but your entire website for search engines like Google and Bing.

A page’s h1 tag will carry more SEO weight than an h2, and so on. In this way you can create hierarchies of concepts within your industry, helping search engines to prioritize your content effectively for relevant search inquiries.

Intelligent hierarchy on a page using semantic heading tags is a necessity for competitive industries and topics that have a lot of great web content on them.

The good news is that this is also what will be best for the user of your website, so you don’t have to compromise one to please the other.

Less Common HTML Markup

This article isn’t a comprehensive list of every semantic HTML tag. We’ve covered the most important ones for a majority of marketers and web developers, and also discussed the rationale behind them.

However, several other lesser-known semantic tags exist that can be used in specific situations as well. If you’re getting into web development and want to ensure that you’re working with the complete semantic toolbox, it’s worth checking out the latest lists of HTML tag additions, and practicing common uses for semantic tagging.

Using Semantic HTML Intelligently

Semantic HTML tagging is responsible for a user’s experience, how search engines interpret your website and present it to search engine algorithms, and it’s an element of creating an accessible website.

It does a lot, simply put. Any website you have designed for your business will include semantic elements, but only those businesses that understand how to best utilize these tools are the businesses that get the most benefit from them.

At Leadflask, every website we build is with the user experience in mind, and the company’s overarching goals for its digital presence. This includes leveraging the entire semantic toolbox as necessary to match our standards and our clients’ goals. If you’re interested in seeing what we can do for your brand, contact us today!