HTML links are one of the most important features of web development. Links allow users to move from one webpage to another webpage, open external websites, download files, send emails, and navigate different sections of the same page.
In HTML, links are created using the anchor tag. The anchor tag connects one document or resource with another resource using a clickable text or image.
Almost every website uses hyperlinks because navigation is an essential part of user experience. Without links, users would not be able to move between different pages of a website.
HTML links are clickable elements that allow users to navigate from one location to another. A link can connect webpages, files, images, documents, or different sections within the same webpage.
When a user clicks on a hyperlink, the browser opens the connected resource according to the link instructions.
<a href="https://www.example.com"> Visit Website </a>
In the above example, the text "Visit Website" becomes clickable and opens the specified webpage.
The anchor tag is used to create hyperlinks in HTML. It is represented by the <a> tag.
The anchor tag requires the href attribute, which specifies the destination address of the link.
<a href="URL"> Link Text </a>
<a href="https://csegyan.com"> CSE Gyan Website </a>
The href attribute is the most important attribute of the anchor tag. It defines the destination address where the user will be redirected after clicking the link.
<a href="destination"> Link Name </a>
<a href="about.html"> About Us </a>
In this example, when a user clicks on "About Us", the browser opens the about.html webpage.
The following example creates a simple hyperlink that redirects users to another website.
<!DOCTYPE html> <html> <body> <h1> HTML Links Example </h1> <p> Click below to visit CSE Gyan. </p> <a href="https://csegyan.com"> Visit CSE Gyan </a> </body> </html>
Click below to visit CSE Gyan.
Visit CSE GyanHTML links work by connecting a source element with a destination resource. When users click a link, the browser reads the URL provided in the href attribute and loads the requested page.
This simple process allows websites to create navigation systems and connect thousands of webpages together.
HTML links can be divided into different categories depending on their purpose and destination.
| Link Type | Description |
|---|---|
| External Link | Connects to another website or domain. |
| Internal Link | Connects pages within the same website. |
| Anchor Link | Moves to a specific section of the same webpage. |
| Email Link | Opens email application. |
| Download Link | Allows users to download files. |
External links are used to connect a webpage with another website. These links contain complete URLs including the protocol such as https://.
<a href="https://website.com"> Website Name </a>
<a href="https://www.google.com"> Open Google </a>
External links are commonly used for references, resources, and connecting related websites.
Internal links connect different webpages within the same website. They help users navigate through website pages easily.
<a href="about-us.php"> About Us </a>
If a website contains multiple pages such as Home, About, Contact, and Tutorials, internal links connect these pages together.
HTML links are essential elements of web development that connect different resources and improve website navigation. The anchor tag with the href attribute is used to create hyperlinks.
In this part, we learned about HTML links, anchor tag, href attribute, basic syntax, external links, and internal links.
The target attribute is used with the anchor tag to specify where the linked webpage or resource should open after clicking the link.
By using the target attribute, developers can control whether the link opens in the same browser window or a new browser tab.
<a href="URL" target="value"> Link Text </a>
| Target Value | Description |
|---|---|
| _self | Opens the link in the same browser window. This is the default behavior. |
| _blank | Opens the link in a new browser tab or window. |
| _parent | Opens the link in the parent frame. |
| _top | Opens the link in the full browser window. |
The _blank value opens the linked webpage in a new browser tab. It is commonly used for external websites.
<a href="https://csegyan.com" target="_blank"> Visit CSE Gyan </a>
Using a new tab keeps the original webpage open while allowing users to explore another resource.
The _self target opens the linked page in the current browser window. It is the default behavior of HTML links.
<a href="about-us.php" target="_self"> About Us </a>
An absolute URL contains the complete address of a webpage including the protocol, domain name, and path.
Absolute URLs are mainly used for linking external websites.
<a href="https://www.website.com"> Website </a>
<a href="https://www.youtube.com"> YouTube </a>
The browser directly accesses the complete address provided in the href attribute.
A relative URL specifies the location of a webpage relative to the current webpage. It is mostly used for internal website navigation.
<a href="contact.php"> Contact Us </a>
In this example, the browser searches for the contact.php file inside the same website directory.
HTML allows developers to make images clickable by placing the image tag inside the anchor tag.
When users click on the image, they are redirected to the linked webpage.
<a href="URL"> <img src="image.jpg"> </a>
<a href="https://csegyan.com"> <img src="logo.png" alt="CSE Gyan"> </a>
HTML provides a special type of link that allows users to send emails directly from a webpage.
The mailto keyword is used to create email links.
<a href="mailto:email@example.com"> Send Email </a>
<a href="mailto:support@example.com"> Contact Support </a>
When users click this link, their default email application opens automatically.
HTML can create clickable phone number links using the tel protocol. These links are useful for mobile users.
<a href="tel:+911234567890"> Call Us </a>
<a href="tel:+911234567890"> Call Now </a>
When clicked on a mobile device, it opens the phone dialer.
HTML allows users to download files by using the download attribute with an anchor tag.
<a href="file.pdf" download> Download File </a>
<a href="html-notes.pdf" download> Download HTML Notes </a>
Bookmark links are used to navigate to a specific section of the same webpage.
They are useful for long webpages where users need quick navigation.
<h2 id="html"> HTML Tutorial </h2>
<a href="#html"> Go to HTML Section </a>
When the user clicks the link, the browser automatically scrolls to the section containing the matching id.
CSS is used to change the appearance of HTML links. Developers can modify link color, size, and hover effects.
<style>
a{
color:blue;
font-size:20px;
}
</style>
<a href="#">
HTML Link
</a>
CSS makes hyperlinks more attractive and improves user interaction.
Using links correctly improves website navigation, user experience, accessibility, and search engine understanding. Developers should follow proper methods while creating hyperlinks.
Link text is the visible text that users click to open another webpage. Good link text helps users understand where the link will take them.
<a href="html-tags.php"> Click Here </a>
The text "Click Here" does not provide information about the destination page.
<a href="html-tags.php"> Learn HTML Tags </a>
Descriptive link text improves usability and helps search engines understand webpage relationships.
A broken link is a hyperlink that does not open the intended webpage or resource. It usually occurs when a page is deleted, renamed, or the URL is incorrect.
<a href="wrong-page.html"> Open Page </a>
If the file does not exist, the browser will show an error page.
Accessibility means creating websites that can be used by all people, including users who depend on assistive technologies.
Properly designed links help screen readers understand website navigation.
HTML links play an important role in search engine optimization. Search engines use links to discover webpages and understand relationships between different content.
A well-planned internal linking system helps both users and search engines navigate a website effectively.
Navigation menus are created using HTML links. They allow users to move between important pages of a website.
<nav> <a href="index.php"> Home </a> <a href="about.php"> About </a> <a href="contact.php"> Contact </a> </nav>
Navigation menus are usually placed in the header section of websites.
The following example demonstrates a simple website navigation system using HTML links.
<!DOCTYPE html> <html> <body> <header> <nav> <a href="index.html"> Home </a> <a href="tutorials.html"> Tutorials </a> <a href="notes.html"> Notes </a> <a href="contact.html"> Contact </a> </nav> </header> </body> </html>
This type of navigation structure is commonly used in educational websites, blogs, and business websites.
When creating links, developers should consider security, especially while opening external websites in new tabs.
<a href="https://example.com" target="_blank" rel="noopener"> Visit Website </a>
The rel="noopener" attribute improves security by preventing the new webpage from accessing the original page.
<a href=about.html> About </a>
<a href="about.html"> About </a>
| Concept | Description |
|---|---|
| Anchor Tag | Used to create hyperlinks. |
| href Attribute | Defines destination URL. |
| Target Attribute | Controls where link opens. |
| Internal Link | Connects pages within same website. |
| External Link | Connects another website. |
| Bookmark Link | Moves to a specific page section. |
HTML links are an essential part of web development because they connect different webpages, resources, and sections together. The anchor tag provides a simple way to create navigation systems for websites.
By understanding link types, target attributes, URLs, image links, download links, and best practices, developers can create user-friendly and well-structured websites.
A strong understanding of HTML links provides a foundation for building professional websites and learning advanced frontend technologies.