Definition list

Moderate effort

Found on 1% of audited stores.

Fix all `<dl>` (definition list) elements so they contain only valid `<dt>` and `<dd>` child elements, in the correct order, with no stray tags or text directly inside the list wrapper.

What it is

A definition list (`<dl>`) is a special HTML structure designed to pair terms with their descriptions — for example, a product spec sheet listing "Material: Cotton" or "Size: Medium". The rules for what can go inside a `<dl>` are strict: it may only contain `<dt>` (the term) and `<dd>` (the description) elements, optionally wrapped in `<div>` groupings. When a theme or page builder drops in extra tags, plain text, or skips required children, the list becomes "malformed." WCAG Success Criterion 1.3.1 (Info and Relationships) requires that information conveyed visually through structure also be conveyed correctly in the underlying code so assistive technologies can interpret it.

Why it matters

Screen readers used by blind or low-vision shoppers rely on correct HTML structure to announce lists properly — for example, "term 1 of 3: Material, definition: Cotton." A malformed `<dl>` breaks that announcement, so the information becomes meaningless noise or is skipped entirely, directly harming the shopping experience for those customers. From a legal standpoint, WCAG 1.3.1 is a Level A criterion — the baseline — meaning this is one of the failures most likely to appear in an accessibility audit, complaint, or lawsuit (ADA Title III, EN 301 549, UK Equality Act). Search engines also use semantic HTML to understand your page content; clean, structured markup around product details like specifications and FAQs can improve how that content is indexed and displayed in rich results.

How to fix it

Identify every `<dl>` on the affected page — common locations include product specification tables, FAQ sections, ingredient lists, and shipping detail panels.
Inspect the HTML source of each `<dl>` and confirm its only direct children are `<dt>`, `<dd>`, or `<div>` elements (no `<p>`, `<span>`, `<ul>`, bare text nodes, or other tags sitting directly inside `<dl>`).
Ensure every `<dt>` (term) is followed by at least one `<dd>` (description) and that no `<dd>` appears before its paired `<dt>`.
If you need to group term-description pairs for styling purposes, wrap each `<dt>`+`<dd>` pair inside a `<div>` directly inside the `<dl>` — this is the only extra wrapper permitted by the HTML spec.
Remove or relocate any disallowed child elements (e.g., move a `<p>` intro sentence above the `<dl>`, not inside it).
Validate the corrected markup using the W3C HTML Validator or rerun your accessibility scanner (axe, WAVE, etc.) to confirm zero definition-list violations remain.

<!-- ✅ CORRECT: valid <dl> structure -->
<dl>
  <div>
    <dt>Material</dt>
    <dd>100% Organic Cotton</dd>
  </div>
  <div>
    <dt>Weight</dt>
    <dd>180 gsm</dd>
  </div>
</dl>

<!-- ❌ INCORRECT: stray <p> and <span> directly inside <dl> -->
<dl>
  <p>Product Specs</p>      <!-- not allowed here -->
  <span>Material</span>    <!-- not a <dt> -->
  <dd>100% Organic Cotton</dd>
</dl>

Fix it on your platform

Pick your platform for the exact steps.

How to fix definition list on Shopify

Go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
Use the search box (top of the file tree) to search for '<dl' across all template files (.liquid). Common locations: product description in 'sections/product-template.liquid' or 'snippets/product-specs.liquid', and FAQ sections.
Open each file containing a `<dl>`, locate the malformed markup, and correct the child elements so only `<dt>`, `<dd>`, or wrapping `<div>`s appear directly inside `<dl>`.
If the content is entered via the Rich Text Editor in the theme customizer (Customize → a content block), switch the block to HTML/Code view and fix the raw markup there.
Save each file, then preview the page and rerun your accessibility scanner to verify the fix.

Full Shopify guide →Official Shopify docs ↗

How to fix definition list on WooCommerce

