headingsMap

Description from extension meta

To show (and audit) the headings structure

Image from store headingsMap

Description from store The extension generates a documentmap or index of any web document structured with headings (you can access directly to the content by clicking on any of its items), and now, it shows the HTML 5 outline. Features: * List of headings and optional information about their level and if they break the hierarchical structure * List of sections with header information and includes optional information about errors in the structure * Information from the main document and also from the documents inside iframes (includes a document selector that is active when there are multiple documents) * By clicking on the headers the document scrolls to the position of the header/section and highlights it * Detects changes in the DOM and when they finish, updates its content (if necessary) * It can also be refreshed manually * Allow collapsing list of headers by levels * HTML 5 Outline test is optional * CSS outline for identifying the header (or section) when clicking the tree * It doesn't show hidden headers or sections (hidden for assistive technologies) * If the header (or section) is an anchor, the link in the results has the href pointing to it (useful for being copied directly from the tree with the option in the contextual menu of the browser) * Two themes So this is useful not only to facilitate navigation to anyone, but also to help webdevelopers, consultants and auditors.

Latest reviews

(2020-02-04) Ramon Fincken: Also shows red highlight that a heading is missing ( h1 -> h3. the first h3 is red because h2 is missing )
(2019-12-12) John Bedggood: Let me say. i NEVER write reviews. But I've been using headingsMap for a month and now I can't live without it. Simple and super useful for everything I do. JB
(2019-08-08) Silver Simmy: Awesome!
(2019-07-22) Kosuke I: sweet. I like it when you click, it scrolls, and highlights it.
(2019-05-22) Dana Rudenko: Exactly what I was looking for. Simple, clickable, amazing!
(2019-04-17) Web Master: Very helpful tool and excellent support from the developer
(2019-01-31) Mike T: Very useful for quickly viewing structure of pages to evaluate their accessibility.
(2019-01-12) 黄志东: Hi, I found some problem with the extension. When I use it on some website and cancel it, I found all thing of the page had moved to a side. This is terrible compatibility with the most of noting and marking extension. Sorry for my poor English. It is a fantastic extension. If you fix the problem, I will give it 5 stars. :)
(2018-12-30) mengLV LI: love it and is useful
(2018-12-13) John Ren: Laggy in html5 outline mode
(2018-11-26) Morgan JERABEK: "Consulter votre historique de navigation" pour un plugin qui donne les headings ? Sérieusement ? Quel est le réel objectif derrière ?
(2018-11-26) Wolfgang Wiese: Since yesterday (2018/11/25) headingsMap wants to read the browser history. Why?
(2018-11-25) Marko Štimac: Chrome reports that this extension is disabled until we accept new conditions - extension wants to read our history. Why is that?
(2018-10-18) I have really liked this plugin, however it seems that it was updated and all the H tags are not displaying anymore, it's just the headlines with not H tags specified. Also, there were Headers Structure and HTML structure. Now, it only states Headers Structure without the H tags specified. Will this be fixed, as it really was a handy plugin before?
(2018-09-17) Arnold Wender: A must have while optimizing heading structures :)
(2018-06-25) Michelle Peace: Very helpful for quickly getting a look at the heading structure of a page during testing. Only wish I could change the color of the icon to be more visible with dark browser themes.
(2016-12-29) Dominique Giordano: Does nothing when I push the button, not translated.
(2016-08-31) Gerhard Schellmann: A readl interseting tool for me: The first I understand the correlation of sections and headings
(2016-08-03) Delonghi Erp: Please, add search field.
(2016-02-24) Luis S. Celadita Contreras: Sencillamente efectivo. Muy bueno.
(2016-02-17) Chris Harvey: vertically squishes text way too small if there are many headings on a page.
(2015-06-02) Joshua Muheim: This is useful, but it shows also heading elements that are hidden from the DOM (using CSS display:none / visibility:hidden), which is NOT correct.
(2015-04-14) Alexey Inq: Thnx! Very usefull!
(2014-07-23) 혜선주: :)
(2014-03-26) Andrés Berdasco: Simply the best extension to verify the outline of a HTML/HTML5 document. Also, it is very usefull as a navigation tool in long documents.

