Bookmarklets

Heading Hierarchy Map

The Heading Hierarchy Map Bookmarklet reveals the structural skeleton of any webpage.

With one click, this bookmarklet generates a visual tree diagram of all headings (H1–H6) — showing nesting depth, child counts, and leaf nodes — with clickable navigation to jump to any heading.

Essential for SEO audits, accessibility reviews, and content architecture analysis, this tool goes beyond simple highlighting to show the true structure of page content.

javascript:!function(){try{if(window._hhMapPanel)return window._hhMapPanel.remove(),void(window._hhMapPanel=null);const e=document.querySelectorAll("h1,h2,h3,h4,h5,h6");if(0===e.length)return void alert("No headings found on this page.");let n={level:0,children:[],text:"Page",id:"root"};[].push(n);const t=[n];e.forEach(((e,n)=>{const i=parseInt(e.tagName[1]),l={level:i,children:[],text:e.textContent.trim().substring(0,80),tag:e.tagName,originalEl:e,id:"h"+n};for(;t.length>1&&t[t.length-1].level>=i;)t.pop();t[t.length-1].children.push(l),t.push(l)}));const i={1:"#ef4444",2:"#f97316",3:"#eab308",4:"#22c55e",5:"#3b82f6",6:"#8b5cf6"},l={1:"#fef2f2",2:"#fff7ed",3:"#fefce8",4:"#f0fdf4",5:"#eff6ff",6:"#f5f3ff"};const o=document.createElement("div");o.id="hh-map-panel",window._hhMapPanel=o,o.style.cssText="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:560px;max-height:80vh;background:#fff;border-radius:16px;box-shadow:0 12px 48px rgba(0,0,0,0.2);z-index:999999;font-family:system-ui,-apple-system,sans-serif;overflow:hidden;display:flex;flex-direction:column;";const a=Object.entries(i).map((([e,n])=>`<div style="display:flex;align-items:center;gap:4px;font-size:11px;"><div style="width:10px;height:10px;border-radius:2px;background:${n};"></div>H${e}</div>`)).join("");o.innerHTML=`\n      <div style="padding:16px 20px;background:linear-gradient(135deg,#1e293b,#334155);color:#fff;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;">\n        <div>\n          <div style="font-size:16px;font-weight:700;">🗺️ Heading Hierarchy Map</div>\n          <div style="font-size:12px;opacity:0.7;margin-top:2px;">Visual tree structure of page headings</div>\n        </div>\n        <button id="hhm-close" style="background:none;border:none;color:#fff;font-size:20px;cursor:pointer;opacity:0.8;">✕</button>\n      </div>\n      <div style="padding:10px 20px;border-bottom:1px solid #e5e7eb;display:flex;gap:12px;align-items:center;flex-shrink:0;">\n        ${a}\n        <div style="flex:1;"></div>\n        <span style="font-size:11px;color:#9ca3af;">Click heading to jump to it</span>\n      </div>\n      <div style="overflow-y:auto;flex:1;padding:16px 20px;max-height:60vh;">\n        ${function n(t,o){if(0===t.level){let i=`<div style="padding:8px 12px;background:#1e293b;color:#fff;border-radius:8px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;">\n          <span style="background:#6366f1;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;">📄</span>\n          ${t.text} <span style="font-size:11px;opacity:0.6;font-weight:400;">${e.length} headings</span>\n        </div>`;return t.children.length>0&&(i+='<div style="margin-left:24px;margin-top:4px;padding-left:20px;border-left:2px solid #334155;">',t.children.forEach((e=>{i+=n(e,1)})),i+="</div>"),i}const a=i[t.level]||"#6b7280",r=l[t.level]||"#f9fafb",s=t.children.length>0?`<span style="font-size:10px;background:${a};color:#fff;padding:1px 6px;border-radius:10px;margin-left:4px;">${t.children.length} child${t.children.length>1?"ren":""}</span>`:"",d=0===t.children.length?'<span style="font-size:10px;background:#9ca3af;color:#fff;padding:1px 6px;border-radius:10px;margin-left:4px;">leaf</span>':"";let p=`<div style="margin-top:4px;">\n        <div class="hh-map-item" data-id="${t.id}" style="padding:6px 10px;background:${r};border-left:3px solid ${a};border-radius:0 6px 6px 0;font-size:13px;color:#374151;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:all 0.15s;" onmouseover="this.style.transform='translateX(2px)'" onmouseout="this.style.transform='none'">\n          <div style="display:flex;align-items:center;gap:6px;min-width:0;">\n            <span style="font-size:10px;font-weight:700;color:${a};min-width:22px;">${t.tag}</span>\n            <span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${t.text}</span>\n          </div>\n          <div style="display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:8px;">\n            ${s}${d}\n          </div>\n        </div>`;return t.children.length>0&&(p+=`<div style="margin-left:16px;padding-left:12px;border-left:1px dashed ${a}40;">`,t.children.forEach((e=>{p+=n(e,o+1)})),p+="</div>"),p+="</div>",p}(n,0)}\n      </div>`,document.body.appendChild(o),o.querySelector("#hhm-close").addEventListener("click",(function(){o.remove(),window._hhMapPanel=null})),o.querySelectorAll(".hh-map-item").forEach((n=>{n.addEventListener("click",(function(){const n=this.dataset.id;if("root"===n)return;const t=parseInt(n.substring(1)),i=e[t];i&&(i.scrollIntoView({behavior:"smooth",block:"center"}),i.style.transition="background 0.3s",i.style.background="#fef08a",setTimeout((()=>{i.style.background=""}),2e3))}))}))}catch(e){alert("Error: "+e.message)}}();
Drag me to bookmark bar: 👉🏻 Heading Hierarchy Map

Features

Why Use Heading Hierarchy Map?

This bookmarklet is essential for:

How to Use

  1. Drag the button above to your bookmarks bar
  2. Navigate to any webpage
  3. Click the bookmarklet — the hierarchy map panel appears
  4. Review the tree structure to understand the heading layout
  5. Click any heading in the map to jump directly to it on the page
  6. The heading will flash yellow to confirm you've reached it
  7. Use the color legend at the top to identify heading levels
  8. Click ✕ to close the panel

Heading Best Practices