OK
Open Doc or HTML
Demo HTML Docx
Chars: 0
Undo New page encoding indentation compress
Prettify
Removes inline styles
Inline styles
Deletes classes and IDs
Classes & IDs
Deletes empty HTML tags
Empty tags
remove tags with one space
Tags with 1 space
remove successive spaces
Successive spaces
delete comments
Comments
remove tag attributes
Tag attributes
html to plain text
To plain text
Smart non-breaking spaces
Smart  s
ai watermarks remove
AI Watermarks

remove tag attributesRemove HTML Tag Attributes

Attributes can pile up in generated markup, making it harder to maintain, edit, and reuse. This tool removes HTML tag attributes from your code while preserving essential ones like href on links and src on images so that content and basic functionality remain intact. 🧹

✨ If a doc was baked into elements, first remove inline styles, and if identifiers are the main issue, strip classes and IDs.

style="" class="" data-pretty="" alt="" aria-code=""

What gets removed?

  • All attributes except href on <a>
    and except src on <img>
  • Data attributes, ARIA attributes, and inline metadata
  • Legacy or editor-generated attributes with no functional value

Why keep only essentials?

  • Links still work: navigation remains intact.
  • Images still render: visual content isn't lost.
  • Cleaner code: fewer attributes change between versions.
  • Framework: content is decoupled from tooling.
Heads up: Accessibility attributes like alt or aria-* are removed by design here. Use this tool when portability matters more than preserving metadata.

Example: Before and After

Before (heavy attributes):

<p><a class="btn" href="https://prettyhtml.com" data-track="cta">Pretty</a> 
<img src="pretty.png" alt="Logo" width="200" height="50" /></p>

After (cleaned, essentials kept):

<p><a href="https://prettyhtml.com">Pretty</a> 
<img src="pretty.png"/></p>

How to use this page

  1. Paste your HTML into the editor or in the drop-area.
  2. Check the Tag attributes otpion.
  3. Click Pretty to remove attributes while keeping links and images working.
  4. Download the cleaned HTML or DOCX if needed.

When this tool is a good fit

Ideal scenarios

  • Preparing HTML for email or document export
  • Cleaning CMS content before migration
  • Removing tracking and editor artifacts
  • Normalizing markup from multiple sources

Use with caution 📢❗🚨

  • Accessibility: attributes like alt and ARIA are removed.
  • Forms: inputs may lose name, type, or value.
  • Scripts: data attributes used by JavaScript will be lost.
  • Responsive images: srcset and sizes are removed.

Attribute cleanup comparison

Element Before After Result
Link Multiple classes, data attributes href only Still clickable
Image Size, loading, alt, data src only Still visible
Other tags Classes, styles, data No attributes Markup simplified

Removing attributes with JavaScript

Parse the HTML and remove all attributes except whitelisted ones for specific tags. This approach ensures you keep essential functionality while aggressively cleaning everything else. ⚙️

function removeAttributesExceptHrefSrc(html) {
  var parser = new DOMParser();
  var doc = parser.parseFromString(html, 'text/html');
  Array.from(doc.body.querySelectorAll('*')).forEach(function (el) {
    var keepHref = null;
    var keepSrc = null;
    if (el.tagName.toLowerCase() === 'a' && el.hasAttribute('href')) {
      keepHref = el.getAttribute('href');
    }
    if (el.tagName.toLowerCase() === 'img' && el.hasAttribute('src')) {
      keepSrc = el.getAttribute('src');
    }
    Array.from(el.attributes).forEach(function (attr) {
      el.removeAttribute(attr.name);
    });
    if (keepHref) el.setAttribute('href', keepHref);
    if (keepSrc) el.setAttribute('src', keepSrc);
  });
  return doc.body.innerHTML;
}

Optional: extend the whitelist

In real projects, you may want to keep additional attributes such as alt, title, or specific data attributes. You can adapt the whitelist logic to match your exact needs without changing the overall approach. 👍

Workflow: Remove inline styles → strip classes and IDs → remove excess attributes → remove empty tags → normalize spacing. This order produces compact, portable HTML with minimal surprises.

FAQ

Will this break accessibility?

It can if attributes like alt, role, or ARIA labels are removed. Use this tool when content portability is the goal, or extend the whitelist as needed.

Is it safe for SEO?

Yes. Search engines focus on content and structure, not most attributes. Removing attributes generally has no negative SEO impact. Use the HTML cheatsheet if you need to learn more.

Why keep href and src only?

They are the minimum required for links and images to function. Everything else is often presentation or metadata.

Can I combine this with other tools?

Absolutely. Attribute removal works best as part of a broader cleanup pipeline, especially when dealing with editor-generated HTML.

Back to top