Skip to content

Links & Navigation

Links are in nearly every website. Links can be used to navigate to another website, another page on your server or inside some part of your current website. Links are usually visible as a text or a button.

By default, when you hover over a link it will show you a hand symbol. Links are by default also differently coloured than other text on your website. This default behavior can be customized with CSS.

Read more about links.

HTML
<a href="URL">Name for your link</a>

The most important attribute is href which specifies destination for your link. All addresses pointing outside your domain should start with http:// or https://. Content inside your element (Name for your link in this case) specifies text / other element that user can click to navigate to given address.

Absolute & Relative URLs

Just like in Unix, we can also have absolute and relative URLs. In your href attribute, absolute URL refers to a full web address that usually start with http:// or https://. Relative URL points to address on your current website, like index.html or wiki.html.

Target Attribute

Another commonly used attribute with links is target. By default your links open in the same window, but you can change this to _blank for your links to open in a new tab. Commonly links pointing outside your current website should be opened using the _blank attribute for usability.

Example:

HTML
<a href="URL" target="_blank">Open google.com in new tab</a>

Links can also redirect into some part of your current page. These are called anchor links. In order to achieve this, we need to assign the id attribute to some element(s) in our website and then we can reference that id using the hashtag (#) symbol.

Example element with id attribute:

HTML
<h2 id="section2">Section 2 - Plane Types</h2>

Example of anchor link usage:

HTML
<a href="#section2" >Name for your link</a>

Example of anchor link usage in another webpage than current:

HTML
<a href="about.html#aboutme" >About me</a>

Let's Code

  1. Create second file about.html.
  2. Write the basic HTML template for this new page.
  3. Add heading About Me on that new page
  4. Add paragraph This page contains information about me on that new page.
  5. Create navigation between the pages you currently have. Your main site should have these links on top of your page: Home, About, Wiki.

Challenge 1

Add navigation section to top of your about and wiki pages. They should have a link called Back to Home which redirects user back to index.html page.

Challenge 2

Let's practice adding anchor links in your wiki.html page by creating a table of contents on top of your page.

  1. Create heading Table of Contents on top of your wiki.html page.
  2. Add id attributes for your main headings.
  3. Add table of content using links inside paragraphs. Use anchor links to point to specific headings.