Semantic Formatting Tags in HTML for Text and Structure

Semantic formatting tags in Hypertext Markup Language (HTML) provide meaning to your content and help search bots identify the products or services you offer. They can also create more organized page structures by replacing generic containers like <div> with semantic tags like <main> that describe each section’s purpose.

These semantic HTML elements help search engines understand the content and structure of your site, making your store easier to find in search results while also improving accessibility for customers using screen readers and other assistive technologies. As SEO expert Barry Adams writes in his SEO for Google News Substack, semantic tags help search engines identify “the purpose and value of each section of HTML.” 

This guide explores what semantic HTML tags are, how they work, and the best ways to use them. 

What are semantic formatting tags in HTML?

Semantic HTML tags are used to define specific elements within a web page based on the element’s meaning, importance, or role. Semantic HTML tags use opening and closing tags that wrap around the content they describe. For example, the <strong> tag begins with <strong> and ends with </strong>, with the slash indicating where the formatting stops.

Text-level vs. structural tags

There are two primary types of semantic HTML elements: text-level tags and structural tags.

Semantic HTML text tags describe the meaning or emphasis of content. For example, <strong> is typically used to identify important words on a web page. You might use it to draw the reader’s attention to a flash sale or a warning that all sales are final. Other text tags include heading tags (<h1>, <h2>, etc.), emphasis tags (<em>), paragraph tags (<p>), and quotation tags (<blockquote>).

Non-semantic formatting tags focus only on visual elements and appearance rather than the content’s meaning. For example, in most browsers, text formatted using a non-semantic tag such as <b> for boldface may appear identical to <strong> text, but conveys less meaning to search engines and accessibility tools. 

Structural semantic HTML tags like <header> or <article> help organize and structure content on a web page. For example, <header> can contain the page title or company logo, and <article> can identify a blog post or other self-contained content. Structural tags help search engines and screen readers better understand how different parts of the page are organized and related compared to non-semantic tags such as <div> or <span>.

In many Shopify themes, semantic markup is already built into templates and theme settings, so you can work with these tags indirectly rather than adding them manually.

6 common semantic formatting tags in HTML for text

• Strong importance
• Emphasis
• Headings
• Mark
• Time
• Quotations

You may already be familiar with paragraph tags like <p>, which identify blocks of paragraph text, but semantic HTML includes a variety of other tags that identify different text elements on a web page. Browsers often display these tags with default formatting (bold, italics, highlights), but primarily, these semantic elements provide meaning and importance:

Strong importance

Use the <strong> tag to indicate important or time-sensitive web content that visitors should pay closer attention to. This HTML tag is often used for information that can impact customer decisions, such as sales deadlines or policy notices. Browsers typically display <strong> text in bold.

For example: Sale ends <strong>Sunday at midnight.</strong>

Emphasis

The <em> tag is used to emphasize certain words within a sentence, similar to a change in tone when speaking. This semantic value is typically employed in product descriptions or other editorial content. Browsers typically display <em> text in italics.

For example: This jacket is <em>exceptionally</em> warm for its weight.

Headings

Using the tags <h1> through <h6> establishes a hierarchy for the titles and section headings on each page. Each web page would likely feature only one <h1> tag, usually used for the page’s primary visible heading, but may have multiple <h2> tags for major sections of the page, <h3> tags for items within each section, and so on. Browsers typically display headings in bold with decreasing font sizes from <h1> through <h6>.

For example:

<h1>Merino Wool Beanie</h1>

<h2>Product Details</h2>

<h3>Materials & Care</h3>

Mark

The <mark> tag highlights text relevant to a site visitor’s search query. On many ecommerce sites, search tools automatically use <mark> to highlight matching words in search results, such as product types, colors, or features. Browsers typically display <mark> text with a highlighted background color (often yellow by default).

For example: Results for: <mark>merino wool</mark> — 24 products found.

Time

Pairing the <time> tag with a machine-readable datetime attribute allows both the browser and search engines to interpret dates and times consistently across different regions. Otherwise, using a plain text date like 05/06/26 could mean May 6 in the US or June 5 in the UK. The <time> tag is useful for indicating sales deadlines, estimating shipping time frames, or putting timestamps on customer reviews.

For example: Order by <time datetime="2026-05-06">May 6</time> for guaranteed delivery.

Quotations

The <blockquote> tag indicates material taken from an external source, such as a customer testimonial, endorsement, or product review. Using it in conjunction with the citation attribute (cite="source-url") can clarify the original source of the material when pulled from another site, helping screen readers provide additional context. Browsers typically display <blockquote> text as an indented quotation separated from surrounding content.

For example: <blockquote cite="https://example-review-site.com">

"The best cold-weather gear I’ve owned in 20 years of hiking."

</blockquote>

6 common semantic formatting tags in HTML for structure

• Page or section header
• Navigation
• Main content
• Self-contained content
• Supplemental content
• Page or section footer

HTML includes a variety of semantic tags that define the structure and organization of a web page. Structural tags create landmarks that allow screen reader users to jump directly to different regions of a page, such as navigation menus or main content, rather than listening to the entire page from top to bottom. 

Here are six commonly used structural semantic tags:

Page or section header

The <header> tag identifies the introductory section of a page or section on your website and may contain your company name, logo, and navigation links. Unlike the <h1> through <h6> tags, the <header> tag describes an entire region of the page, not just the title or subhead within text. It usually appears at the top of the web page, but can also be used inside an article or section to introduce a separate piece of content.

For example:

<header>

<img src="logo.png" alt="Store Logo">

<nav>...</nav>

</header>

Navigation

The <nav> tag indicates a section of navigation links that help visitors move through a website or web page. Screen readers can recognize navigation bars and allow users to jump directly to them more easily. This semantic HTML tag often appears inside the <header> section but can also appear in the <footer> or as a standalone sidebar.

For example:

<nav>

<a href="/womens">Women’s</a>

<a href="/mens">Men’s</a>

<a href="/sale">Sale</a>

</nav>

Main content

The <main> tag identifies the key content of each page, such as product details, blog posts, or collection listings. Screen readers can use this tag to bypass repetitive elements like headers and navigation menus and move directly to the information users are looking for. The <main> tag typically appears after the page <header> and wraps all the relevant content.

For example:<main>

<h1>Merino Wool Beanie</h1>

<p>Ethically sourced, 100% merino...</p>

</main>

Self-contained content

The <article> tag helps search engines and assistive technologies identify content that can stand on its own and be independently distributed, such as blog posts, reviews, or detailed product descriptions. Multiple <article> tags may appear on a single web page where several standalone content items are grouped together.

For example:

<article>

<h2>Merino Wool Beanie</h2>

<p>Exceptionally warm for its weight...</p>

<a href="/products/merino-beanie">Shop Now</a>

</article>

Supplemental content

The <aside> tag is used for content related to the main content of the page but not the page’s primary focus. This may include sidebars, promotional callouts, related links, or product tips. 

For example:

<aside>

<h3>You Might Also Like</h3>

<a href="/products/wool-scarf">Merino Wool Scarf</a>

<a href="/products/wool-gloves">Merino Wool Gloves</a>

</aside>

Page or section footer

The <footer> tag identifies concluding or supporting information for a page or section. It typically contains items like legal disclaimers, secondary navigation tools, or social media links. As with the <header> tag, it can also appear inside an article or other independent content, listing information about the author, publication date, copyrights, or contact details.

For example:

<footer>

<p>&copy; 2026 Your Store Name. All rights reserved.</p>

<nav>

<a href="/privacy">Privacy Policy</a>

<a href="/returns">Returns</a>

</nav>

</footer>