Easily Create a Page Heading Map in FireFox

SMS Text

I have previously outlined the importance of heading stucture for accessibility and usability as well listed some best practices as to using h1-h6 tags. Today I am reviewing an awesome FireFox addon called HeadingsMap that allows:

  • To quickly check how consistent and logical the heading structure of the page is;
  • To navigate through the page using the headings.

All in all, I was pleased to find such a useful and usable tool.

Get it installed as a regular FireFox addon and notice a tiny icon added to the lower left corner of your browser:

Headings map icon

Clicking the icon toogles the sidebar that contains the current “Document Structure“.

Headings map

1. Evaluate your page semantic structure

The tool makes it easy to quickly analyze if your page headings are properly used:

  • It shows all headings in the document, including those hidden with CSS techniques or those without content.
  • It warns when there are no headings in the document.
  • It warns when there are skipping level in the headings structure.

Analyze headings

2. Quickly navigate from heading to heading

Another great feature of the tool allows to quickly go from heading to heading by clicking them in the sidebar. When an item is selected in the sidebar, the heading is highlighted, so you can jump to it (I tried it and seemed a great time saver. It makes “scanning” web pages much easier).

Navigate from heading to heading

The options dialog allows to modify the highlighting colors as well as disable any of the features in case you don’t need one:

Headings map options

Ann Smarty
Ann Smarty is the blogger and community manager at Internet Marketing Ninjas. Ann's expertise in blogging and tools serve as a base for her writing, tutorials and her guest blogging project, MyBlogGuest.com.
Ann Smarty
Get the latest news from Search Engine Journal!
We value your privacy! See our policy here.
  • http://www.rcnitrocarz.com Redcat Rc Cars

    Great tip I am going to add the plugin.

  • http://www.hookahhappiness.com Hookah Happiness

    Great tip. Going to check this plugin out.

  • nickandrews

    Unfortunately there are so many tools out there now that it can be hard to find one that not only does what you want but is also usable. This add-on is certainly up there with the better of the tools though and is certainly a vast improvement on the functionality in Firefox's web developer toolbar. Good find!

  • http://www.kozlucayliyiz.biz ramazan

    merci ma belle ūüôā

  • http://www.designtorontoweb.ca/ hannah trinity, web designer

    Good one, I've been using firefox ever since and have always taken advantage of their add-ons. I really should try this one. Thanks for sharing.

  • http://2u.blogspot.com Jimmy Tech Daily

    Thanks for sharing a good post.
    I'm agree your point of you post and I very enjoyed it.

  • belisma

    Thank you for beautiful post.

  • belisma

    Thank you for beautiful post.