HTML Links Tutorial

HTML links, also called hyperlinks, are important for navigate around the web. They let you connect web pages, files, and things on the internet. This way, people can click and go to different stuff easily.

Creating Basic Links

The most common type of link is a text link, which is created using the <a> (anchor) element

<a href="https://www.example.com">Visit Example.com</a>

<a>: The anchor element.
href: The "Hypertext Reference" attribute, which specifies the URL or file path to link to.

Visit Example.com

Linking to Internal Pages

To link to pages within your website, use a relative path

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

Relative File Paths

Relative file paths in HTML are used to specify the location of a file in relation to the current document.

Use ./ to indicate the current directory.

Use ../ to refer to the parent directory.

Use ../../ to refer to the parent of the parent directory.

Use ../ to move up one level and then specify the sibling directory.

Use / to specify the root directory.

You can omit / ./ for files in the same directory.


  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Relative File Paths Example</title>
  </head>
  <body>
  
      <!-- Current Directory (./) -->
      <a href="./current.html">Link to Current</a>
      <img src="./current-image.jpg" alt="Current Image">
  
      <!-- Parent Directory (../) -->
      <a href="../parent.html">Link to Parent</a>
      <img src="../parent-image.jpg" alt="Parent Image">
  
      <!-- Nested Subdirectories (../../) -->
      <a href="../../grandparent.html">Link to Grandparent</a>
      <img src="../../grandparent-image.jpg" alt="Grandparent Image">
  
      <!-- Sibling Directory (../sibling/) -->
      <a href="../sibling/sibling.html">Link to Sibling</a>
      <img src="../sibling/sibling-image.jpg" alt="Sibling Image">
  
      <!-- Root Directory (/) -->
      <a href="/root.html">Link to Root</a>
      <img src="/root-image.jpg" alt="Root Image">
  
      <!-- Same Directory (./ is optional) -->
      <a href="same-directory.html">Link to Same Directory</a>
      <img src="same-directory-image.jpg" alt="Same Directory Image">
  
  </body>
  </html>

Email Links

You can create links that open the user's default email client with a pre-filled email address

<a href="mailto:info@example.com">Contact Us</a>

Linking to Phone Numbers

You can create links that prompt users to call a phone number (for mobile devices)

<a href="tel:+1234567890">Call Us</a>

File Links

You can link to downloadable files, such as PDFs or documents

<a href="document.pdf" download>Download PDF</a>

Linking to Anchors (Internal Links)

You can create links that navigate to specific sections within a single web page by using anchor tags

<a href="#section2">Jump to Section 2</a>
    <!-- ... -->
    <h2 id="section2">Section 2</h2>

Opening Links in a New Window

You can make links open in a new browser window or tab using the target attribute.

<a href="https://www.example.com" target="_blank">Open in New Tab</a>

Open in New Tab

Image Links

You can use images as links. Wrap an <img> tag in an anchor tag

<a href="https://my.clevelandclinic.org/health/articles/17906-meditation" target="_blank">
  <img src="https://images.pexels.com/photos/1051838/pexels-photo-1051838.jpeg?auto=compress&cs=tinysrgb&w=400" alt="What is meditation">
</a>

Previous Next