Skip to main content

Links and Navigation

A link also referred to as anchor is an HTML element that essentially allows you to navigate to other sections or you page, other pages in your site or other places on the internet. It uses the a element which requires the href attribute with a value of the place you want to go.

Going to another section on the page

<h2 id="title">My Title</h2>

...

<a href="#title">Go to title</a>

Going to another page in your site

<a href="/profile.html">Profile</a>

Go to a page on another site.

<a href="https://google.ca">Go to Google</a>

Often in websites with multiple pages, developers will create a list of links and display them at the top of the page. After applying some styling (we'll get to that in the next part), you get something like the image below.

Without any styling, your organized links can look something like this.

<ul>
    <li>
        <a href="...">A link</a>
    </li>
    <li>
        <a href="...">Another link</a>
    </li>
</ul>

You can also put them inline like so but might require more styling to make look good.

<span><a href="...">A link</a></span> <span><a href="...">Another link</a></span>