How to Use Semantic HTML on Shopify for AI Agents

AI agents don't just read your product text. They parse your HTML structure to figure out what's content, what's navigation, and what's the actual product area.

If your theme wraps everything in <div> tags, the AI agent has to guess where the product information starts and ends. With semantic HTML, it knows exactly.

What is semantic HTML?

Semantic HTML means using HTML tags that describe the purpose of the content, not just its appearance. Instead of generic containers like <div> and <span>, you use tags with meaning:

<main> — the primary content area of the page
<article> — a self-contained piece of content (like a product)
<section> — a thematic grouping of content
<nav> — navigation links
<header> — introductory content or navigation for a section
<footer> — closing content for a section or page
<aside> — content related to but separate from the main content

These tags tell AI agents the structure of your page. Without them, the agent sees a flat list of text inside generic containers and has to infer what's what.

What AI agents look for on product pages

On a product page, an AI agent expects to find:

A <main> element containing the product content, separate from the site header and footer
An <article> or <section> wrapping the product details
Headings in order — <h1> for the product name, <h2> for sections like "Description" or "Specifications"
Form labels on variant selectors — every <select> or <input> should have an associated <label>

Form labels on variant selectors

AI agents parse forms too. When your product page has a "Size" dropdown, the agent needs to know what that dropdown represents. That's what <label> tags are for.

A properly labeled variant selector uses a <label> tag linked to the <select>. Here's the Liquid template you'd use in your product form:

Liquid template

{% for option in product.options_with_values %}
  <label for="option-{{ option.name | handleize }}">{{ option.name }}</label>
  <select id="option-{{ option.name | handleize }}" name="{{ option.name }}">
    {% for value in option.values %}
      <option value="{{ value }}">{{ value }}</option>
    {% endfor %}
  </select>
{% endfor %}

Rendered output

For a product with a "Size" option, the rendered HTML looks like this:

<label for="option-size">Size</label>
<select id="option-size" name="Size">
  <option value="Small">Small</option>
  <option value="Medium">Medium</option>
  <option value="Large">Large</option>
</select>

Without the label, the AI agent sees a dropdown with three values but doesn't know what they represent. Is it size? Color? Quantity?

ARIA landmarks

ARIA (Accessible Rich Internet Applications) attributes add extra information for assistive technologies and AI agents. The most relevant for product pages:

role="main" — marks the main content area (same as the <main> tag)
role="navigation" — marks navigation regions
aria-label — describes elements that don't have visible labels
aria-describedby — links an element to its description

If your theme already uses semantic HTML tags (<main>, <nav>), ARIA roles are less critical — the tags already communicate the same information. ARIA roles matter most when the HTML structure uses generic <div> elements.

Language attribute

The <html lang="en"> attribute tells AI agents what language your content is in. Without it, the agent has to detect the language from the text — which works most of the time, but can be wrong for short text or stores with mixed-language content.

Most Shopify themes set this correctly. To check:

View the page source on any page
Look at the very first <html> tag
It should have a lang attribute: <html lang="en">

If it's missing, your developer can add it to the theme.liquid layout file.

How to check your store

Open a product page on your store
Right-click and select View Page Source
Search for <main — is there a main content area?
Search for <article or <section — are products wrapped in semantic containers?
Search for role= — are there ARIA landmarks?
Look at variant selectors — do they have <label> tags?
Check the <html> tag for the lang attribute

Which themes get this right?

Modern Shopify themes built after 2023 — like Dawn, Sense, and Craft — generally handle semantic HTML well. They use <main>, proper heading hierarchy, and labeled form elements.

Older themes (pre-2023) and heavily customized themes are more likely to have issues. The more custom code that's been added, the more likely that semantic structure has been broken or bypassed.

If your theme is missing semantic HTML, the fix is a theme update. This is a developer task, but it's well-defined: audit the product template for semantic tags and add them where missing.

What to tell your developer

If you find issues, here's what to ask for:

Wrap the main content area in a <main> tag
Use <article> or <section> for product content
Make sure every <select> and <input> in the variant form has a <label>
Verify the heading hierarchy: one <h1> per page, sections use <h2>
Add lang="en" (or your language) to the <html> tag if missing

These changes are invisible to customers. They don't change how the page looks. But they significantly improve how AI agents understand your page structure.