Extract Headings

Quickly extract all headings (H1-H6) from a webpage and display them as a nested document outline.

What does this tool do?

Heading extractor tool allows you to pull all heading tags from a webpage’s HTML and present them in a hierarchical tree structure that mirrors the document outline.

Limitations of our tool

• No Javascript: we do not render a webpage like real web browsers do, we fetch the webpage and analyse its HTML to extract headings. SPA-based sites may return empty results.
• Non-HTML content: our tool is only designed to work with HTML documents. PDFs, images, or other formats will not work.

How heading extractor works?

The tool fetches the raw HTML of a webpage, extracts all <h1> through <h6> elements, and builds a nested tree structure using a stack-based algorithm. Headings are grouped under their parent level to form a readable outline.

We built this tool using the following:

• Cloudflare workers: we use them to host our static assets, HTML pages and to serve dynamic requests.
• Cheerio: is a library for manipulating HTML and XML documents, we wanted something fast so we do not hit CPU limits of the Cloudflare workers.

Code example

const webpage = await fetch('https://example.com');
const html = await webpage.text();

const content = cheerio.load(html);
const headings = [];

content('h1, h2, h3, h4, h5, h6').each((_, el) => {
    const tag = content(el).prop('tagName');
    const level = parseInt(tag.charAt(1), 10);
    const text = content(el).text().trim();
    headings.push({ tag, level, text });
})

Change log

11 May 2026 - Initial Release

• Extract headings as hierarchical outline
• Tree-based display with expandable sections