HTML links, also called hyperlinks, are used to connect one webpage, document, file, or section of a webpage with another resource. Links are an essential part of almost every website because they allow visitors to move between pages and access related information.
In HTML, hyperlinks are created using the <a> (anchor) element. The href attribute normally specifies the destination of the link, while other attributes such as target, download, and rel can control how the link behaves.
For students learning web development through CS Engineering Gyan, understanding HTML links is an important step because links are used extensively in website navigation, documentation, blogs, educational websites, and web applications.
An HTML link is a clickable element that connects the current webpage to another destination. The destination may be another page on the same website, a different website, a particular section of the current page, an email address, a phone number, or a downloadable resource.
The visible part of a text link is normally called the link text. When the user activates the link, the browser follows the destination specified by the link.
<a href="https://example.com"> Visit Example </a>
In this example, Visit Example is the clickable link text and the href attribute contains the destination address.
The <a> element is known as the anchor element. It is used to create hyperlinks in HTML.
The anchor element generally contains an opening tag, link content, and a closing tag. The href attribute is commonly used to specify the destination.
<a href="URL"> Link Text </a>
<a href="https://csegyan.com"> Visit CS Engineering Gyan </a>
Here, the user can click the text Visit CS Engineering Gyan to navigate to the specified website.
The href attribute specifies the destination of a hyperlink. It is one of the most important attributes used with the anchor element.
<a href="about-us.php"> About Us </a>
If about-us.php is a page available at the specified location, clicking the link requests that page from the browser.
| href Value | Purpose |
|---|---|
| https://example.com | Links to an external website. |
| about.php | Links to a page relative to the current location. |
| #contact | Links to an element with the matching id. |
| mailto:info@example.com | Creates an email link. |
| tel:+911234567890 | Creates a telephone link. |
HTML links are commonly classified according to whether they point to a resource within the same website or to another website.
An internal link connects one page or resource of a website with another resource on the same website.
<a href="html-images.php"> Learn HTML Images </a>
Internal links are useful for website navigation and for connecting related educational articles.
An external link points to a resource on another website or domain.
<a href="https://www.example.com"> Visit Example </a>
External links can be useful when referring readers to relevant resources, documentation, or other websites.
The destination of an HTML link can be written using an absolute URL or a relative URL.
An absolute URL provides the complete web address, including the protocol and domain.
<a href="https://www.example.com/tutorial.html"> Tutorial </a>
A relative URL describes the location of a resource relative to the current webpage.
<a href="tutorial.html"> Tutorial </a>
Relative URLs are commonly used when linking pages within the same website.
The target attribute specifies the browsing context in which the linked resource should be opened.
| Value | Description |
|---|---|
| _self | Opens the link in the current browsing context. This is the default. |
| _blank | Opens the link in a new browsing context, commonly a new tab. |
| _parent | Opens the link in the parent browsing context when applicable. |
| _top | Opens the link in the top-level browsing context when applicable. |
<a href="https://example.com" target="_blank"> Visit Example </a>
When using target="_blank" for an external link, developers can also use an appropriate rel value such as noopener.
The rel attribute describes the relationship between the current page and the linked resource. It can provide important information to browsers and search engines.
<a href="https://example.com" target="_blank" rel="noopener"> Visit Example </a>
The noopener relationship prevents the newly opened page from using the opener reference to access the original browsing context.
Other relationship values are used for different purposes. For example, nofollow can be used when the site owner does not want the link to pass certain search-engine signals, depending on the situation.
A bookmark link, also called a fragment link, allows users to move directly to a particular element or section of a webpage.
<h2 id="html-links"> HTML Links </h2>
<a href="#html-links"> Go to HTML Links </a>
When the link is activated, the browser navigates to the element whose id matches the fragment identifier.
A fragment identifier can also be combined with a page URL to link directly to a specific section of another webpage.
<a href="html-images.php#image-types"> Learn HTML Image Types </a>
In this example, the browser first opens html-images.php and then attempts to move to the element having the image-types id.
An image can be made clickable by placing the <img> element inside an anchor element.
<a href="https://csegyan.com"> <img src="logo.png" alt="CS Engineering Gyan"> </a>
In this example, clicking the image activates the hyperlink. The alt attribute provides alternative text for the image and is important for accessibility.
The mailto: URL scheme can be used to create a link that allows users to start an email message using an available email application.
<a href="mailto:info@example.com"> Send Email </a>
<a href="mailto:info@example.com?subject=HTML%20Query"> Send HTML Query </a>
The actual behavior depends on the user's device and available email software.
The tel: URL scheme can be used to create links for telephone numbers.
<a href="tel:+911234567890"> Call Us </a>
On compatible devices, activating the link can open the phone application or another application capable of handling telephone links.
The download attribute can indicate that a linked resource is intended to be downloaded rather than navigated to.
<a href="html-notes.pdf" download> Download HTML Notes </a>
The final behavior can depend on browser rules, server configuration, and the location of the resource. Therefore, the download attribute should not be treated as a guarantee that every browser will always download every resource.
HTML links are not limited to webpages. An anchor element can point to many types of resources that the browser or server can provide.
<a href="notes/html-notes.pdf"> HTML Notes PDF </a>
<a href="images/html-diagram.jpg"> View HTML Diagram </a>
The server configuration and browser determine whether a resource is displayed, downloaded, or handled by another application.
A website navigation system can be created by grouping related links inside a <nav> element.
<nav> <a href="index.php"> Home </a> <a href="tutorials.php"> Tutorials </a> <a href="notes.php"> Notes </a> <a href="contact.php"> Contact </a> </nav>
The <nav> element provides semantic information that the contained links represent a navigation section.
The following example demonstrates several common link techniques in a single HTML document.
<!DOCTYPE html> <html lang="en"> <head> <title> HTML Links Example </title> </head> <body> <h1> HTML Links Tutorial </h1> <p> Learn HTML links with practical examples. </p> <a href="html-images.php"> Learn HTML Images </a> <br> <br> <a href="https://example.com" target="_blank" rel="noopener"> Visit External Website </a> <br> <br> <a href="#contact"> Go to Contact Section </a> <h2 id="contact"> Contact Section </h2> <p> This is the contact section of the webpage. </p> </body> </html>
Accessible links should provide enough information for users to understand their purpose and destination. This is especially important for people who use screen readers or keyboard navigation.
<a href="html-tables.php"> Learn HTML Tables </a>
A descriptive link such as Learn HTML Tables gives users more information than a generic phrase such as Click Here.
Links help search engines discover and understand relationships between pages. A logical internal linking structure can make it easier for both users and search engines to navigate a website.
For an educational website such as CS Engineering Gyan, internal links can connect related HTML, CSS, JavaScript, programming, database, and computer science tutorials so that students can move naturally from one topic to another.
A broken link is a hyperlink whose destination is unavailable or incorrect. It may occur when a page has been deleted, renamed, moved, or the URL has been entered incorrectly.
<a href="html-old-page.php"> Old HTML Tutorial </a>
If the specified resource does not exist, the user may receive an error or an unsuccessful navigation result.
Anchor text is the visible text contained within a hyperlink. It should normally give users a clear idea about the destination.
<a href="html-tags.php"> Click Here </a>
<a href="html-tags.php"> Learn HTML Tags </a>
The second example provides more context about the linked page and is easier to understand when users encounter the link outside its surrounding paragraph.
Beginners can avoid many link-related problems by checking the destination, syntax, and purpose of each hyperlink.
<a href=about.html> About </a>
Although some HTML parsers may recover from missing quotation marks, attribute values should be written using valid HTML syntax.
<a href="about.html"> About </a>
Avoid using generic text when a more descriptive phrase can explain the destination.
Always verify that the destination URL points to the intended resource.
Links should be added when they provide useful navigation or additional information. Excessive linking can make a page harder to read.
Links that open resources in new browsing contexts should be created carefully, especially when the destination is an external website.
<a href="https://example.com" target="_blank" rel="noopener"> Visit Example </a>
The noopener relationship helps prevent the newly opened page from accessing the opener browsing context through the related opener mechanism.
The paragraph element and anchor element serve different purposes.
| Feature | <p> Paragraph | <a> Anchor |
|---|---|---|
| Purpose | Represents a paragraph of text. | Creates a hyperlink. |
| Navigation | Does not create navigation by itself. | Can navigate to another resource. |
| Common Attribute | id, class, style, etc. | href, target, rel, download, etc. |
| Example | <p>HTML is easy to learn.</p> | <a href="html.php">HTML</a> |
Good hyperlink design improves navigation, accessibility, maintainability, and the overall usability of a website.
| Attribute | Purpose | Example |
|---|---|---|
| href | Specifies the link destination. | href="about.php" |
| target | Specifies the browsing context for the linked resource. | target="_blank" |
| rel | Describes the relationship with the linked resource. | rel="noopener" |
| download | Indicates that the linked resource is intended as a download. | download |
| title | Provides advisory information about the link. | title="HTML Tutorial" |
HTML links are used in many parts of real websites. Some common applications include:
A link in HTML is a clickable element that allows users to navigate to another webpage, website, file, or specific section of a webpage. Links are created using the <a> anchor element.
The <a> anchor element is used to create hyperlinks in HTML.
<a href="about.php"> About Us </a>
The href attribute specifies the destination of a hyperlink. It can contain an absolute URL, relative URL, fragment identifier, email address, telephone number, or another supported URL.
An internal link connects pages or resources within the same website, while an external link points to a resource on another website or domain.
An absolute URL contains the complete web address, such as https://example.com/about.html. A relative URL specifies a resource relative to the current webpage, such as about.html.
The target="_blank" value tells the browser to open the linked resource in a new browsing context, commonly a new browser tab.
No. It is not required for every external link. Whether an external resource should open in a new tab depends on the purpose and user experience of the website.
The rel="noopener" relationship prevents the newly opened page from accessing the opener browsing context through the related opener mechanism. It is commonly used when opening links with target="_blank".
First, assign an id to the destination element. Then use the same id with a # in the href attribute.
<h2 id="html-links"> HTML Links </h2> <a href="#html-links"> Go to HTML Links </a>
Use the mailto: URL scheme inside the href attribute.
<a href="mailto:info@example.com"> Send Email </a>
The tel: URL scheme can be used to create a telephone link.
<a href="tel:+911234567890"> Call Us </a>
Place the <img> element inside the <a> element.
<a href="index.php"> <img src="logo.png" alt="CS Engineering Gyan"> </a>
The download attribute can be used when a linked resource is intended to be downloaded.
<a href="html-notes.pdf" download> Download HTML Notes </a>
Anchor text is the visible text displayed inside a hyperlink. Descriptive anchor text helps users understand the destination of a link.
<a href="html-images.php"> Learn HTML Images </a>
"Click Here" does not clearly describe the destination of the link. More descriptive text, such as Learn HTML Images or Read HTML Forms Tutorial, provides better context for users and assistive technologies.
Yes. An anchor element can link directly to a PDF or another resource.
<a href="notes/html-notes.pdf"> Read HTML Notes </a>
A broken link is a hyperlink whose destination is unavailable or incorrect. It can occur when a webpage has been deleted, moved, renamed, or when the URL is incorrect.
Yes. A logical linking structure helps users navigate a website and can help search engines discover and understand relationships between pages. Relevant internal links are particularly useful for organizing related educational content.
Yes. CSS can be used to control the appearance of links, including their color, font size, decoration, and interaction states such as hover and focus.
a {
color: blue;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
The <p> element represents a paragraph of text, while the <a> element creates a hyperlink to another resource or location.
HTML links are a fundamental part of web development. They connect webpages, documents, files, external resources, and sections within a page, making website navigation possible.
The anchor element becomes much more useful when combined with attributes such as href, target, rel, and download. Developers can also use fragment identifiers, email links, telephone links, and image links for different practical requirements.
For beginners, the most important concepts to understand are the anchor element, href attribute, internal and external links, relative and absolute URLs, target behavior, and accessible anchor text. These concepts provide a strong foundation for learning CSS, JavaScript, and complete frontend web development.