Paste any HTML snippet or full document
Ready to extract
Paste HTML and click Extract// extract all class names and IDs from html in one click
Extract all CSS class names and IDs from any HTML snippet or full document instantly. Free, browser-based, no sign-up required.
Ready to extract
Paste HTML and click ExtractDrop any HTML snippet, a full page, or copy from DevTools into the input box.
Toggle sorting, unique-only mode, and usage count display.
Click Extract, then copy the list as plain text or JSON for use in your CSS or audit.
The HTML Class Extractor scans your HTML and pulls out every class and id attribute value — listing them with their occurrence count. Useful for CSS audits, unused-style detection, refactoring, and more.
Yes. If an element has class="card active highlighted", all three class names — card, active, and highlighted — are extracted and counted individually.
Absolutely. The IDs tab shows each ID with its usage count. Any ID with a count greater than 1 is a duplicate, which is invalid HTML and can cause JS and CSS issues.
With "Unique only" enabled, each class or ID appears once in the list regardless of how many times it occurs in the HTML. Disable it to see every individual occurrence listed separately.
No. All extraction happens entirely in your browser using JavaScript. Your HTML never leaves your device, making this tool safe for private or proprietary code.
Yes. The JSON output gives you an object where each key is a class or ID name and the value is its usage count. This is ideal for scripting, purge lists, or documentation.
This tool extracts class and ID attribute values from HTML elements. It does not parse CSS rules inside <style> tags — use our CSS Variables Extractor for that use case.
An HTML Class Extractor is a developer utility that scans HTML markup and compiles a complete list of every CSS class name and element ID used across the document. Instead of manually searching through hundreds of lines of markup, you paste your HTML and instantly receive a sorted, counted inventory of all selectors in use. This is invaluable during code reviews, CSS audits, and refactoring sessions.
💡 Looking for premium HTML templates and themes? MonsterONE offers unlimited downloads of templates, UI kits, and assets — worth checking out.
Modern web projects often involve large HTML files generated by content management systems, template engines, or JavaScript frameworks. Over time, CSS stylesheets accumulate rules for classes that no longer exist in the markup, and IDs that were once unique may inadvertently appear multiple times. Manually auditing this is tedious and error-prone.
By extracting all class names and IDs into a flat list, you can cross-reference them against your CSS to find unused rules, identify naming inconsistencies, and ensure your ID attributes are truly unique as the HTML specification requires. This is the foundation of a clean, maintainable codebase.
Using this tool is straightforward. Paste any HTML — a small component, a full page template, or even a server-rendered document you've copied from your browser's "View Source" — into the input field. Toggle the options to control whether you want results sorted alphabetically, deduplicated, or shown with usage counts. Then click Extract.
The results are split into three views. The Classes tab shows every unique class name as a color-coded chip with its usage count. The IDs tab does the same for element IDs, making it easy to spot duplicates at a glance. The Raw List tab outputs everything as plain text, ready to paste into a script or document. You can also copy any list as a JSON object for programmatic use.
The HTML specification is clear: the id attribute must be unique within a document. Duplicate IDs cause several real-world problems — CSS rules using an ID selector may apply inconsistently across browsers, JavaScript's document.getElementById() only returns the first matching element, and accessibility tools like screen readers may behave unexpectedly. The IDs tab of this extractor immediately flags duplicates by showing a count greater than one, giving you a quick visual audit without writing any code.
CSS purging tools like PurgeCSS, UnCSS, and the Tailwind CSS content scanner work by scanning your HTML and JavaScript for class names that are actually in use, then removing all other CSS rules from your stylesheet. The raw class list produced by this extractor is directly usable as a safelist — a set of classes that should never be purged even if they aren't found through normal scanning. This is especially useful for dynamically added classes in JavaScript or classes injected by third-party widgets.
When working with purchased or open-source HTML templates, it's common to inherit a large CSS file alongside complex markup. Before customizing the template, extracting all class names gives you a map of every selector that's actually in use. You can then search your CSS for any rules that don't appear in this list — those are candidates for removal, which reduces file size and improves page load performance.
This workflow is particularly powerful for email templates, where bloated CSS can cause rendering issues in clients like Outlook and Gmail. By knowing exactly which classes appear in your HTML, you can inline only the necessary styles and strip the rest.
When renaming a CSS class across a large project, knowing its usage count is crucial. A class used 47 times across your HTML needs to be replaced in 47 places. This extractor surfaces that number immediately, so you know the scope of the refactor before you begin. Combined with a global find-and-replace in your editor, the process becomes controlled and predictable rather than guesswork.
The same principle applies when migrating from a custom class naming convention to a utility-first framework like Tailwind CSS. Extract your current class list, then systematically map each custom class to its Tailwind equivalent. The usage count tells you which classes are most critical to prioritize.
Tailwind CSS removes unused classes in production builds by scanning your template files. However, when classes are generated dynamically — for instance, `text-${color}-500` based on user data — the build tool can't detect them statically. Extracting your class list and adding those dynamic values to the Tailwind safelist in tailwind.config.js ensures they're always included in the final CSS output.
Export the class list as JSON from this tool and use it as the starting point for your safelist configuration. This is far more reliable than trying to remember every dynamically generated class name by hand.
The ID list produced by this tool also plays a role in accessibility auditing. Many ARIA attributes — aria-labelledby, aria-describedby, aria-controls — reference other elements by their ID. If those IDs are duplicated or misspelled, the ARIA relationships break silently. Running an ID extraction as part of your accessibility checklist helps catch these issues early, before they reach production.
Similarly, anchor links using href="#section-id" depend on IDs being unique and correctly spelled. This tool makes it trivial to verify that every anchor target actually exists in your document.