How AI Extracts Structured Data from Web Pages: Tables, Lists, and Product Info

When you ask an AI model to help you with something on a web page — compare prices, pull out specifications, or summarize a product listing — the AI doesn’t see the page the way you do. It sees text. The question is: what kind of text, and how well-organized is it?

The Problem with Raw HTML

A typical product page might have a price inside a <span class="price"> tag, nested three divs deep, followed by a table of specifications, and a list of customer reviews loaded dynamically via JavaScript. Feed that raw HTML to a language model and you get noise: hundreds of tag names, class attributes, inline styles, and script blocks that have nothing to do with the information you actually care about.

This isn’t a failure of the AI — it’s a data quality problem. Models can parse messy input, but they do it better and faster when the input is clean.

How Tables Get Extracted

HTML tables (<table>, <tr>, <td>) are one of the most information-dense structures on the web. A laptop spec sheet might have 20 rows comparing CPU, RAM, storage, display, and battery — all in a table.

A good extraction pass:

1. Identifies the table by its role in the page (not just any <table> tag — navigation menus and layout grids are often tables too)
2. Reads column headers from <th> elements or the first row
3. Pairs each value with its header so the AI receives CPU: Intel Core Ultra 7 instead of two orphaned strings

The result is a compact, labeled representation the model can reason about directly.

How Lists Get Extracted

Bullet lists (<ul>, <ol>) are simpler but still require care. A list of product features and a list of navigation links look identical in the DOM. Context — position on the page, surrounding headings, element roles — determines which lists are content and which are chrome.

Once identified, list items are extracted as plain text, preserving their order. Numbered lists keep their sequence. Nested lists get flattened or indented depending on depth, because a three-level nested list is rarely something an AI needs to see verbatim.

How Product Cards and Structured Data Work

Many modern e-commerce and news sites embed structured metadata directly in the page using JSON-LD or microdata — machine-readable descriptions of products, articles, recipes, and events baked into the HTML. A product page might include:

{
  "@type": "Product",
  "name": "USB-C Hub 7-in-1",
  "offers": { "price": "39.99", "priceCurrency": "USD" }
}

When this data is present, it’s the most reliable source of truth for extraction — authored specifically for machines to read. Browsy surfaces it alongside the visible text so the AI gets the definitive version of the facts.

The Cleaning Step

Even after identifying the right elements, raw extracted text still contains artifacts: & HTML entities, excessive whitespace, repeated boilerplate (“Free shipping on orders over $35” appearing five times), and navigation text that leaked through. A cleaning pass strips these before the text reaches the AI.

What remains is a compact, readable summary of the page’s actual content — the kind of input that lets a model answer “which of these three laptops has the best battery life for under $800?” without getting confused by sidebar ads or cookie banners.

What Browsy Does

Browsy runs this extraction in the browser, directly against the live rendered page — including content that was added by JavaScript after the initial HTML loaded. When you open the AI panel, the model receives not a raw HTML dump but a structured reading of the page: headings, paragraphs, tables, and lists in a format that’s easy to reason about.

That’s why questions that would stump a model given a raw HTML paste often work cleanly through Browsy: the extraction step does the work of turning a web page into something the AI was trained to understand.