HTML tag counter — count elements, attributes, comments and nesting depth

How to use the HTML tag counter

1. Paste HTML into the HTML box: a whole page, a template or a fragment.
2. Read the summary: Elements, Different tags, Attributes, Comments and Deepest nesting.
3. Check the Tags table, sorted by count, with each tag’s Share of all elements.
4. Download the table as tag-counts.csv to compare versions of a page.

What it does and when to use it

Page speed tools warn about an “excessive DOM size”, and a template that keeps growing is hard to maintain. This counter gives you the numbers behind that: how many elements a page or component has and which tags make up most of it. A page with hundreds of div and span elements but few headings or lists is often a sign of wrapper soup that could be simplified with semantic tags.

It is also handy for quick audits. How many images or links does an email template contain? Did a refactor reduce the number of elements? Is there any leftover comment? For a closer look at the attributes on those elements, use the HTML Attribute Extractor. To remove the comments it finds, use the HTML Comment Remover. To check the structure for errors, use the HTML Validator.

How it works

The HTML is split into tokens in your browser. Every opening tag adds one to its tag’s count and adds its attributes to the attribute total; every comment adds one to the comment count. Tag names are counted in lower case, so DIV and div are the same. For the nesting depth, the HTML is built into a tree, using the same rules as a browser for end tags that may be left out, and the longest chain of parents is measured. Each tag’s share is its count divided by the total number of elements, rounded to one decimal place.

Worked examples

The café menu sample is a small complete page:

Elements: 19
Different tags: 17
Attributes: 9
Comments: 1
Deepest nesting: 5

a and li lead the table with 2 each (10.5%); every other tag appears once (5.3%).

A small fragment. <div><p>a</p><p>b<br>c</p></div> has 4 elements of 3 kinds. The table reads p | 2 | 50%, then br and div with 25% each, and the deepest nesting is 3: div, p, br.

Text with no markup. “just text” returns “No HTML tags found.”

Limits and tips

• Content inside script and style is not read as HTML, so tags written inside a JavaScript string are not counted.
• SVG icons count too: each svg, path and g is an element. Inline icons can add many elements to a page.
• To compare two versions, export both tables as CSV and open them side by side.