Mark visual lists with real list elements instead of styled divs
Use ul, ol, and li tags so AI systems recognize the items as a list, not loose paragraphs.
What this signal tests
We look for sequences of three or more sibling div elements that visually appear as a list - same indentation, leading bullet glyph, or list-style CSS - but are not built using the real HTML list elements (ul, ol, li). These "fake lists" look fine to a human reader but lose their list structure when crawled.
Why it matters for your visibility in AI
When an AI tool extracts your page, it usually converts the HTML to Markdown internally before passing it to the language model. Real list elements convert cleanly into Markdown bullet lists; div-based fake lists collapse into plain paragraphs separated by line breaks. The model then sees a wall of prose where you intended a numbered procedure, and retrieval splits it incorrectly. The concrete consequence is that step-by-step instructions, feature comparisons, or product specs lose their structure precisely where structure matters most. An AI assistant asked "what are the three steps?" cannot easily extract three items from a paragraph; from a real ol it can do so trivially and quote each step with its number intact.
Pass criteria at a glance
| Criterion | Passes when |
|---|---|
| Zero fake-list clusters detected. |
How we test it
We scan the rendered DOM for groups of three or more sibling div elements that share visual list characteristics: each starts with the same bullet glyph (a dash, bullet, or arrow), has a CSS list-style declaration applied, or carries class names suggesting list intent. When such a cluster is found outside a genuine ul or ol element, we flag the page. A clean page contains zero fake-list clusters.
Show technical detection method
Find sibling div sequences (n>=3) starting with same leading glyph or with CSS list-style; flag.
If your site fails: how to fix it
- Convert any block where you have repeated div items with leading bullets to a ul (unordered) or ol (ordered) element, with each item wrapped in li.
- In page builders like Webflow or Elementor, prefer the dedicated list widget rather than building lists from generic column or div widgets - the dedicated widget emits the correct HTML.
- For Markdown-authored content, use the standard - or 1. syntax rather than rendering bullets via custom shortcodes that compile to divs.
- If your design requires custom bullet styling, keep the ul or ol semantic markup and style the markers via CSS list-style-image or pseudo-elements rather than abandoning the list element.
- For numbered procedures, prefer ol over ul so the order is encoded in markup and AI tools can quote "step 2" without inferring step numbers from text.
Quick facts
| Maturity | ESTABLISHED |
|---|---|
| Weight | medium |
| Category | Content Clarity |
Primary sources
Related signals
No related signals listed.
Frequently asked questions
What if my designer wants bullets to look unusual?
Custom bullet styling is fine - use list-style-image, ::marker, or list-style-type CSS on a real ul or ol. The visual freedom of CSS makes the semantic ul-based approach as flexible as any div hack, with the added benefit that crawlers still see a list.
Does this apply to navigation menus too?
Yes. Navigation links are conventionally marked up as a ul of li containing a tags, even when styled as a horizontal bar. This is the pattern most CMSes emit by default and most AI extractors expect, so navigation extraction works correctly.
Are there cases where a div sequence is acceptable?
When the items are not really a list - for example, a feature grid of cards where each card is a self-contained block of mixed content. The signal targets cases where the visual cue clearly says "list" (matching bullets, consistent short items). Card grids without bullet glyphs do not trigger the check.
Run your own scan
Run a free scan and see how your site grades across all 155 AI-readiness signals.