Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML href Attribute
The href attribute in HTML is used to specify the URL or path to a linked resource. It is most commonly used with anchor tags (<a>) to create hyperlinks, and with <link> elements to reference external stylesheets, favicons, and other resources.
Syntax
Following is the syntax for the href attribute −
<a href="url">Link text</a> <link href="url" rel="stylesheet">
Here, url can be an absolute URL, relative path, or fragment identifier pointing to the target resource or location.
Using href with Anchor Tags
The most common use of the href attribute is with anchor tags to create clickable hyperlinks that navigate users to different pages, sections, or external websites.
Example − Basic Hyperlinks
<!DOCTYPE html> <html> <head> <title>Basic Hyperlinks</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Navigation Links</h2> <p><a href="https://www.tutorialspoint.com">Visit TutorialsPoint</a></p> <p><a href="about.html">About Page</a></p> <p><a href="mailto:info@example.com">Send Email</a></p> <p><a href="tel:+1234567890">Call Us</a></p> </body> </html>
The output displays clickable links for external sites, relative pages, email, and telephone numbers −
Navigation Links Visit TutorialsPoint (blue underlined link) About Page (blue underlined link) Send Email (blue underlined link) Call Us (blue underlined link)
Using href with Link Element
The <link> element uses the href attribute to reference external resources like CSS stylesheets, favicons, and web fonts. These links are placed in the document head and do not create visible content.
Example − External Stylesheet
Following example demonstrates linking an external CSS file −
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<style>
/* Inline styles simulating external.css */
h1 { color: blue; text-align: center; }
p { background-color: lightblue; padding: 10px; }
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h1>Demo Heading</h1>
<p>This text is styled using external CSS.</p>
</body>
</html>
The output shows the styled heading and paragraph −
Demo Heading (blue, centered) This text is styled using external CSS. (light blue background, padding)
Fragment Identifiers with href
The href attribute can reference specific sections within the same page using fragment identifiers (anchors) that begin with a hash symbol (#).
Example − Page Navigation
<!DOCTYPE html> <html> <head> <title>Fragment Navigation</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Table of Contents</h2> <p><a href="#section1">Go to Section 1</a></p> <p><a href="#section2">Go to Section 2</a></p> <p><a href="#top">Back to Top</a></p> <div style="height: 300px;"></div> <h3 id="section1">Section 1</h3> <p>This is the content of section 1.</p> <div style="height: 300px;"></div> <h3 id="section2">Section 2</h3> <p>This is the content of section 2.</p> <p><a href="#top">Back to Top</a></p> </body> </html>
Clicking the fragment links smoothly scrolls to the corresponding sections on the page.
Types of href Values
The href attribute accepts several types of values for different purposes −
| Type | Example | Description |
|---|---|---|
| Absolute URL | https://www.example.com |
Complete web address including protocol |
| Relative URL | ../page.html |
Path relative to current document location |
| Fragment | #section1 |
Link to specific section within same page |
mailto:user@domain.com |
Opens default email client | |
| Telephone | tel:+1234567890 |
Initiates phone call on mobile devices |
| File Download | document.pdf |
Links to downloadable files |
Link Element Types
The <link> element commonly uses href with different rel attribute values −
Example − Multiple Link Types
<!DOCTYPE html>
<html>
<head>
<title>Multiple Link Types</title>
<!-- External CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Favicon -->
<link rel="icon" href="favicon.ico">
<!-- Preload resource -->
<link rel="preload" href="font.woff2" as="font">
<!-- Alternative stylesheet -->
<link rel="alternate stylesheet" href="dark-theme.css" title="Dark Theme">
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.info { background: #f0f8ff; padding: 15px; border-radius: 5px; }
</style>
</head>
<body>
<div class="info">
<h2>Link Elements in Head</h2>
<p>This page demonstrates various link types using href attribute.</p>
<ul>
<li>Stylesheet: styles.css</li>
<li>Favicon: favicon.ico</li>
<li>Preload: font.woff2</li>
<li>Alternate: dark-theme.css</li>
</ul>
</div>
</body>
</html>
The output shows how different link elements with href work together −
Link Elements in Head This page demonstrates various link types using href attribute. ? Stylesheet: styles.css ? Favicon: favicon.ico ? Preload: font.woff2 ? Alternate: dark-theme.css (Light blue background box with rounded corners)
JavaScript with href
The href attribute can also execute JavaScript code using the javascript: protocol, though this practice is generally discouraged in favor of event handlers.
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript href Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>JavaScript Links</h2>
<p><a href="javascript:alert('Hello from href!')">Show Alert</a></p>
<p><a href="javascript:void(0)" onclick="showMessage()">Better Approach</a></p>
<script>
function showMessage() {
alert("This is the recommended way!");
}
</script>
</body>
</html>
Both links execute JavaScript, but using onclick handlers is the preferred modern approach.
Conclusion
The href attribute is essential for creating hyperlinks with <a> tags and referencing external resources with <link> elements. It supports absolute URLs, relative paths, fragment identifiers, and special protocols like mailto and tel. Understanding href is fundamental for web navigation and resource linking in HTML.
339 Views
