Amanuel's Blog

Hyperlinks in HTML

Amanuel's photo
Amanuel
·

4 min read

In HTML, links and references play a crucial role in navigating between different pages or different sections of the same page. In this article, we will go through the process of creating various types of links and references within your HTML documents.

Linking to an External Website

To create a hyperlink that redirects users to an external website, you can use the <a> (anchor) tag and then specify the href attribute with the URL of the external website you want to link to.

Here's an example:

  1. Replace the body of the index.html file from a previous article with the code below.

  2. Preview it in the browser.

  3. By clicking "Go to Google" you can go to the "google.com".

<body>
    <a href="https://www.google.com" target="_blank">Go to Google</a>
</body>

Creating References within a Page

You can also create references to different sections within the same HTML page. This allows users to navigate to specific parts of the document without reloading the entire page. To achieve this, you need to assign unique id attributes to the desired sections and create anchor links that reference those IDs.

Consider the following example:

  1. Replace the body of the index.html file with the code below.

  2. Preview it in the browser.

  3. By clicking "Go to the bottom" you can go to the "This is the bottom". These two are related using the id "bottom".

<body>
    <div
      style="display: flex; flex-direction: column; width: 10%; margin: auto"
    >
      <a href="#bottom">Go to bottom</a>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos assumenda
        aperiam doloribus provident sint blanditiis. In totam labore ut hic
        iure! Natus error nesciunt sit dolor optio veritatis eum recusandae
        impedit, consequatur eveniet exercitationem expedita odit sapiente,
        nulla et unde placeat voluptate aut! Ipsam id repudiandae amet, aperiam
        nesciunt autem.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam,
        voluptatibus dolor voluptatem ea unde repellat fugiat autem earum
        aperiam inventore nobis explicabo obcaecati minima necessitatibus sunt
        consequatur dolore qui natus alias id modi! Nostrum nam doloremque
        quibusdam alias esse ad dicta tempore consectetur facere vel voluptatum
        beatae officiis provident qui reiciendis, inventore ratione accusamus
        consequuntur perspiciatis aliquid, minima tenetur mollitia sint.
        Placeat, rerum eum! Amet aliquid inventore explicabo, vero earum, a
        nostrum et nihil cumque libero blanditiis iusto molestiae qui deserunt,
        consequatur sed illum veniam? Cum modi animi dolorem voluptate, quia
        deleniti, minus consectetur unde non distinctio quidem iusto eum.
      </p>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam aperiam
        dolore quis, esse ex illum sequi nemo aliquid quod labore aliquam
        corrupti consectetur explicabo recusandae est similique suscipit
        voluptatibus quibusdam.
      </p>
      <h1 id="bottom">This is the bottom!!</h1>
    </div>
  </body>

Linking to Another Local HTML Page

To link to another local HTML page within the same folder, you can use the anchor tag <a> along with the href attribute.

Here's an example:

  1. Create a new HTML file (e.g., about.html) in the same folder index.html is present and add the desired content.

  2. Replace the body of the index.html file with the code below.

  3. Preview it in the browser.

  4. By clicking "About" you can go to the About page.

<body>
    <a href="about.html">About</a>
</body>

A small caveat: If about.html is in a different folder it doesn't work. Instead, you need to specify the location accordingly which brings us to the discussion of relative and absolute URLs.

  1. Relative URLs: Relative URLs are commonly used within a website to reference resources relative to the current page's location.

Here are a few examples of relative URLs:

  • <a href="about.html">About</a>: This link references a file called "about.html" in the current directory.

  • <img src="../images/pic.jpg">: This image source points to a file named "pic.jpg" in the parent directory's "images" folder.

  1. Absolute URLs: Suppose you're working with the index.html file and want to reference the about.html file which is many levels lower than index.html in a folder structure. Instead of using relative URLs ../../../about.html to navigate from the index.html file to the about.html file, you can use an absolute URL like this: <a href="/about.html">About</a>

Note: Absolute URLs set your starting point to the root folder!

Using absolute URLs for local files simplifies the referencing of resources by providing a direct and concise path to the desired file or folder, regardless of the file's location within the file system. It reduces the need for excessive use of ../ notation and improves the readability and maintainability of your code.

Key Terms and Attributes:

  • Link: Refers to the address or location of the target page.

  • Hyperlink: The element that users can click on to navigate to the target page.

  • target="_blank": an attribute that opens the link in a new browser tab. You can remove it if you want to open the page in the same browser tap.

  • id: Used to uniquely identify an element within the document.

  • href (Hypertext Reference): An attribute that holds the value of the link, which can be a URL or a local file path.

By utilizing these techniques, you can create effective navigation within your HTML documents, allowing users to explore different sections or visit external websites with ease.

Previous: Head and Body Next: Multimedia

hyperlinkurlrelative pathabsolute-path