Extract Data from HTML with a CSS Selector
Paste HTML, write a CSS selector, and pull out text, inner or outer HTML, or an attribute from every match. Runs entirely in your browser — no upload, no sign-up.
About this tool
This is "jq for markup": paste raw HTML, write a CSS selector, and pull the
same piece out of every element that matches. Pick what to extract — the visible
text, the element's inner HTML (its children), its outer HTML (the
element itself, tags and all), or the value of a named attribute such as
href or src. The result is JSON with a count and a matches array, so it
drops straight into a script or a spreadsheet.
Everything runs locally in your browser via WebAssembly — the HTML you paste is never uploaded.
Worked example
Paste this HTML:
<ul>
<li><a href="/one">First</a></li>
<li><a href="/two">Second</a></li>
</ul>
With selector a and Extract = Attribute, attribute name href, you get:
{
"count": 2,
"matches": [
"/one",
"/two"
]
}
Switch Extract to Text and the same selector returns ["First", "Second"]
instead. Use a tighter selector (for example li:first-child a) to narrow the
matches, or raise Max matches if you have more than 100 results.
FAQ
What selectors are supported?
Standard CSS selectors: tag names (p), classes (.link), IDs (#main),
attribute selectors (a[href]), combinators (div > p, ul li), and
pseudo-classes like :first-child and :nth-of-type(2). XPath is not
supported — this tool is CSS-only.
What's the difference between inner HTML and outer HTML?
For <div><b>hi</b></div> selected by div, inner HTML returns
<b>hi</b> (just the children) while outer HTML returns
<div><b>hi</b></div> (the element itself, its own tags included). Text
returns just hi.
How do I pull an attribute like a link's URL or an image's source?
Set Extract to Attribute and type the attribute name — href for links,
src for images, class, id, data-*, and so on. Elements that match the
selector but don't have that attribute are skipped, so the count reflects only
the elements that actually had a value.
Why is the whitespace collapsed in my results?
Normalize whitespace is on by default: it collapses runs of spaces and newlines in text and attributes to single spaces and trims the ends of HTML. Turn it off to get the exact original text, indentation and all.
Is my HTML uploaded anywhere?
No. The parser is compiled to WebAssembly and runs entirely in your browser, so the HTML you paste never leaves your machine.
Developer & Automation Access
Run it from the terminal
Same engine as this page, headless — via the gizza CLI:
gizza tool html-extract '<ul>
<li><a href="/one">First</a></li>
<li><a href="/two">Second</a></li>
</ul>' 'selector=a'New to the CLI? Get gizza →
Open it by URL
Pre-fill and auto-run this tool with query parameters — the names match the API/CLI:
https://gizza.ai/tools/html-extract/?html=%3Cul%3E%0A%20%20%3Cli%3E%3Ca%20href%3D%22%2Fone%22%3EFirst%3C%2Fa%3E%3C%2Fli%3E%0A%20%20%3Cli%3E%3Ca%20href%3D%22%2Ftwo%22%3ESecond%3C%2Fa%3E%3C%2Fli%3E%0A%3C%2Ful%3E&selector=a&extract=text&attr=href&limit=100&trim=trueMachine-readable descriptor: tool.json — title + parameters JSON Schema for agents.