Latest issues

(2019-06-29, v:3.5.14) Tim Osborn: Clicking a heading with #id doesn't update the document location
Hi! Thanks for the extension - have found it thoroughly useful for ages 👍 I thought that I used to be able to click a heading in headings-map and actually _navigate_ to the heading in the document when it has an id attribute (ie - see my location bar update with #link rather than just scrollTo), but that's not working for me anymore... > If the header (or section) is an anchor, the link in the results has the href pointing to it (useful for being copied directly from the tree with the option in the contextual menu of the browser) I can't see a setting to enable contextual menu options, either... Is this still possible? I prefer headings map to solutions like "Show Anchors" https://chrome.google.com/webstore/detail/show-anchors/nhppnhnadikeniijclnghjfblnojgige?hl=en Many thanks for your work, ptim
(2019-06-27, v:3.5.14) Daniel Tonon: Sections labeled using aria-label show false error colorisation
Thanks for adding aria-label support. There is still a bug with it though (I've only just gotten around to tested it now). If there is no <h#> element used to label the sectioning element, and aria support is turned on, the field still says that it is in error. You can see it occur on GitHub https://github.com/. The <nav> element is labeled using only aria-label. It is displayed as being in error. It should not be. The only times a field should be considered in error is if no label is available at all or (maybe) if there are multiple different labels being given to the same sectioning element.
(2019-05-17, v:3.5.12) Ferdy Christant: Include <title> from inline SVG
Great extension. Feature request: when using an inline SVG, any <title> element inside the SVG should be respected as header value if wrapped inside a header. The extension currently does not do that. Example: <h1> <svg> <title>Mytitle</title> .... </svg> </h1>
(2019-05-04, v:3.5.11) Daniel Tonon: Document outline tool does not accept <div role="heading"> elements as headings
What the subject title says
(2019-05-04, v:3.5.11) Daniel Tonon: Ignores aria-level >6
It is possible to create a valid <h7> element using <div role="heading" aria-level="7">. If I do this, Headings Map displays it as a <h2> heading. See this link for evidence that W3C approves of this method: https://www.w3.org/WAI/GL/wiki/Using_role%3Dheading_to_identify_headings#Example_2
(2019-04-28, v:3.5.11) Daniel Tonon: Document outline tool: Please take aria-label and aria-labelledby attributes into account
The official W3C Validator service (https://validator.w3.org/) has the exact same issue. I posted an issue in their issue tracker. (https://github.com/validator/validator/issues/805) They have recognized that this is a bug that needs fixing. Headings Map has the exact same bug in it. Please add support for aria-label and aria-labelledby attributes as a method for labeling sectioning elements.
(2019-03-21, v:3.5.6) Headings Incorrectly Marked as Hidden
Hello! I am trying to evaluate heading structure on the following page: https://humboldtgov.org/CivicAlerts.aspx?CID=14 However, the extension is detecting headings as being hidden. I am not seeing anything within the HTML that would cause this and when testing with NVDA screen reader, I am able to traverse through the headings.
(2019-02-09, v:3.5.5) Regina Mize - Genealogist: Not working
I am trying to use the tool and it is not working.
(2018-10-18, v:3.3.0) Heading numbers not showing
Hello, First of all, thank you for such a great tool! Since last update (most likely) I've noticed the heading numbers are not shown any more. Please see http://easycaptures.com/fs/uploaded/1291/5899703816.png Could this be fixed in next update please? Thanks and regards, Olvier
(2018-10-16, v:3.3.0) Emre Y: Headingnumbers are gone
I used to see the heading numbers, but all I see are the titles now, now heading numbers.

Statistics

Installs

21,747

Links

Extension in store

Developer e-mail