start learning
Image 1
3205

HTML Links

HTML links are created using the <a> tag in HTML code, with the destination of the link specified by the href attribute. HTML links, are clickable elements on a webpage that take the user to another web page, document, or specific section of a webpage. Links are typically represented as underlined or differently colored text, and can also be represented by images or other media.


The right way to use links in your HTML code with explanation

You can use our free live html editor to test tutorial codes .

A basic link to a webpage :


<a href="https://www.bibiser.com">Click here to visit Bibiser.com</a>

This creates a hyperlink that, when clicked, will take the user to the URL specified in the href attribute, in this case "https://www.bibiser.com". The link text is "Click here to visit bibiser.com".

A link to an email address:


<a href="mailto:contact@example.com">Contact us</a>

This creates a hyperlink that, when clicked, will open the user's email client and populate the "To" field with the email address specified in the href attribute, in this case "contact@example.com". The link text is "Contact us".

A link to a specific section on the same webpage :


<a href="#section1">Jump to section 1</a>

This creates a hyperlink that, when clicked, will take the user to the section of the current webpage with the id attribute of "section1". This is often used for long pages where it is useful to provide quick navigation to different sections. The link text is "Jump to section 1".

A link that opens in a new window or tab :


<a href="https://www.bibiser.com" target="_blank">Visit Example.com in a new window</a>

This creates a hyperlink that, when clicked, will open the target URL in a new browser window or tab, depending on the user's browser settings. The target="_blank" attribute specifies that the link should open in a new window or tab. The link text is "Visit www.bibiser.com in a new window".

A link that triggers a download of a file :


<a href="https://www.bibiser.com/course.pdf" download>Download the PDF course</a>

This creates a hyperlink that, when clicked, will prompt the user to download the file specified in the href attribute, in this case "https://www.bibiser.com/course.pdf". The download attribute tells the browser to download the file instead of navigating to it. The link text is "Download the PDF course".

A link with a tooltip that appears on hover :


<a href="https://www.bibiser.com" title="Visit bibiser.com">Hover over me</a>

This creates a hyperlink that, when hovered over with the mouse, will display a tooltip with the text specified in the title attribute, in this case "Visit bibiser.com". The link text is "Hover over me".

A link that is disabled and cannot be clicked :


<a href="https://www.bibiser.com" disabled>Sorry, this link is not available</a>

This creates a hyperlink that is visually disabled and cannot be clicked by the user. The disabled attribute tells the browser to disable the link. The link text is "Sorry, this link is not available".

A link with a specific style using CSS :


<a href="https://www.bibiser.com" style="color: red; text-decoration: none;">Visit bibiser.com in red</a>

A link that includes an image instead of text :


<a href="https://www.bibiser.com"><img src="bibiser.jpg" alt="Bibiserimage"></a>

A link that uses JavaScript to perform an action :


<a href="#" onclick="alert('Hello world!')">Click here to say hello</a>

A link that uses a relative URL :


<a href="/about.html">About us</a>

A link that uses a protocol-relative URL :


<a href="//www.bibiser.com">Visit bibiser.com with the same protocol</a>

A link that uses a hashbang URL for AJAX content :


<a href="#!/section2">Load section 2 using AJAX</a>

A link that is hidden visually, but still accessible to screen readers : 


<a href="https://www.bibiser.com" class="sr-only">Visit bibiser.com</a>