Turning headings into link targets—cont’d

… starting from the point where the story stopped.

Adding the ID manually—the proper way

According to the W3 article on Links, the anchor destination can be specified by using either the <a> element (with the name attribute) or by any other ¹ element (with the id attribute). While both methods are fully compliant with W3C standards, Google’s developer documentation style guide recommends using the <section> element with an id attribute to add an anchor to a heading. Specifically, they advise against using the <a> element with a name attribute. Here are some further recommendations from the “Make headings into link targets” article:

Recommended:
 <section id="introduction-to-everything">
  <h2>Introduction to everything</h2>
  ...
 </section>
  
Acceptable:
 <h2 id="introduction-to-everything">Introduction to everything</h2>
  
Not recommended:
 <h2><a name="Introduction_To_Everything">Introduction to everything</a></h2>
  
Not recommended:
 <a name="Introduction_To_Everything"></a>
  <h2>Introduction to everything</h2>

In line with this, WordPress’s “Headings as link targets” article also advises: To add an anchor to a heading in HTML, add a section element with an id attribute. Don’t use <a name> Ironically, they used the same four examples as above!

“So, why did WordPress 5.9 use the ‘acceptable’ method and not the recommended way?”
“Probably to avoid the following headache…”

So, if I understand correctly, a section is a thematic grouping of content, meaning that a section is part of a larger group without which it may not necessarily stand to make complete sense alone . . . This is why a section would usually have a heading, providing a sort of call-back to what part of the larger document the section relates to. Therefore, it would be appropriate to use the <section> element to divide up the different parts of my blog post.

In such a basic scenario, I could easily use the recommended way indeed:

<h1>Title of my post</h1>
 <p>My short introduction</p>
<section id="topic-1">
 <h2>Topic 1</h2>
  <p>The text about topic 1.</p>
</section>
<section>
 <h2>Topic 2</h2>
  <p>There is also a topic 2.</p>
</section>

It took me a while to figure this one out, but the trick is to use the Group block. Once you have selected all the blocks you want to include, click on the Group icon in the contextual menu. By default, groups are <div>s but can also be set as sections/asides/etc. in the block inspector sidebar. Indeed, under Advanced, I could find the HTML ELEMENT dropdown choice and opted for <section>. Beware, this is highly theme-dependent; luckily, I had no problem with my Twenty Seventeen theme.

Things get a bit complicated when there are more headers than just <h2>. As you may know, there are six levels of section headings from <h1> to <h6> and while I am not always going that deep in the hierarchy, I often use <h3>, and my textboxes are using the <h4> heading ³ and the <div> wrapper, by the way. That is great because headings may be nested as subsections to reflect the organization of the content of the page. But, could the <section> element be nested within another <section> element? The short answer is yes, it can be nested. At least, if I believe the “HTML <section> Tag” article from GeeksforGeeks.

Can I nest multiple <section> tags within each other?

Yes, you can nest <section> tags to create subsections. This is useful when you need to divide content into multiple hierarchical levels, each with its own heading.

As you can imagine, implementing the recommended way would involve restructuring all my previous blog posts. It’s a challenging task, regardless of whether they were created with the classic editor or Gutenberg. Admittedly, adding the <section> element to my articles would be beneficial for improving the semantic structure of my content. However, if I were to do that, I would need to nest multiple <section> elements within each other, given my various distinct sections. This complexity might not necessarily enhance my content’s clarity or accessibility. Besides, the <section> element isn’t required, so it’s probably best to avoid the extra complication.

Given these circumstances, I’ve decided to make the header elements themselves the anchors, opting for the ‘acceptable’ approach instead of the recommended one.

Conclusion

Even though creating anchor links adds a few more steps to your process before publishing a blog post, it can make a big impact on user experience. Anchor links can be used to create features like table of contents, which can enhance the organization of long blog posts. Creating links that take you to a specific part of the page makes it much easier for users to navigate through your content and find the information they are looking for. Without the assistance of anchor links, users may end up scrolling through the page for a long time, which could lead them to bounce.Ginny Mineo

With the advent of Gutenberg, there’s no need to be familiar with HTML to add anchors. The Block Editor enables you to add HTML anchors or IDs without switching to the code view. The Gutenberg editor includes a built-in option for creating jump links. Specifically, this allows you to set an HTML Anchor to a Heading block or any other block that allows for an HTML Anchor to be set under Advanced.

“Which blocks?”
“Many common blocks support anchors, including Paragraph, Heading, Image, Columns, and Buttons.”
“What about the Group (or section) block?”
“Don’t go there please! But yes, you can.”

So, all I will have to do is select the blocks of interest, i.e., my heading blocks, one by one. Each time, click on Advanced on the right side under Block Settings. You may have to scroll down to find it and click on it to expand it. Then, I will just have to type the word(s) that will become my link into the HTML Anchor field, making sure it’s unique from any other anchor on the page.

Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor”. Then you’ll be able to link directly to this sections of your page.

Ideally, it should be short and memorable. Don’t make your anchor link unnecessarily long or complex. Remember, it doesn’t have to be an exact match; it’s a good idea to use keywords related to the section you are linking to, though. Importantly, you can’t have spaces in an HTML anchor (see below), so it’s better to stick to one word or include dashes. You can use capitalization in anchor text to make it more readable; still, it’s better to use lowercase for id values.

Pro tip: when linking to the anchor ID you must include a “#” at the beginning. But when naming the anchor element with an anchor ID you do not include the “#”.

In addition to these tips, there are a few rules to follow. The first, and most important, is that the HTML anchor must be unique within a document. Second, HTML anchors cannot include spaces. Therefore, if you use more than one word, it is better to separate them with hyphens (-). That being said, you can use the following symbols instead: underscore (_), colon (:), period (.). Third, HTML anchors must start with a letter of the alphabet. Last, HTML anchors are case-sensitive, so be careful.

Remember that each id can appear only once on a page.

To sum up, anchor links are a great way to direct your readers to specific parts of your content. You can keep your site visitors’ attention focused on the content they most want to see. These anchor links can even link to other parts of your site or to external sources that have specified HTML IDs. Use them!

Coming Next: Updating my old posts

---

¹ Anchor links can be used on anything, such as text, images, and, of course, H1-H6 headers. ^
² Naming the header elements with the id attribute is fully compliant with W3C standards. Even in their examples, they use this approach by making the header elements themselves the anchors. ^
³ Avoid skipping heading levels in your code: always start from <h1>, followed by <h2>, and so on. Given the importance of maintaining a sound document outline, I may have to add a task to my blog posts housekeeping to-do list… ^