Product specification/attribute lists are often output by WooCommerce core as `<table>` elements, but custom themes or page builders may use `<dl>`. Identify the source by inspecting the page HTML in your browser (right-click → Inspect).
If the `<dl>` is in a theme template file, locate it under Appearance → Theme File Editor (or via FTP/SFTP in your theme folder). Common files: 'woocommerce/single-product/tabs/additional-information.php' or a custom snippet.
Edit the PHP/HTML template to ensure the `<dl>` contains only `<dt>` and `<dd>` children. Use child-theme overrides (place the file in your child theme's 'woocommerce/' folder) so updates don't overwrite your changes.
If the `<dl>` originates from a page-builder block (Elementor, Divi, Beaver Builder), open the block editor, switch to the HTML/Code view of that element, and correct the markup directly.
Save, clear any caching plugins (e.g., WP Rocket, W3 Total Cache), and validate with axe DevTools or WAVE.

Full WooCommerce guide →Official WooCommerce docs ↗

How to fix definition list on BigCommerce

Go to Storefront → Themes → click Customize on your active theme, then exit the visual editor and use Edit Theme Files (or download the theme via Channel Manager → Themes → Download).
Search the Handlebars (.html) and partial template files for '<dl'. Common files: 'templates/components/products/product-view.html' and custom partials for specs or FAQs.
Correct the `<dl>` markup so only `<dt>`, `<dd>`, or wrapping `<div>`s are direct children.
Re-upload the corrected theme files or push via the Stencil CLI ('stencil push'), then verify on a staging channel before publishing to production.
If content is entered in the Page Builder (via HTML widget), open the widget, edit the raw HTML, and fix the list structure there.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix definition list on Wix

Open the Wix Editor for the affected page. Wix generates its own HTML and does not expose raw `<dl>` markup in the standard editor.
If you added a custom HTML embed (Add → Embed → Custom Code or HTML iFrame) containing a `<dl>`, click on that element → Enter Code, and correct the definition list markup in the code panel.
If the malformed `<dl>` comes from a Wix app or a third-party widget, contact the app developer, as Wix does not provide direct access to app-generated HTML.
For Wix Studio sites, use the DevMode / Velo panel to locate any custom HTML components and apply the fix there.
After saving, use your browser's DevTools or an accessibility scanner extension (axe, WAVE) to confirm the rendered HTML is now valid.

Full Wix guide →Official Wix docs ↗

How to fix definition list on Squarespace

Open the Pages panel and edit the affected page. Squarespace does not expose raw theme HTML, but you can inject corrected markup via a Code Block.
If the `<dl>` is inside a Code Block: click the block → Edit, switch to HTML view, and fix the markup so only `<dt>` and `<dd>` elements are direct children of `<dl>`.
If the `<dl>` is being generated by a Squarespace native block (e.g., a Summary or Product block), you cannot edit its HTML directly. Instead, replace it with a Code Block containing a correctly structured `<dl>` and apply matching CSS under Design → Custom CSS.
For site-wide injection (e.g., a footer spec list), go to Settings → Advanced → Code Injection and add or correct the markup there.
Save and preview, then rerun your accessibility scanner to confirm the fix.

Full Squarespace guide →Official Squarespace docs ↗

How to fix definition list on Webflow

Open the Webflow Designer for the affected page. In the Navigator panel (left sidebar), locate the 'Definition List' element (Webflow maps this to `<dl>`).
Click on the `<dl>` element and inspect its children in the Navigator. Webflow natively supports 'Definition Term' (`<dt>`) and 'Definition Description' (`<dd>`) element types — ensure only these are nested directly inside the list.
If extra elements (e.g., a Text Block or Paragraph) were accidentally dropped inside the `<dl>`, drag them out above or below the list in the Navigator.
To add a valid grouping `<div>` wrapper around `<dt>`+`<dd>` pairs, add a 'Div Block' inside the `<dl>` and nest the term and description inside it.
Publish the site and verify with axe DevTools or WAVE in the browser.

Full Webflow guide →Official Webflow docs ↗

How to fix definition list on Adobe Commerce (Magento)

Identify the template file rendering the `<dl>` by using browser DevTools to inspect the element and noting the Magento layout handle or block name (often visible in layout XML comments when developer mode is on).
Locate the PHTML template file — common paths include 'app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/view/' or a custom module's 'view/frontend/templates/' directory.
Edit the PHTML file to correct the `<dl>` structure: ensure only `<dt>`, `<dd>`, or wrapping `<div>` elements are direct children. Create the file in your custom theme directory to avoid overwriting on upgrades.
Clear the Magento cache: in Admin go to System → Cache Management → Flush Magento Cache, or run 'bin/magento cache:flush' via CLI.
Deploy static content if needed ('bin/magento setup:static-content:deploy'), then verify the fix on the frontend with an accessibility scanner.

Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find definition list — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Definition list?

Why does definition list matter?

How do I fix definition list?