World is changing and so the way of consuming content on internet. We always look for what we need, precisely.
Suppose there is a book of physics and you want to have a quick look into the formula of force then you may need to flip a number of pages.
On internet if an article is too big and we want to learn a small section of it, then it will be hard to find that. In this post we will learn the way to jump to any part of webpage without using anchor name like Google.
Let’s understand this whole thing with an example –
Suppose we write an article about list of vegetables, fruits, and colors.
List of Vegetables
Carrot – Carrots are red in color
Radish – Radish is long and white
Peas – They are tiny, ball like vegetable
Onion – They make you cry
Ginger – A little spicy but good for health
List of fruits
Mango – King of all fruits
Orange – One of the majorly produced fruit in USA
Banana – Even monkeys loves them
Pineapple – Too much work with this fruit
Apple – It keeps the doctor away
List of Colors
Red
Green
Blue
Yellow
Cyan
The html code of this block is –
<div style="border: 2px solid green; padding: 10px; background: lightyellow">
<div>
<a name="list_of_veg"></a><b>List of Vegetables</b>
<ul>
<li>Carrot - Carrots are red in color</li>
<li>Radish - Radish is long and white</li>
<li>Peas - They are tiny, ball like vegetable</li>
<li>Onion - They make you cry</li>
<li>Ginger - A little spicy but good for health</li>
</ul>
</div>
<hr>
<div>
<a name="list_of_fruits"></a><b>List of fruits</b>
<ul>
<li>Mango - King of all fruits</li>
<li>Orange - One of the majorly produced fruit in USA</li>
<li>Banana - Even monkeys loves them</li>
<li>Pineapple - Too much work with this fruit</li>
<li>Apple - It keeps the doctor away</li>
</ul>
</div>
<hr>
<div>
<a name="list_of_colors"></a><b>List of Colors</b>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Yellow</li>
<li>Cyan</li>
</ul>
</div>
</div>
You can see that we have used anchor tag with name property with all three headings as –
...
<a name="list_of_veg"></a><b>List of Vegetables</b>
...
<a name="list_of_fruits"></a><b>List of fruits</b>
...
<a name="list_of_colors"></a><b>List of Colors</b>
...
This <a name="..."> helps in jumping to a section of webpage. So, if you want to access List of fruits directly, then you may use link like this – #list_of_fruits (<a href="#list_of_fruits">#list_of_fruits</a>).
BUT… what if you want to access Peas only? Or, sometimes Peas, sometimes Banana and sometimes something different? How many anchor name will you create?
This problem is faced by Google itself. To make search more effective and useful for people, Google needs to direct them to the exact location of article where the solution of their query is listed. This can’t be achieved with normal internal linking of anchor name.
Internal Linking using #:~:text=
You can use #:~:text= to jump to any section of webpage by matching text. So, in our example, if we want to go to Peas or Banana, then we can use –
#:~:text=They are tiny, ball like
The browser will match the content of page with the provided text and scroll at its position. Also, it will highlight the searched text. See it in action –