Search code examples
htmlpluginsaccessibilitybrowser-plugin

Is there a browser tool to show a quick overview of headings information of a website?

Sometimes you need a quick overview of all used html headings (h1, h2, h3, ...) of a website. Yes actually you could take a look into the source code to get it but that's not really a quick overview.

Many webdeveloper know Chromiumbrowser's nice tool called "Web Developer". The tool enables you to outline the headings but the outlines colors does not allow a conclusion of the heading number or the heading hierarchy.

So that brings me to the question if there is a Firefox, Chromium or other Browser's tool to show a quick overview of headings information of a website ?

Solution

  • You have Web Developer addon for Firefox and Web Developer extension for Chrome, that does your exact work. Also, there is one more tool called WAVE Toolbar, that does the heading count and many such things related to accessibility.

    WAVE Toolbar


    (source: mozilla.net)


    (source: mozilla.net)


    (source: mozilla.net)


    (source: mozilla.net)