Using HTML links, also known as hyperlinks, you can navigate between web pages or access images, videos, documents, and more. With the 'href' attribute and the '<a>' element, you can create links.
<a href="https://www.lapmos.com">Click here to visit lapmos.com</a>
The hyperlink "Click here to visit lapmos.com" is displayed in this example. The href attribute specifies the web address to which users are taken when they click on the link. In this case, that URL contains "https://www.lapmos.com".
You can also link to other pages within own website by specifying a relative URL. Here is an example:
<a href="contact.html">Contact Us</a>
Whenever the user clicks on the link, they will be directed to the “contact.html” page, which is located in the same directory as the current page.
In HTML, there are two types of URLs that can be used to link to web pages or resources: Relative URLs and Absolute URLs.
The relative URL specifies the location of a file or resource relative to the current page or t he website's root directory. It can be used to link to pages in the same website or to resource located in the same directory as current page.
The Absolute URL, on the other hand, specifies the complete web address of a file or resource, including the protocol (such as HTTP or HTTPS), the domain name, and the filename. Absolute URLs are used when linking to pages or resources on other websites, or when linking to resources that are located outside the current directory or website.
<!-- Relative URLs -->
<a href="about.html">About Us</a>
<!-- Absolute URLs -->
<a href="https://www.example.com/about.html">About Us</a>
One advantage of absolute URLs is that they can ensure that the link works correctly, even if the website's file structure changes or if the page is accessed from a different location. However, relative URLs are often preferred for linking within a website, as they can make it easier to manage links and avoid broken links if the website's structure changes.
You can also use anchor tags to create links to specific parts of a web page.
<!-- Navigate Specific part/location on same webpage -->
<a href="#section1">Go to Section 1</a>
...
<h2 id="section1">Section 1</h2>
<p>Some text here...</p>
In the above example, the link “Go to Section 1” will take the user to the section of the page with the ‘id’ attribute of “sectoin1”. When the user clicks on the link, the page will scroll to the corresponding section.
Links can also include images, like this:
<a href="https://www.lapmos.com"><img src="waterfall.jpg" alt="Waterfall"></a>
To create a link that opens the user's email client with a pre-filled email address, you can use the ‘mailto’ protocol with the ‘<a>’ element.
<a href="mailto:[email protected]">Contact us by email</a>
To create a link that allows the user to call a phone number on their mobile device, you can use the ‘tel’ protocol with the ‘<a>’ element.
<a href="tel:+1234567890">Call us at +1 (234) 567-890</a>
To create a link to a file that the user can download, you can use the ‘<a>’ element with the ‘href’ attribute set to the URL of the file.
<a href="https://www.example.com/docs/document.pdf" download>Download the PDF</a>
This creates a hyperlink that, when clicked, will download the file specified by the URL. The ‘download’ attribute is used to suggest that the target should be downloaded by the browser instead of navigating to it.
To use an HTML button as a link, you have to add some JavaScript code. With JavaScript, you can specify what happens when a button is clicked.
<button onclick="document.location='https://www.lapmos.com'">Visi lapmos.com</button>
In HTML, the ‘title’ attribute can be used to provide additional information or a tooltip text for a hyperlink created with the ‘<a>’ element. The text spcified in the ‘title’ attribute is displayed as a tooltip when the user hovers over the link with their mouse.
<a href="https://www.lapmos.com" title="Visit our website">Go to lapmos.com</a>
The target attribut specifies where to open the linked document. The target attribute can have one of the following values:
<a href="https://www.lapmos.com/" target="_blank">Visit lapmos.com!</a>
Attribute | Description |
---|---|
‘href’ | Specifies the URL or destination of the link. |
‘target’ | Specifies where to open the linked document. Possible values: ‘_self’ (defaul; open in the same frome or window), ‘_blank’ (opens in a new window or tab), '_parent' (opens in the parent frame), '_top' (opens in the full body of the window) or a named frame. |
‘download’ | Specifies that the target will be downloaded when the user clicks on the hyperlink. The value is the filename of the download. |
‘rel’ | Specifies the relationship between the current document and the linked document. Possible values: ‘alternate’, ‘author’, ‘bookmark’, ‘help’, ‘license’, ‘next’, ‘nofollow’, ‘noreferrer’, ‘noopener’, ‘prev’, ‘search’, ‘tag’ or a custom value. |
‘type’ | Specifies the MIME type of the linked document. |
‘referrerpolicy’ | Specifies how much referre information should be included when following the line. Possible value: ‘no-referrer’, ‘no-referrer-when-downgrade’, ‘origin’, ‘origin-when-cross-origin’, ‘same-origin’, ‘strict-origin’, ‘strict-origin-when-cross-origin’ or ‘unsafe-url’. |
Comments
Oops!