How to extract HTML attributes
Paste a fragment into the HTML input or use Upload, then select the attributes to inspect. The table lists the tag, attribute, value, and element number for each match. The parser reads the fragment with DOMParser and numbers elements in document order.
- Paste markup into the
HTML input, or select a file withUpload. - Keep the checked attributes, or choose more such as
alt,title,name,value,rel, andtarget. - Enter names such as
data-role, aria-labelinCustom attributes (comma-separated)when a preset does not cover the attribute. - Limit the scan with
Filter by tag (comma-separated), using values such asimg, a. - Review the table, then select
Copyfor tab-separated rows orCSVforhtml-attributes.csv.
Pull attribute values from HTML
The checked options start with src, href, class, and id. The other preset checkboxes start clear. Results update when you edit the HTML input, change a checkbox, or edit either text field. Reset extraction options restores those four selections and clears both text fields.
<img src="/images/hero.png" alt="Hero banner" class="hero-img" />
Tag Attribute Value Element
img src /images/hero.png #1
img class hero-img #1A row appears when a selected attribute exists on an element. The Element value is an ordinal such as #1. It identifies the element's position in the scan, not a CSS selector or source line. When you filter by tag, the count starts with the elements that pass the filter.
Filter HTML attributes by tag
Enter comma-separated tag names in Filter by tag (comma-separated). The tool trims the names and compares them in lowercase, so img, a keeps rows for img and a elements. It also trims, lowercases, and deduplicates custom attribute names. Names with spaces or "'<>/= are ignored.
The parser checks descendant elements inside the parsed <body>. It skips the <html>, <head>, and <body> elements themselves. With empty input, the table says "Paste HTML to see extracted attributes." If the input has no matching rows, it says "No matching attributes found." Copy and CSV remain disabled until a row exists.
When to use an HTML attribute extractor
Paste a page fragment to list image src values or link href values before changing a template. A component snippet can reveal its class, id, or data-* values in the same table.
For a form fragment, choose name or value and filter by input. Use Extract URLs from Text for web addresses in plain text. Extract Markdown Links handles Markdown link syntax, and Custom Regex Extractor handles a text pattern that is not an HTML attribute. See Text Parsing & Data Extraction for other extractors.
Frequently asked questions
How do I extract attributes from HTML?
Paste HTML into the HTML input, select attribute checkboxes, and read the refreshed table. You can add names in Custom attributes (comma-separated).
Can I pull data attributes from HTML?
Yes, enter names such as data-role in Custom attributes (comma-separated). Valid custom names are included alongside the checked preset attributes.
Can I filter HTML attribute values by tag?
Yes, enter comma-separated names such as img,a in Filter by tag (comma-separated). Only matching elements inside the parsed body contribute rows.
Can I export extracted HTML attributes as CSV?
Yes, select CSV after rows appear. The download contains the Tag, Attribute, Value, and Element columns and is named html-attributes.csv.
Does the extractor send pasted HTML anywhere?
The extractor script parses pasted HTML in the browser with DOMParser. It contains no request that sends the pasted HTML. Scripts in the pasted markup do not run during this parsing step.