Semantic HTML, or semantic markup, means using HTML tags that show the meaning of the content. When you use these tags, you give extra information about the roles and importance of different parts of your page.

This is different from non-semantic HTML, which uses tags without clear meanings.

What Are Semantic HTML Tags?

Semantic HTML tags are special tags that tell us what the content inside them means. For example, tags like <header>, <article>, and <footer> are semantic because they clearly show what kind of content they hold.

On the other hand, tags like <div> and <span> are not semantic; they’re just containers for content without telling us anything about the content’s role.

Why Should I Use Semantic HTML Tags?

Using semantic HTML tags makes your code easier to read, especially for web developers. But there are two more important reasons to use them.

Accessibility

People who can see can easily understand a webpage’s different parts, like headers and footers. However, for those who are blind or visually impaired and use screen readers, it’s not as simple. Semantic HTML tags help screen readers convey content more accurately, making your website accessible to everyone.

SEO (Search Engine Optimization)

Search engines like Google understand your content better when you use semantic HTML tags. This improves your chances of showing up on search results pages for relevant keywords. In simple terms, using semantic HTML gives your website an SEO advantage.

To check if your HTML tags are affecting your SEO, you can use tools like Site Audit.

Different Kinds of Semantic HTML Tags

Semantic tags help define various sections of a webpage. Let’s explore the most frequently used semantic HTML elements, categorized based on how they are used:

• HTML semantic tags for structure
• HTML semantic tags for text

Semantic HTML Tags for Page Structure

Numerous semantic HTML tags convey the arrangement of a webpage.

These “structural” tags were incorporated with the upgrade from HTML4 to HTML5, earning them the monikers of semantic HTML5 tags or semantic HTML5 elements.

Here’s a comprehensive rundown:

1. <header>: This tag signifies content that functions as the introductory information for a page or section.
2. <nav>: The navigation tag is utilized for navigation links. While it can be nested within the <header> tag, secondary navigation <nav> tags are also frequently employed elsewhere on the page.
3. <main>: This tag encapsulates the main content, also referred to as the body, of a page. Generally, there should be only one <main> tag per page.
4. <article>: The article tag delineates content that could exist independently of the page or site it’s on. It doesn’t necessarily imply a “blog post.” Consider it more like “an article of clothing”—a self-contained item usable in various contexts.
5. <section>: Using <section> groups nearby content of a similar theme. Unlike the article tag, it isn’t necessarily self-contained but is part of something else.
6. <aside>: An aside element defines less crucial content, often applied for sidebars—areas that contribute complementary but nonessential information.
7. <footer>: Employ <footer> at the page’s bottom, typically featuring contact details, copyright information, and some site navigation.

Semantic HTML Tags for Text Content

The HTML semantic tags for text not only handle the formatting but also communicate the semantic purpose of the text they enclose.

Here are a few widely used examples:

1. <h1> (heading): Marks the top-level heading, typically limited to one per page.
2. <h2> to <h6> (subheadings): Subheadings of varying importance, allowing for multiple headings of the same level on a single page.
3. <p> (paragraph): Represents a standalone paragraph of text.
4. <a> (anchor): Used to designate a hyperlink from one page to another.
5. <ol> (ordered list): Displays a list of items in a specific order, starting with bullet points. Each item is contained within a <li> (list item) tag.
6. <ul> (unordered list): Presents a list of items without a specific order, starting with ordinal numbers. Each item is enclosed in a <li> (list item) tag.
7. <q> / <blockquote>: Represents a quotation of the text, with <blockquote> suitable for long, multi-line quotations and <q> for shorter, inline quotations.
8. <em> (emphasis): Used for text that requires emphasis.
9. <strong> (strong emphasis): Used for text that should be strongly emphasized.
10. <code>: Represents a block of computer code.

Note: This list covers only some of the most common semantic HTML tags. There are many others, such as <summary>, <time>, <address>, <video>, etc., that can enhance the clarity of your website’s content.

Tips and Best Practices for Semantic HTML

To wrap up, let’s delve into some HTML implementation tips that stem from common mistakes people often make when working with semantic HTML tags.

Avoid Using Semantic HTML Tags for Styling

While web browsers automatically apply styles to certain semantic tags (like making the text within an <a> tag blue and underlined), it’s crucial to understand that HTML tags aren’t meant for styling text.

In simpler terms, just as you wouldn’t use an <a> tag for text that isn’t a link just to make it blue and underlined, you shouldn’t use other semantic tags purely for stylistic reasons.

Here are some common examples of using semantic tags incorrectly:

Using an <h1> to <h6> tag for non-heading text with the sole purpose of changing its font size.

1. Using <blockquote> just to indent text that isn’t a quotation.
2. Using <strong> or <em> just to make text bold or italicized when there’s no need for emphasis.

For styling, always rely on CSS (Cascading Style Sheets).

Organize Heading Tags with Semantic Hierarchy Arrange header elements based on their importance.

For instance, any H3 headings under a specific H2 heading should be considered subtopics related to that H2.