Make your <a>nchors clever
Written 1 year 3 weeks ago by SharmWeb. Last edit 34 weeks 3 days ago.
Jump to section:
One
Two
Three
.
Section one
This is the classic:
<a name="section-1">Section one</a>
Section two
Preferred would be:
<a id="section-1">Section two</a>
This anchor we mistakenly also called section-1. The link for Section one goes here, instead of the above, demonstrating the id attribute has priority over the name.
Section three
Here we used:
<a href="/drupal-developers-bluehost/make-your-anchors-clever#section-3" id="section-3">Section three</a>
Clever because as you hover over the anchor it reacts as a link that can be copied with the right-click. More inviting for others to link to sections of your pages than having to find the tag name in the source code.
Published in
- Printer-friendly version
- 146 reads
Jump to section:One
Two
Three
.
.
.
Section one
This is the classic:
<a name="section-1">Section one</a>
Section two
Preferred would be:
<a id="section-1">Section two</a>
This anchor we mistakenly also called section-1. The link for Section one goes here, instead of the above, demonstrating the id attribute has priority over the name.
Section three
Here we used:
<a href="/drupal-developers-bluehost/make-your-anchors-clever#section-3" id="section-3">Section three</a>
Clever because as you hover over the anchor it reacts as a link that can be copied with the right-click. More inviting for others to link to sections of your pages than having to find the tag name in the source code.
Useful for lists of answers or issue cues. The second website uses the method as described here.
Another use would be if you want child menu items to link to different sections of the same page. This enhances the visitor's user experience by already showing what items they can expect even when they click on the parent item. More inviting for example for a menu item leading to a page of sponsors as shown on this website.
Another use would be if you want child menu items to link to different sections of the same page. This enhances the visitor's user experience by already showing what items they can expect even when they click on the parent item. More inviting for example for a menu item leading to a page of sponsors as shown on this website.