How to fix definition list on Webflow
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.
Steps for 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.
<!-- ✅ 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>What is definition list?
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.
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.
See the complete Definition list guide for every platform and the full background.
Not sure if your Webflow store has this?
Run a free SEOLZ audit — we’ll find definition list and every other issue across your whole site.
Scan my site free