HtmlConceptBeginner · 3 min read

What is href Attribute in HTML: Simple Explanation and Usage

The href attribute in HTML specifies the destination URL of a link. It is used inside an <a> (anchor) tag to tell the browser where to go when the link is clicked.

⚙️

How It Works

Think of the href attribute as the address on an envelope. When you click a link on a webpage, the browser looks at the href to know where to deliver you next. Without it, the link would have no destination and clicking it would do nothing.

In simple terms, the href attribute holds the web address (URL) that the link points to. This can be a page on the same website, a different website, an email address, or even a file to download.

💻

Example

This example shows a link that takes you to the OpenAI website when clicked.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Href Example</title>
</head>
<body>
  <a href="https://www.openai.com">Visit OpenAI</a>
</body>
</html>

Output

A clickable link with the text 'Visit OpenAI' that opens https://www.openai.com in the browser when clicked.

🎯

When to Use

Use the href attribute whenever you want to create a clickable link that takes users to another page or resource. This is essential for navigation menus, buttons linking to external sites, email links, or downloadable files.

For example, on a blog, you might use href to link to related articles or your social media profiles. On a contact page, you can use it to create a link that opens the user's email program.

✅

Key Points

The href attribute defines the link's destination URL.
It is used inside the <a> tag to create clickable links.
Without href, the anchor tag won’t navigate anywhere.
It can link to web pages, email addresses, files, or sections within the same page.

✅

Key Takeaways

The href attribute sets the destination URL for a link in an anchor tag.

Without href, clicking the link does nothing.

Use href to link to webpages, emails, files, or page sections.

It is essential for website navigation and connecting resources.