HTML Links

Create navigation with anchor elements.

Links are one of the most important features of the web. They allow users to move from one page to another, open documents, visit external websites, or navigate to different sections of the same page.

Without links, websites would be isolated pages with no easy way to connect information. Links are what make the World Wide Web a connected network of content.

What Are HTML Links?

An HTML link is a clickable element that takes the user to another location when clicked. Links are created using the anchor element.

HTML
<a href="https://www.devbrainbox.com/">Visit Website</a>

In this example:

  • The anchor tag creates the link.
  • The href attribute specifies the destination.
  • "Visit Website" is the clickable text.

When a user clicks the link, the browser opens the specified webpage.

Why Are Links Important?

Links help users:

  • Navigate between pages.
  • Visit other websites.
  • Download files.
  • Contact people using email links.
  • Jump to specific sections on a page.

Think of links as roads connecting different locations. Without roads, it would be difficult to travel between places. Similarly, without links, it would be difficult to move around the web.

Creating a Basic Link

A simple link looks like this:

HTML
<a href="https://www.devbrainbox.com/">Visit Website</a>

The browser displays "Visit Website" as clickable text.

Linking to Another Page

You can also link to pages within your own website.

HTML
<a href="html.html">HTML Tutorial</a>

When clicked, the browser opens the html.html page.

This is called an internal link.

Linking to External Websites

Links can point to websites outside your own website.

HTML
<a href="https://www.devbrainbox.com/">
    Visit Website
</a>

This is called an external link.

Opening Links in a New Tab

Sometimes you may want a link to open in a new browser tab.

HTML
<a href="https://www.devbrainbox.com/" target="_blank">
    Visit Website
</a>

The target attribute tells the browser to open the destination in a new tab.

Email Links

You can create links that open the user's email application.

HTML
<a href="mailto:hello@example.com">
    Send Email
</a>

Clicking the link opens a new email message addressed to the specified email address.

Linking to a Section on the Same Page

Links can also jump to specific sections within a webpage.

HTML
<a href="#contact">Go to Contact Section</a>

<h2 id="contact">Contact Us</h2>

When the user clicks the link, the page scrolls directly to the Contact section.

Best Practices

When creating links:

  • Use descriptive link text.
  • Avoid generic text like "Click Here."
  • Ensure links point to the correct destination.
  • Use target carefully.
  • Test all links regularly.

Good example:

HTML
<a href="https://www.devbrainbox.com/">View Courses</a>

Less helpful example:

HTML
<a href="https://www.devbrainbox.com/">Click Here</a>

Key Takeaways

  • Links is an important topic to understand.
  • Start with small examples and practice one step at a time.
  • Use the idea in simple projects so it becomes easier to remember.