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 –

#:~:text=They are tiny, ball like (click to reach the peas).

The link could be –

<a href="#:~:text=They are tiny, ball like">#:~:text=They are tiny, ball like</a>

The benefits of using #:~:text= are –

• No need to set any prior internal link. Use the text directly which you want to jump to.
• It will highlight the text portion too.