Links are found on almost all web pages. By clicking them we can either move from one page to another or scroll to different sections on the same page. A link can be in the form of a text or image. By default hovering over the link shows a little hand. The HTML link is also called hyperlink. Links contains a “href” attribute which contains Http or https URL.
Table of contents
- The basic A tag
- HTML Link styling
- Href attribute
- Target attribute
- Title atribute
- Internal link with Anchors
- Mailto links, to send emails
- Links with images
- Base Href
- Conclusion
You will find many websites or social media platforms ( Like YouTube, and Instagram ) which link an image to a URL or a text to a URL etc. This means that by using the ‘a’ tag, you can link 1 element of the code to another element that may/may not be in your code.
Note: A hyperlink can be represented by an image or any other HTML element, not just text.
Syntax:
href : The href attribute is used to specify the destination address of the link used. "href" stands for Hypertext reference. Text link : The text link is the visible part of the link. It is what the viewer clicks on.
<!DOCTYPE html>
<html>
<head>
<title>Websites</title>
</head>
<body>
<h1>HTML Websites</h1>
<p>Try <a href="http://www.quackit.com">Quackit</a> for starters.</p>
</body>
</html>
The above link is an example of a hyperlink. A hyperlink is a link that allows the user to navigate to another resource (such as a web page) or download it (such as in downloading a file). In this case, we link to another web page.
How Hyperlinks Work
A hyperlink is created by using the <a> tag along with the href attribute, which is used to specify the destination URL. Like this:
<a href="http://www.quackit.com">Quackit</a>
The <a> tag has a start and end tag. Any text or element between the start and end tag becomes the "clickable" part. You'll notice that most web browsers will display hyperlinked text in a different color and underlined. However, as with any HTML element, you do have control over how the link is styled by using CSS (we'll get to that soon).
As you can see from the top example, you can place links inline within the text—no need to place it on a new line or anything.
And you can link to any web page or document you like. There's no need to do anything on the destination page. Therefore, you can link to someone else's website without them even knowing. This is why there are so many links on the web!
Attributes
As well as the href attribute, the <a> tag also accepts other attributes. For example, the target attribute allows you to specify which frame, or browsing context, to load the destination page in.
Or for another example, the download attribute can be used to specify that the link is for downloading a resource (such as a file).
HTML links are created using the <a> (anchor) element. They allow users to navigate between different web pages or resources on the internet. Here's a basic structure of an HTML link:
html<a href="URL">Link Text</a>
- href: Specifies the URL (Uniform Resource Locator) of the linked page or resource.
- Link Text: The visible text or content of the link that users click on.
Example:
html<a href="https://www.example.com">Visit Example</a>
This creates a link labeled "Visit Example" that, when clicked, takes the user to the website "https://www.example.com".
Links can also be styled using CSS to change their appearance (such as color, font, and underline), and they can open in different ways using the target attribute:
html<!-- Opens link in a new tab -->
<a href="https://www.example.com" target="_blank">Visit Example</a>
html<!-- Opens link in the same tab -->
<a href="https://www.example.com" target="_self">Visit Example</a>
html<!-- Opens link in a specific frame -->
<a href="https://www.example.com" target="frame_name">Visit Example</a>
These are some of the basic attributes and options for creating HTML links. They are essential for creating navigation and connecting different web pages within a website or linking to external resources.