Page Summary
-
Turn a heading into a link target by adding an
idattribute within a<section>element or directly to the heading tag in HTML. -
When creating custom anchors, use lowercase letters, hyphens between words, and ensure they are descriptive yet concise.
-
Consider adding custom anchors for frequently linked content or when revising headings to prevent broken links.
-
If revising a heading with an existing anchor, create a new custom anchor using the older ID to maintain link functionality, or update existing links if changing the anchor.
This page discusses how to turn a heading into a link target by using an id
attribute. For more information about how to format headings, see Headings and titles
.
In some content management systems, anchors are automatically created for headings. However, you might want to add a custom anchor to a heading for several reasons:
- You want to use an anchor that's shorter than the automatically generated anchor.
- You want to use an anchor for content that might be frequently linked to. Adding a custom anchor reduces the likelihood of breaking existing links if the heading text changes later.
- You want to revise a heading . If the anchor for the heading is generated automatically, then the anchor changes when you revise the heading, breaking existing links.
Add a custom anchor
HTML
To add an anchor to a heading in HTML, add a section
element
with an id
attribute. Don't use an a
element with
a name
attribute. For anchor text, use lowercase letters, and
put hyphens between words. In the following, replace ID_OF_ANCHOR
with your anchor text—for example, introduction-to-everything
.
<section id=" ID_OF_ANCHOR "></section>
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>
Markdown
To add an anchor to a heading in Markdown, add the following code to the
end of the line that the heading is on. For anchor text, use lowercase
letters, and put hyphens between words. In the following, replace ID_OF_ANCHOR
with your anchor text—for example, conserve-habitat
.
{: # ID_OF_ANCHOR }
Recommended :
## Help conserve habitat for pollinators {: #help-conserve-habitat-for-pollinators }
Also recommended :
## Help conserve habitat for pollinators {: #conserve-habitat }
Acceptable :
## Help conserve habitat for pollinators {: id='conserve-habitat' }
Acceptable :
## Help conserve habitat for pollinators {: id="conserve-habitat" }
