Turning article sections into individual entry points

Long-form articles rarely contain only one useful idea. A single piece might include a practical technique, a broader observation, and several smaller points worth discussing on their own.

The problem is that every shared link typically sends readers to the beginning.

A conversation with a member of the marketing team at Capte Technologies introduced a useful alternative: what if each major section of an article could act as its own entry point? A social post could reference one specific idea and send the reader directly to the corresponding section rather than asking them to find it somewhere farther down the page.

The solution turned out to be a small layer of JavaScript.

Turning headings into destinations

A heading can become a destination when it has an HTML id.

For example:

<h2 id="design-systems-and-semantic-naming">
 Design systems and semantic naming
</h2>


The section can then be reached directly with a URL such as:

https://example.com/articles/article-name#design-systems-and-semantic-naming


Webflow makes it easy to assign an ID to a static heading. Inside a CMS Rich Text field, however, manually managing a unique ID for every H2 would make the publishing process unnecessarily fragile.

Instead, the IDs can be generated automatically from the heading text.

Generating IDs automatically

The following script finds every H2 inside an article Rich Text element, converts its text into a URL-friendly value, and assigns the result as its ID.

Add a class such as article-rich-text to the Rich Text element, then place this script before the closing </body> tag on the Collection template:

<script>
document.addEventListener("DOMContentLoaded", () => {
 const headings = document.querySelectorAll(
   ".article-rich-text h2"
 );

 headings.forEach((heading, index) => {
   if (heading.id) return;

   const baseId = heading.textContent
     .trim()
     .toLowerCase()
     .normalize("NFKD")
     .replace(/[\u0300-\u036f]/g, "")
     .replace(/[^a-z0-9\s-]/g, "")
     .replace(/\s+/g, "-")
     .replace(/-+/g, "-")
     .replace(/^-|-$/g, "");

   const fallbackId = `section-${index + 1}`;
   const initialId = baseId || fallbackId;

   let uniqueId = initialId;
   let duplicateNumber = 2;

   while (document.getElementById(uniqueId)) {
     uniqueId = `${initialId}-${duplicateNumber}`;
     duplicateNumber += 1;
   }

   heading.id = uniqueId;
 });

 const targetId = decodeURIComponent(
   window.location.hash.slice(1)
 );

 if (targetId) {
   const target = document.getElementById(targetId);

   if (target) {
     requestAnimationFrame(() => {
       target.scrollIntoView();
     });
   }
 }
});
</script>


The script also handles repeated headings, accented characters, empty results, and direct visits to a URL containing a section fragment.

What this changes for publishing

The immediate benefit is more precise sharing.

Instead of treating an article as one indivisible piece of content, a marketing team can return to it several times. Each social post can focus on a different section and link readers to the exact point where that subject begins.

This does not manufacture additional content. It exposes the structure already present in the article.

The same links can also be used in:

• Email newsletters
• Documentation
• Related articles
• Table-of-contents navigation
• Internal team references
• Search and AI-generated citations

Clear heading structure also makes the article easier to scan. The technical enhancement works because the editorial structure is already doing useful work.

A small operational improvement

What interested me most was not the amount of code involved. It was the way a relatively small implementation connected editorial structure, marketing distribution, accessibility, and the publishing system.

The idea began with a practical request from someone in marketing working with the content . The implementation then made that capability automatic for every article that followed.

That is generally where I find the most useful web improvements: not in adding another isolated feature, but in noticing where a repeated need can become part of the underlying system.

A studio-oriented version of this idea also appears on the Aether Creative Studio website, where I write about design, code, and the systems that connect them.

‍