HTML Links

Table of Content


An HTML link is like a virtual bridge that connects one part of a web page to another part, or even to another website altogether. It's like a tiny sign that says, "Click here to go somewhere else."

Links are super important for websites because they:

  • Help users navigate: They make it easy for users to find the information they're looking for by clicking on different links.
  • Improve website structure: Links create a logical flow of information by connecting related content together.
  • Increase accessibility: They allow users with disabilities or slow internet connections to navigate websites more easily.
  • Boost SEO (Search Engine Optimization): Search engines consider the number and quality of links on a website when ranking it in search results.
  • Promote other websites: You can create links to other websites to give them credit or share valuable content with your visitors.

Creating a link is like giving a special instruction to the web browser. Here's the basic syntax:

<a href="destination-url">Link Text</a>
  • destination-url: This is the web address of the page or website you want to link to.
  • Link Text: This is the text that users will click on to follow the link.

For example:

This will create a link with the text "Visit Google" that, when clicked, will take users to the Google website.

<a href="">Visit Google</a>

HTML Anchor Tag (a)

Basic Structure of an Anchor Tag:

An anchor tag, also known as a link, is used to create a hyperlink in an HTML document. It has the following basic structure:

<a href="URL">Text</a>
  • is the opening tag.
  • URL is the address of the web page or file that you want to link to.
  • Text is the text that appears as the link.
  • is the closing tag.

Adding Attributes to a Tag:

You can add additional attributes to an anchor tag to modify its appearance or behavior. Here are some common attributes:

  • id: Gives the link a unique identifier.
  • class: Assigns a CSS class to the link for styling purposes.
  • style: Specifies inline CSS styles for the link.
  • title: Provides a tooltip that appears when you hover over the link.
  • target: Defines where the linked page should open (e.g., in a new tab or window).


<a href="" id="my-link" class="btn btn-primary" title="Visit Example Website">Click Here</a>

In this example, we have added the following attributes:

  • id="my-link": Gives the link a unique identifier for reference in CSS or JavaScript.
  • class="btn btn-primary": Adds a CSS class to style the link as a primary button.
  • title="Visit Example Website": Provides a tooltip that appears when you hover over the link.

A hyperlink is a clickable link that takes you to another webpage or document.

There are two main types of hyperlinks:

  • Absolute Paths: These hyperlinks include the full address (URL) of the destination page. For example:
  • Relative Paths: These hyperlinks specify the destination page relative to the current page. For example: page1.html

When you click on a hyperlink, your web browser sends a request to the server specified in the hyperlink. The server then sends the requested page or document back to your browser, which displays it on your screen.

Advantages and Disadvantages of Absolute and Relative Paths

Absolute Paths

  • Advantages:
    • Easy to use and understand
    • More reliable because they always point to the same page
  • Disadvantages:
    • Can be long and complex
    • Difficult to change if the page location changes

Relative Paths

  • Advantages:
    • Shorter and easier to read
    • Can be easily changed if the page location changes
  • Disadvantages:
    • Can be confusing if the current page is not known
    • May not work if the page location changes or the server is moved

In general, it is best to use absolute paths for external links (links to pages on other websites). This ensures that the links will always work, regardless of the location of the current page.

For internal links (links to pages on the same website), you can use either absolute or relative paths. Relative paths are generally preferred because they are shorter and easier to read.


Here is an example of how to create an absolute and a relative hyperlink:

<a href="">Page 1</a>
<a href="page1.html">Page 1</a>

These are like doorways that lead you to websites outside of the one you're currently on. They're usually underlined and blue, and you'll see a little globe icon next to them. When you click on an external link, you'll be taken to a new website.

These are like arrows that point you to other pages within the same website. They help you explore the different parts of the website without having to type in a new address.

