Remove chosen attributes from HTML, or strip all but a keep-list

How to use the attribute remover

1. Paste HTML into the HTML box.
2. Choose what to Remove: Named attributes or All attributes.
3. For named attributes, list them in Attributes to remove, separated by commas. Use data-* or on* to match a whole family.
4. For all attributes, list the ones to keep in Keep these even when removing all.
5. Copy the result and check the Attributes removed count.

What it does and when to use it

Markup copied from another site, a page builder or a component library comes with attributes that only make sense in its original home: framework classes, inline styles, tracking data-* attributes, inline onclick handlers, generated ids. Before you reuse the markup, you usually want the structure and content without those.

Typical jobs: removing all class and style attributes before applying your own CSS, stripping analytics attributes from a template, deleting inline event handlers for a stricter Content Security Policy, or reducing a snippet to bare tags for documentation or a tutorial.

To see which attributes a page uses before deciding, list them with the HTML Attribute Extractor. To also remove comments, use the HTML Comment Remover. For a quick tidy of pasted HTML afterwards, use the HTML Formatter.

How it works

The HTML is tokenised in your browser. For each opening tag, the tool checks every attribute name in lower case against your list: an exact match, or a prefix match for names ending in *. In All attributes mode the test is reversed, and anything not on the keep-list is removed. If nothing changes, the original tag text is kept. Otherwise the tag is rebuilt from its original name and the exact source text of each kept attribute, and a self-closing /> is preserved.

Worked examples

The default list, class, style, data-*, on the hero sample removes 7 attributes:

<div id="top">
  <h1>Welcome</h1>
  <a href="/start" onclick="track()">Get started</a>
  <img src="/hero.png" alt="Dashboard screenshot" width="800" height="450">
</div>

The onclick stays because it is not on the list.

Remove all, keep href, src, alt. The same sample loses 11 attributes, including id, onclick, width and height, leaving <a href="/start">Get started</a> and <img src="/hero.png" alt="Dashboard screenshot">.

Only handlers and data attributes. With on*, data-*, 2 attributes go: data-track on the div and onclick on the link, which becomes <a href="/start" class="btn">Get started</a>.

Limits and tips

• Removing width and height from images brings back layout shift. Keep them on images when you clean a page that will go live.
• Attributes inside SVG are handled the same way. fill, viewBox or d removed from an icon will break it, so use named mode for SVG.