A Table of Contents usually ends up being pretty helpful to readers. It lets you easily skim through what an article will cover and find the section you're interested in. It also lets you know if the article contains the information you’re looking for, and it's a big win for accessibility.

Taking inspiration from all these various platforms, I tried to build my own Table of Contents functionality. I wanted it to dynamically list all the H2 headings along with their bookmark links. I also wanted the headings to get highlighted as they get scrolled in the view. I’m excited, let’s start.

Note: I couldn’t use Codepen, as it uses iframes to preview results – and as of now, Intersection Observer acts quite finicky in iFrame. Here's the gist for this code.

Prerequisites

To get the most out of this tutorial, you should be familiar with:

1. HTML5/CSS3/JavaScript

2. Intersection Observer API

Alright, now let's dive in.

Setting Up the Project

First things first, let’s set up the HTML structure for our Table of Contents. It'll be nothing fancy – just an <article> tag wrapping all the content stuff, with an <aside> tag as a sibling, all being wrapped up by the <main> tag.

Here's what that'll look like:

<main>
    <article>
        <h1>Main Heading</h1>
        <h2>Heading First</h2>
        <p>Lorem ipsum dolor sit...</p>
        <h2>Heading Second</h2>
        <p>Lorem ipsum dolor sit...</p>
        <h2>Heading Third</h2>
        <p>Lorem ipsum dolor sit...</p>
    </article>
    <aside></aside>
</main>

The <aside> tag is empty as it will get populated depending upon the content in the <article> using JavaScript.

We're done with the structure part. Let's do some styling, which will help us distinguish between the inactive and active links.

How to Add the Styling

I have imported a Google font called DM Sans for this mini-project. In my CSS, I'm using native nesting.

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600&display=swap');

html {
    scroll-padding: 3.125rem; 
    font-family: 'DM Sans', sans-serif;
  }
  main {
    display: grid;
    gap: 2rem;
    grid-template-columns: 3fr 1fr;
  }
  aside {
    align-self: start;
    position: sticky;
    top: 0.625rem;
    ul {
      li {
        a {
          transform-origin: left;
          transition: transform 0.1s linear;
          &.active {
            font-weight: 600;
            transform: scale(1.1);
          }
        }
      }
    }
  }
  @media (max-width: 767px) {
    main {
      grid-template-columns: 1fr;
  }
    aside {
      display: none;
    }
  }

I used display: grid; to put a layout together where the content takes up three quarters of the container (in this case, the viewport) space, and Table of Contents takes up the remaining fourth of the space.

I'm keeping the <aside> sticky so that it stays in the view while the content is being scrolled. We need to experience the interactivity and behavior of the 'Table of Contents, don't we?

How to Build the Logic

Now, here comes the fun part – and definitely the most important part. Let's start with what we can achieve easily and build upon that.

Build the dynamic table of contents feature

First, we need to store all the H2 elements in a variable, and that's what we'll do in the first line. Next, we will select the aside elements, as we have to populate it with something. Then, we'll create a new ul element and store it in the variable ul. After doing that, we append the newly created ul element as a child of the aside element.

Here's what that looks like:

const headings = Array.from(document.getElementsByTagName("h2"));
const aside = document.querySelector("aside");
const ul = document.createElement("ul");
aside.appendChild(ul);
headings.map((heading) => {
    const id = heading.innerText.toLowerCase().replaceAll(" ", "_");
    heading.setAttribute("id", id);
    const anchorElement = `<a href="#${id}">${heading.textContent}</a>`;
    const keyPointer = `<li>${anchorElement}</li>`;
    ul.insertAdjacentHTML("beforeend", keyPointer);
});

Now, we use the map function to iterate over and perform a function for every H2 element. First, we create an id for each h2 element by converting the text content to lowercase and replacing spaces with underscores. This id is used for linking to the corresponding section.

Next, lets use the id we just created, and set it as the value of the 'id' attribute. Then we create an anchor element (<a>) with an href attribute pointing to the generated id. The anchor text is set to the text content of the h2 element.

Now, we can create a list item (<li>) containing the previously created anchor element and then that list item is appended as HTML to the end of the unordered list (ul).

