Web pages with a lot of content may benefit from well-structured headings accompanied by links at the top of the page to the content headings. The concept is analogous to a table of contents. These are commonly referred to as anchor links.
You create a regular link (standard anchor tag in HTML) but in this case you link to a section on the same page using the id attribute of that section’s heading. This requires a bit of HTML editing (switching out of Visual editor into Text editor) but is relatively easy. Example code is included below.
First, organize your content using h2 headings at the beginning of your content sections. Use concise headings with relevant keywords.
Next, in Text/HTML editing mode, add id attributes with unique keywords to your headings. Remember to use unique ids that are not repeated elsewhere on the page. In the example code below, id="intro", id="research", id="findings", and id="conclusions" are the attributes added to heading tags.
When your headings are in place and have unique ids, you can then link to them from elsewhere on the page. Type your link text and highlight it, click the link button, but instead of searching for page/post or typing in a URL, enter the hashtag symbol # followed by the id of the section you want to link to. Important: begin every anchor link with the hashtag symbol — that is how web browsers know it’s an anchor link.
<!-- Anchor Links --> <ul> <li><a href="#intro">Introduction</a></li> <li><a href="#research">Research</a></li> <li><a href="#findings">Findings</a></li> <li><a href="#conclusions">Conclusions</a></li> </ul> <!-- Anchor destinations --> <h2 id="intro">Introduction</h2> This is the content for the Introduction section of the page. <h2 id="research">Research</h2> This is the content for the Research section of the page. <h2 id="findings">Findings</h2> This is the content for the Findings section of the page. <h2 id="conclusions">Conclusions</h2> This is the content for the Conclusions section of the page.
