In-Page Links
The last use of links is linking to a part of the current page. For that, we need the id attribute again. Let's give the Breeds section an id:
<div id="breeds">
...
</div>A link to this section then looks like this:
<a href="#breeds">Breeds</a>The # at the beginning of the href value says that we are linking to an element on the current page, and breeds is the id of that element. Clicking the link scrolls the page to it.
There is one special case:
<a href="#">Back to top</a>When the value of href is just #, clicking the link scrolls the page all the way to the top.
Links like these are often used for a table of contents: a list of links near the top of a long page, one for each section. Wikipedia has one in every longer article. Let's create one for our page.
Instructions
Give the three div elements an id attribute: description to the first one, physiology to the second one and breeds to the third one.
Below the link with the cat image, create a table of contents: an unordered list (ul) with three items, each with a link to one section. The links have the contents Description, Physiology and Breeds and lead to #description, #physiology and #breeds. The first item looks like this: <li><a href="#description">Description</a></li>. Then try the links in the preview.
Start programming for free
9/12