Make the ToC interactive

Alright, we're halfway up there! Right now, we have a dynamic Table of Contents that automatically lists all the h2 elements with their bookmark links.

Now, we just have the interactive part left. We want our link to get highlighted when the corresponding section is in the page view.

So, now that aside element is populated and contains anchor tag, we will store all those anchors and name it tocAnchors.

const tocAnchors = aside.querySelectorAll("a");

Next, we will declare an arrow function named, obFunc which will later be used in Intersection Observer. Intersection Observer is basically an API that is provided by the browser. It lets us observe the changes in the intersection of the elements we want with the document viewport or the root element of your choice.

const obFunc = (entries) => {}

Now, we have defined a function obFunc that takes an array of entries as its parameter. The function will be executed whenever the observed elements (specified later) intersect with the viewport.

Within the forEach loop for entries, we check if an observed element is intersecting with the viewport. If the condition is satisfied, then we find the index of the intersecting element (represented by entry.target) within the headings array.

entries.forEach((entry) => {
        if (entry.isIntersecting) {
            const index = headings.indexOf(entry.target);
        }
}

Using a new forEach loop, we iterate through all anchor elements (tocAnchors) and removes the "active" class from each of them so that the active class doesn't persist on more than one element at one time.

tocAnchors.forEach((tab) => {
    tab.classList.remove("active");
});

And, now we add the active class to the anchor element that is intersecting at that moment. In addition to that, we use the scrollIntoView method that scrolls the page to bring the active anchor element into view. The option { block: "nearest" } ensures that it scrolls to the nearest position both vertically and horizontally.

tocAnchors[index].classList.add("active");
    tocAnchors[index].scrollIntoView({
        block: "nearest"
});

Now, we define an object, oboption that will act as a config for Intersection Oberserver. rootMargin specifies the margins around the root (in this case, the viewport), and threshold sets the threshold at which the callback function is triggered.

const obOption = {
    rootMargin: "-30px 0% -77%",
    threshold: 1
};

The rootMargin option is very important here. You're basically setting a pesudo-viewport by creating an offset from the original viewport. This becomes the surveillance area (sort of).

This option takes values the same way margin does – except when we use negative values here, it accounts for it by moving towards the center of the screen. You can definitely use same values as mine and achieve an ideal area, or you can play around with the values until you get your ideal behavior.

At last, all we have to do is create a new Intersection Observer instance with the previously defined function (obFunc) as callback and options (obOption). And then we'll use the forEach loop to iterate over all the H2 elements and put them on observation using .observe() method.

const observer = new IntersectionObserver(obFunc, obOption);
headings.forEach((hTwo) => observer.observe(hTwo));

When any of these elements intersect with the viewport, the obFunc callback function will be executed.

Project demo showing the ToC on the right while we scroll the text

Wrapping Up

Now, you have a fully interactive and dynamic Table of Contents. Hope this tutorial helped you. Let me know if you can build upon this or improvise further on this project. Cheers!

So if that's what you're doing, first of all – great job! You have made a wise decision by not starting directly with React.

Second, React builds on key concepts like the map(), filter(), and reduce() JavaScript methods (after all – React is a JavaScript library). So this makes these methods a must-learn.

Map, filter, and reduce are three of the most useful and powerful high-order array methods. In this tutorial, you'll see how each of these high-order array methods work. You'll also learn where you'll want to use them and how to use them, with the help of analogies and examples. It’ll be fun!

How to Use the map() Method

Suppose you have an array arrOne where you’ve stored some numbers, and you’d like to perform some calculations on each of them. But you also don’t want to mess with the original array.

This is where map() comes into the picture. The map method will help you do this:

let arrOne = [32, 45, 63, 36, 24, 11]

map() takes a maximum of three arguments, which are value/element, index, and array.

arrOne.map(value/element, index, array)

Let’s say you want to multiply each element by 5 while not changing the original array.

Here's the code to do that:

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

And here's the output:

[ 160, 225, 315, 180, 120, 55 ]

So what's going on here? Well, I have an arrOne array with 6 elements in it. Next, I initialized an arrow function multFive with ‘num’ as an argument. This returns the product of num and 5, where the ‘num’ variable is fed the data by the map() method.

If you’re new to arrow functions but are familiar with regular functions, an arrow function is the same as this:

function(num) 
    {  
        return num * 5;
    }

Then, I initialized another variable arrTwo that will store the new array that the map() method will create.

On the right-hand side, I called the map() method on the ‘arrOne’ array. So, the map() method will pick each value of that array starting from the index[0] and perform the desired calculation on each value. Then it'll form a new array with the calculated values.

Important: Notice how I’m stressing not changing the original array. That is because this property is what makes the map() method different from the ‘forEach()’ method. The map() method makes a new array whereas the ‘forEach()’ method mutates/changes the original array with the calculated array.

How to Use the filter() Method

The name kind of gives it away, doesn't it? You use this method to filter the array based on conditions you provide. The filter() method also creates a new array.

Let’s take an example: Suppose you have an array arrName and that array stores a bunch of numbers. Now, you would like to see what numbers can be divided by 3 and make a separate array from them.

Here's the code to do that:

let arrNum = [15, 39, 20, 32, 30, 45, 22]
function divByFive(num) {
  return num % 3 == 0
}
let arrNewNum = arrNum.filter(divByFive)
console.log(arrNewNum)

And here's the output:

[ 15, 39, 30, 45 ]

Let's break down this code. Here, I have an array arrNum with 7 elements in it. Next, I initialized a function divByFive with ‘num’ as an argument. It returns true or false for each time a new num is passed for the comparison, where the ‘num’ variable is fed the data by the filter() method.

Then, I initialized another variable arrNewNum that will store the new array that the filter() method will create.

On the right-hand side, I called the filter() method on the arrNum array. So, the filter() method will pick each value of that array starting from the index[0] and perform the operation on each value. Then it'll form a new array with the calculated values.

How to Use the reduce() Method

Let’s say you are asked to find the sum of all elements of an array. Now, you could use a for loop or the forEach() method, but reduce is built for this kind of task.

The reduce() method reduces an array to a single value by performing the desired operation on the elements collectively.

Let’s take the above example and use reduce on it:

let arrNum = [15, 39, 20, 32, 30, 45, 22]
function sumOfEle(num, ind) {
  return num + ind;
}
let arrNum2 = arrNum.reduce(sumOfEle)
console.log(arrNum2)

Here's the output:

203

Everything is the same as the map() and filter() methods – but what’s important to understand is how the reduce method works under the hood.

There’s not a definite syntax of the reduce() method. Let’s see the simplest one and that will give you the gist of all the ways you can use reduce().

Here's some example syntax for reduce():

//Taking the above array for an example
let arrNum = [15, 39, 20, 32, 30, 45, 22]arr.reduce((a1, a2) => { 
 return a1 + a2
})

Take a look at this syntax. Here, reduce is taking two arguments, a1 and a2, where a1 acts as an accumulator while the a2 has the index value.

Now, on the first run the accumulator is equal to zero and a2 holds the first element of the array. What reduce does is that it throws the value in the accumulator that a2 holds and increments it to the next one. After that, the reduce() method performs the operation on both operands. In this case it is addition.

So, basically a1 is the accumulator which is currently zero and a2 holds 15. After the first run, the accumulator has 15 in it and a2 is holding the next value which is 39.

So, 0 + 15 = 15

Now, on second run, reduce throws a2’s value, 39 in the accumulator and then performs the operation on both operands.

So, 15 + 39 = 54

Now, on the third run, the accumulator has a sum of 15 and 39 which is 54. a2 now holds 20 which the reduce method throws at the accumulator which sums up to 54 + 20 = 74.

This process keeps on going until the end of the array.

Signing Off

Well, that’s it, everyone! Hope you have a good idea of how these high-order array methods work now. Consider sharing if you had a good time reading it and find it helpful.

Check out my latest story here, and for my Git eBook, check here.

Semantic tags add real meaning to the webpage and make it easy for humans, and search engines, to differentiate between different parts of the website.

To a certain extent, it affects the SEO of a webpage, too.

So to reap the benefits, you should know the HTML5 tags you can use to enhance your website.

There are some very useful but little-known HTML5 tags that can come in handy, too. They give a semantic meaning to your webpage, bring more accessibility, and make your life easier.

Here is my list of 5 helpful HTML tags that you might wanna try.

The <abbr> Tag

You use this tag when you want to show the full form of an abbreviation you've used in your blog.

For example, if you're writing an article about a smart home product that also has some AI features that you want to discuss. Now, there could be some casual readers that might be unfamiliar with AI. Using this abbr tag coupled with the 'title' attribute will show the readers a tooltip with the content written in the title tag of the abbreviation. When the user hovers over the abbreviation, it can help them learn what "AI" means.

Think of how much hassle it would save you if you ever feel like adding this kind of functionality to your blog. Instead of fiddling with CSS, all you have to do is insert this tag.

How the <abbr> tag works

Considering you're writing a blog and have access to the HTML view. You have to wrap the abbreviated word with <abbr> with a title attribute which will contain the definition or a full form of the abbreviated word. When done right, the tooltip will appear when the user hovers over the abbreviation showing the content the 'title' attribute holds.

<p style="font-family: sans-serif;"> Can <abbr title="Artificial Intelligence">AI</abbr> be taught how to reciprocate human emotions?
</p>

The <details> Tag

You use this tag to create an interactive container box that can expand and shrink when the user clicks while containing all the content. Upon expanding it shows the content within, and closes as it shrinks.

I use this every time I have something like an 'FAQs' or 'Table of Contents' in mind. This gives you the native support of an accordion without a single bit of JS.

I used it recently while working on one of my sites. I built the 'Table of Contents' section using it. (You will be able to see it down below)

How the <details> tag works

First, we declare the <details> tag that wraps the <summary> tag and your usual content that you want the user to see when they need it. It can be anything – a form, a table, a paragraph, or an image.

<details>
    <summary>Table of Contents</summary>
    <ul>
        <li>
            <a href="#web-dev">Web Development</a>
        </li>
        <ul>
            <li><a href="#web-dev-html">HTML</a></li>
            <li><a href="#web-dev-css">CSS</a></li>
        </ul>
       </ul>
 </details>

Now, I mentioned the <summary> tag earlier: this tag is used with the <details> tag and specifies a heading for the content.

Image Credit: Screen Grab of Freemium Stuff

Tip: Say you're making a FAQ section with this tag, and you want the container to open on page load for, like, 'The most asked question'. You can do that by just giving an 'open' attribute to that particular accordion. Like this:

<details open>
    <summary>How do I get my product registered?</summary>
    <p>You can get your product...</p>
</details>

The <optgroup> Tag

This tag will let you categorize the options of the drop-down list in the forms you build.

When you want something like a drop-down list from which users can choose, use the <select> tag. But, often it can get very long and tedious for users to go through the entire list to find the correct options.

Grouping the options can really help, and your users will appreciate this as they won't have to go through every option. Instead, they can just navigate through to the category they need. This makes for a better user experience.

How the <optgroup> tag works

Right before laying out all the options, declare the <optgroup> tag and wrap all the similar options in it, just like in the example below. You can do it for as many groups as you need.

<label for="cars">Cars</label>
    <select name="Cars" id="cars">
        <optgroup label="SUV">
            <option value="">Porsche Cayenne</option>
            <option value="">Lincoln Nautilus</option>
            <option value="">Mercedes-Benz GLB 2022</option>
            <option value="">BMW X3 2022</option>
            <option value="">Genesis GV80 2022</option> 
            <option value="">Mercedes-Benz GLS 2022</option>
        </optgroup>
        <optgroup label="Sports Car">
            <option value="">Ford Mustang</option>
            <option value="">Toyota GR Supra</option>
            <option value="">McLaren 7205</option>
            <option value="">Porsche 911</option>
            <option value="">Audi R8 V10</option>
            <option value="">Chevrolet Corvette Z06</option>
        </optgroup>
    </select>

Image Credit: Author

The <base> Tag

This tag will let you change the base URL for all the relative URLs in that HTML file. You should include in the <head> tag. It lets you have the convenience of the relative URLs while having the flexibility of changing the base URL.

How the <base> tag works

The user just needs to declare this tag inside the head tag, and now all the relative URLs in the document will get the new URL as its base.

<head>
    <base href="https://bhaveshrawat.pages.dev/assets/">
</head>
<body>
    <figure style="max-width: 480px;">
        <img style="width: 100%;" src="netflix-planform.webp">
        <figcaption>Netflix Planform made with Grid. </figcaption>
    </figure>
    <figure style="max-width: 480px;">
        <img style="width: 100%;" src="hamburger-menu.gif">    
        <figcaption>&lt;input&gt; tag menu bar</figcaption>
    </figure>
</body>

The catch with the <base> tag

There's a catch with using this tag, though. It doesn't play well with in-page anchor tags, like <a href="#home">. These types of links are pretty useful from a navigation point of view. So, unless you're doing JS to make up for the in-page anchor tags, this tag might not be ideal.

The <map> Tag

If you ever wanted to hook a single image with multiple links and map them according to the image, this tag will let you do exactly that.

This tag lets you specify the areas on an image – it can be a rectangle, circle, or poly (basically any irregular shape) – and map them to different links.

How the <map> tag works

First, we specify an <img> tag with the 'usemap' attribute that holds the same value as the <map> tag's name attribute. It must be the same because that will be responsible for linking the map coordinates to the image.

The <map> tag will be declared after that with the 'name' attribute that holds the same value as the 'usemap' attribute.

The <map> tag also wraps the <area> tags with 'shape', 'coords', 'alt', and 'href' attributes. The shape attribute specifies the shape of the map area, coords defines the coordinates of the map area for mapping purposes, alt is for the alternate text, and href holds the links for the respective areas.

<img src="frame.png" width="430" height="194" usemap="#map" />
    <map name="map">
        <area shape="circle" coords="51,51,31" alt="Twitter" href="https://twitter.com/" />
        <area shape="circle" coords="161,52, 33" alt="Github" href="https://github.com/" />
        <area shape="circle" coords="271,51,31" alt="LinkedIn" href="https://linkedin.com/" />
        <area shape="circle" coords="379,51,31" alt="Medium" href="https://medium.com/" />
        <area shape="circle" coords="187, 143, 31" alt="Contra" href="https://contra.com/" />
        <area shape="circle" coords="215, 143, 31" alt="Instagram" href="https://www.instagram.com/" />
        <area shape="circle" coords="323,143,31" alt="Codepen" href="https://codepen.io" />
    </map>

One more thing...

This isn't a tag, but is rather an attribute that can help you in building a custom context menu for your app. I'm talking about the 'oncontextmenu' attribute.

The context menu is basically a menu bar that appears when the user right-clicks on the browser and is served with options like 'Inspect', 'View page source' to name a few.

While building a web-app, you might want to serve your user with a custom context menu with a bunch of special options and features, much like Spotify does.

Image Credit: Screen Grab from Spotify

How the oncontextmenu attribute works

The value of this attribute is true by default. This lets you access the context menu that appears when you right-click. But, when given a false value the context menu will not appear.

So, you're disabling the native context menu because your users won't need it. Also, then it won't interfere with your web-app's functionality.

You don't want your custom menu to be overlapped/interfered with by the native context menu, right? So, this exercise could save you from this horrible experience.

<body oncontextmenu="return false"></body>

Note: The attribute is applicable on all HTML elements. This means that if you don't want a user to have context menu functionality on a certain section only, you can do that, too. Just use the attribute on the parent element, like this

<body>
    <section oncontextmenu="return false"></section>
</body>

Signing Off

So, these were the HTML tags I wanted to share with you all! I hope this article was worth your time and you learned something from it.

If any of these tags have piqued your interest, you can learn more about them on MDN.

Have a good day!

If you're learning Git or getting into it, I would like to recommend an e-Book that I wrote when I was learning Git. It is available in PDF and E-PUB format, you can get it for free on Gumroad. Hope you enjoy the e-Book.