Extract links, image sources and other attributes from HTML

How to use the attribute extractor

1. Paste HTML into the HTML box.
2. In Elements (comma-separated, * for all), list the tags to inspect, such as a, img, or * for every element.
3. In Attributes (comma-separated, empty for all), list the attributes you want, such as href, src, or leave it empty for all of them.
4. Tick Also list unique values for a de-duplicated list.
5. Read the table or download it as attributes.csv.

What it does and when to use it

A page’s attributes hold a lot of useful data: every link target, every image file, every alt text, every id and class. Finding them by reading the source is slow and error-prone. The extractor pulls them out into a table with the Line, Element, Attribute and Value of each, so you can sort, filter or copy them.

Typical uses: collecting all links before a site migration, listing image files to check that they exist, reviewing alt text across an article, finding every tracking or data-* attribute, or gathering the ids a script might depend on. Once you know what is there, remove what you do not need with the HTML Attribute Remover. For a count of elements rather than attributes, use the HTML Tag Counter. To get the page’s visible words instead, use HTML to Text.

How it works

The HTML is tokenised in your browser. For each opening tag that matches your element list, every attribute that matches your attribute list becomes a row. Names are compared in lower case, so HREF and href match. Values have entities decoded. The line number is that of the opening tag, so a tag spread over several lines is reported at its first line. The unique list keeps the first occurrence of each value, in document order. Text inside script and style is not read as tags.

Worked examples

Unique link targets. Three links to /a, /b and /a again, with Elements a and Attributes href, give three table rows on lines 1–3 and a unique list of two:

/a
/b

The café sample with the defaults (a, img, all attributes). The two links on line 9 give href values / and /menu and a class of active. The image on line 16 gives four rows, including 16 | img | alt | Pea and mint risotto in a white bowl.

Boolean attributes and entities. With * and unique values off, <input type="checkbox" checked> and an image with alt Fish & chips give:

1 | input | checked | (no value)
1 | img | src | x.png
1 | img | alt | Fish & chips

Limits and tips

• Relative URLs are listed as written. Combine them with the page’s address to get full URLs.
• The unique list mixes all selected attributes. Extract one attribute at a time when you need a clean list.