Semantic HTML: What It Is and How It Improves Your Site

HTML is the language of the web — it determines what content appears on a web page and in what order. Those new to the language quickly learn that there are often several ways to create the desired effect with HTML and accompanying styling.

However, not all methods are created equal. Often, how you write your HTML is just as important as what your HTML shows to visitors.

Specifically, I’m talking about semantic HTML, HTML code that says what it does. In this introductory guide, I’ll introduce you to semantic HTML — what it is, how to write it, and why it’s important for every marketer and burgeoning web developer to adopt. We’ll finish up by listing some common semantic elements to add to your tool belt.

What is semantic HTML?

Semantic HTML (also called semantic markup) is HTML code that uses HTML tags to effectively describe the purpose of page elements. Semantic HTML code communicates the meaning of its elements to both computers and humans, which helps web browsers, search engines, assistive technologies, and human developers understand the components of a web page.

The key to well-written semantic HTML is the use of semantic tags. Semantic HTML tags have names that tell the person or machine reading the code what exactly they’re meant to do.

Here’s a basic example: The <p> (paragraph) tag is a semantic HTML tag — all content between its opening <p> tag and closing </p> tag is a block of paragraph of text. Anyone or any device reading this tag will understand its purpose.

Some other common semantic HTML tags are:

• <h1>, <h2>, <h3>, etc.: Headings on the page in descending order of importance.
• <a>: A hyperlink.
• <button>: A button element.
• <strong> and <emphasis>: These elements signal that the text inside them is important.
• <ol> and <ul>: Ordered and unordered lists, respectively
• <header> and <footer>: Denote the header and footer sections of a web page.

In each of these examples, the tag itself tells us exactly what the element is used for. In fact, many HTML elements can convey meaning with their tags, as long as they’re being used for the correct purpose (e.g., not using a <p> tag for a heading or an <h2> tag for a paragraph).

This then prompts the question: What HTML tags are non-semantic?

The most common non-semantic, HTML tags are <div>, a generic block-level element, and <span>, a generic inline element. While these tags are very useful for styling and formatting web pages, they don’t tell us much about the purpose of the content inside of them.

Take a look at the example below. Here, we have two identical button elements. However, the first element uses the <button> tag while the second uses the <div> tag.

See the Pen Semantic HTML - button vs div by Christina Perricone (@hubspot) on CodePen.

This example illustrates how different tags can achieve the same visual results — to a sighted, human user, the experience of using these buttons is the same. Even so, it’s always better to opt for the semantic implementation, in this case <button>. Next, we’ll explore why semantic markup is better than generic markup.

What are the benefits of semantic HTML?

Semantic HTML not only makes your code neater and easier to read — it also makes it more accessible to assistive technology and search engines. Let’s unpack each benefit below.

Accessibility

Screen readers rely on semantically-rich HTML to process web pages and help users with low vision navigate them. Semantic tags tell screen reader users where they are and how they can interact with the current page.

If a page is structured as a wall of <div> and <span> tags, it won’t be clear to those who can’t see the page how the sections relate to each other. The solution is semantic tags that divide a page into its constituent parts. At a basic level, <header> and <footer> should enclose the header and footer sections of the page respectively, <main> contains the important page content, <nav> can contain navigational links, and <aside> can contain secondary page content like a sidebar.

Many semantic elements also come with built-in keyboard accessibility. When a screen reader sees a <button> element on a page, it allows this element to be “clicked” with the enter key. The same can’t be said for the generic <div> — the tag alone does not tell the screen reader that this element acts as a button.

As another example, when a screen reader detects a <table> element, users can use special keyboard controls to move up and down rows and across columns. By writing clean, semantic HTML, you enable extra accessibility features with no extra work.

Screen readers also let their users navigate the page more efficiently by jumping between like elements, or pulling up a list of similar elements to summarize page content — one more reason to use semantic tags appropriately.

SEO

Like with assistive technologies, semantic markup helps search engine crawlers navigate your page to better understand its structure and contents. Semantic HTML is a great way to show search engines what to index and get the most from your crawl budget.

For example, the <main> tag encloses the main content of a page — use it to signal the unique parts of a page and avoid wasting indexing on repeated page elements. Place the less important content inside <header>, <footer>, and <aside>, and use the <nav> tag to point to your navigation menu where bots can go for site-wide links.

Human Readability

Web developers write and read hundreds of lines of code daily, so anything that makes their jobs easier is worth the effort. Semantically rich markup allows developers to locate specific page elements more quickly than sifting through a pile of <div> tags. Looking for the navigation on a page? Simply conduct a search for the <nav> tag.

Readability is especially important if you’re working on a team — you can’t expect fellow developers (or even your future self) to immediately understand your page from code alone. However, the better you organize your content, the more quickly other developers will see the structure and the more efficient your development will be.

Semantic HTML Tags

Since semantic HTML revolves around the proper use of tags, let’s review some common semantic tags you can implement on your site. We’ve broken these tags down into those used on text, those used to communicate page layout, and other handy semantic tags.

Semantic HTML Tags for Text

These tags convey the meaning of the text that they contain:

• <p> (paragraph): A paragraph of text presented as a block.
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (heading): A page heading. <h1> is the top-level heading, and there should only be one per page. The proceeding tags are ordered by descending importance. Browsers will apply font weight and size styling accordingly.
• <ol> (ordered list): A list of items that must display in a particular order. Browsers typically apply numbers to each item.
• <ul> (unordered list): A list of items in which order is not important. Browsers typically apply bullets or dashes to each item.
• <a> (anchor): A hyperlink. By default, browsers will change the link color to blue and add an underline which you can remove.
• <q> (quote) and <blockquote>: A quotation. Use <q> for shorter quotes and <blockquote> for longer quotes.
• <code>: Computer code. Browsers typically apply styling to differentiate this text from the surrounding text.
• <em> (emphasis): Emphasizes text. Most browsers italicize text inside this tag by default.
• <strong>: Draws attention to important text. Most browsers bold the text inside this tag by default.

Semantic HTML Tags for Structure

These HTML tags serve to group child elements into sections. Each section contains related content.

• <header>: The header of the page. Headers often contain the organization’s name and logo, primary navigation, a search bar, a sign-in prompt, and/or a shopping cart icon.
• <footer>: The footer of the page. Footers often contain additional information like an address, a contact form, and/or legal information.
• <main>: Contains the main content of a page. This is the content that is unique to the specific page, and where visitors will probably spend most of their time.
• <nav>: The site navigation. This tag usually contains a list of links to different parts of the website.
• <aside>: Contains related content that doesn’t belong with the main content but is still related to it — this might be a related posts list or a sidebar containing display ads.
• <article>: A standalone piece of content, like a blog post or a news article.
• <section>: A section of a longer text piece. For example, you could assign a different <section> to different h2s of a blog post.

Other Semantic HTML Tags

• <img>: An image.
• <table>: A table with columns and rows of data.
• <figure> and <figcaption>: Used for images that require a description. <figure> contains the image itself, and <figcaption> contains the caption associated with the image.
• <iframe>: An embedded element.

Semantic HTML is well-written HTML.

When learning a new coding language, especially one as fundamental as HTML, it’s crucial to incorporate best practices into your code as soon as possible. As you continue to acquire more advanced skills, the habits you form early are more likely to stick.

Semantic markup is one such practice — it makes your code more readable, more search-engine-friendly, and more accessible to assistive technologies. Plus, your fellow developers will appreciate your careful attention to detail and adherence to best practices.

When approaching a web page, consider each element and see if there’s a semantic way to place it, instead of just springing for a <span> or a <div> tag. It’s well worth the time and effort to get right.