Creating links between web pages is the foundation of the world wide web. You can do that with the HTML a tag and the href attribute. The default behaviour of a web browser is to bring you on the top of that linked page. While this works for most cases, sometimes you want to link to a more specific part. There is a simple solution to improve the user experience if you can modify the linked page.
In HTML 4 you could use the name attribute of an a tag that you placed at the location you wanted to directly reach. With HTML 5 this approach got depreciated. Now you can use the id attribute on any HTML tag:
|
1 |
<h2 id="NAME_OF_PART">Your Title</h2> |
Whatever name you give the id attribute will be the suffix of your link to that specific part. Your new direct link uses the URL for your page as before, followed by #NAME_OF_PART (the # is important):
|
1 |
<a href="https://site/page#NAME_OF_PART">direct link</a> |
I did this in my post on routing with Flask for the section HTTP Methods and can now create a link directly to that topic with this snipped:
|
1 |
<a href="https://wp.me/p3O0za-LX#HTTPMethod">specific HTTP methods</a> |
I like this approach to improve the user experience. With the new way of HTML 5 I can reuse the convention from JavaScript or Selenium and give the part I am interested in an id attribute. That is all it takes.