These links look like email addresses (like When you click on one, your email program should open up and create a new email addressed to the person you clicked on.

These links let you download files like documents, images, or videos from the website to your computer. They usually have a downward arrow icon next to them. When you click on a downloadable file link, your browser will prompt you to save the file.

What are CSS Classes?

Think of CSS classes like special tags that you can add to HTML elements to give them unique styles.

Active, Hover, and Visited States

  • Active: The style when a link is clicked.
  • Hover: The style when your mouse pointer hovers over a link.
  • Visited: The style of a link you've already clicked on.
a {
  color: blue;
  text-decoration: none;

a:active {
  color: red;

a:hover {
  font-weight: bold;

a:visited {
  color: purple;

This code defines four CSS classes:

  • a: Styles all links with blue text and no underline.
  • a:active: Makes the clicked link red.
  • a:hover: Bolds the link when you hover over it.
  • a:visited:Style all the visited link with violet text.

Using CSS Classes in HTML

  • Open your HTML file.
  • Add the following code in the <head> section:
<link rel="stylesheet" href="link-styles.css">
  • This line links the HTML file to the "link-styles.css" file.
  • Now, you can apply the CSS classes to your links:
<a href="example.html">My Link</a>

This will give the link the default blue text style. To change the style for different states, add the appropriate class:

<a href="example.html" class="active">My Link</a>

This will make the link red when clicked.


  • CSS classes are case-sensitive, so "active" is different from "Active".
  • You can use multiple CSS classes on the same element.
  • CSS classes can help you create custom and consistent styles for your website.

Meaningful Anchor Text Using Semantic HTML Elements:

  • Use headings (<h1>, <h2>, etc.) to label important sections of your text.
  • Choose anchor text that accurately reflects the content it links to.
  • For example, instead of "Click here," use "Visit the homepage."
  • Check all links regularly to make sure they're working.
  • If a link is broken, remove it or fix it as soon as possible.
  • Broken links can confuse visitors and search engines.

Maintaining Accessibility for Screen Readers:

  • Use descriptive alt text for images to help screen readers understand what the images show.
  • For example, instead of "Image of a cat," use "A black and white cat sitting on a blanket."
  • Provide meaningful headings and aria attributes to help screen readers navigate your content.

Increasing Readability:

  • Use short sentences and paragraphs.
  • Include visuals and examples to make your content more engaging.
  • Break down complex concepts into smaller, more manageable steps.
  • Use a font and font size that's easy to read, and provide good contrast between text and background.

Common Mistakes to Avoid

Hardcoding Absolute URLs Using Outdated Anchor Tag Attributes

Imagine you're creating a website and want to link to another website. You could do this with a link like:

<a href="">Example Website</a>

This is called "hardcoding" the URL because the address of the website is written directly into the HTML code. This is not a good practice because:

  • If the website address changes, you would need to edit every single link on your website.
  • It makes it harder to manage your website, especially if you have a lot of links.

Link text is the visible text that users click on to follow a link. It should accurately describe the destination of the link. For example, the link text "Example Website" in the example above is a good choice.

However, it's important not to overuse link text. For example, if you have a sentence like:

Click here to go to the Example Website.

The link text "Click here" is not very descriptive. It doesn't tell the user what they're going to find on the other side of the link. Instead, you should use more specific link text, like:

Visit our website for more information.

This link text is more helpful to users because it tells them what they can expect to find on the other side of the link.

Improving Readability

To make your website more readable, you should:

  • Avoid hardcoding URLs. Instead, use relative URLs or a content management system (CMS) that allows you to manage your links easily.
  • Use descriptive link text that accurately describes the destination of the link.

By following these tips, you can create a website that is easy to read and navigate for all users.

Advanced Concepts

Imagine you're at the park and want to tell your friend to meet you at the "Big Slide." You don't need to give them the exact address, just say "Big Slide" because they know where to find it. That's like a relative link on a website. It assumes your visitors know where to find the linked page, relative to the current page they're on.

Think of it like a home base for your links. The website has a "base" page, and any links on that page automatically assume they start from that base. So, if you have a link to "contact-us.html," it will always take you to "," even if you're currently on another page on the website.

Fragment Identifiers:

These are special links that don't lead to a new page but instead jump to a specific part of the current page. It's like having anchors at different points on a website. You can use a fragment identifier to link to a specific heading, image, or form. They're often used with the "# symbol":

<a href="#heading-1">Go to Heading 1</a>

When you add rel="nofollow" to a link, it tells search engines not to follow it. This means they won't pass on any of your website's authority (importance) to the linked page. It's often used for links to external websites or sponsored content to prevent search engines from considering them as endorsements.