You can create a hyperlink in HTML using the <a> (anchor) element. This is a two-sided tag, and the content placed between the opening <a> and closing </a> tags becomes the clickable link text or element.
The href Attribute
The important attribute of the <a> element is the href (hypertext reference) attribute. This attribute specifies the destination of the hyperlink. The value of the href attribute is the URL of the page or resource you want to link to.
What are 3 types of hyperlinks in HTML?
- Absolute URLs: It is specifying the full web address, including the protocol (like http:// or https://) and the domain name. For example:
<a href="http://www.example.com/">Visit Example.com</a>This creates a hyperlink to the specified website.
- Relative URLs: It is specifying a path to a resource within the same website. The browser uses the URL of the current document to determine the full path. If the linked page is in the same folder, you just use the filename. For example:
<a href="about.html">About Us</a>If about.html is in the same directory as the current page, this will create a link to it. You can also use more complex syntax to navigate between folders.
- Internal Links (Anchors): You can link to a specific section within the same HTML document by using a fragment identifier, which is a hash mark (#) followed by the id of the element you want to link to.
- Linking within the same page: If the target element is in the same HTML document, the href will start with # and the id. First, you need to give the target element an id. Then, in the href of the <a> tag, you use # followed by that id. For example:
- Linking to a specific part of another page: To link to a specific section on a different page, you include the URL of the page followed by # and the id of the target element.
<h2 id="section2">Section Two</h2>
<p>This is the content of section two.</p>
<a href="#section2">Go to Section Two</a>Clicking “Go to Section Two” will scroll the page to the “Section Two” heading. The name attribute was also used for anchors in older HTML, but HTML5 recommends using id instead.
<a href="another_page.html#specific_part">Go to Specific Part on Another Page</a>This accepts that another_page.html has an element with the id=”specific_part”.
Other Protocols
The href attribute can also use other protocols supported by browsers. Common examples include:
mailto: Creates a link that opens the user’s default email client and addresses a new email to the specified address. You can also include a subject line and body. Remember to URL encode spaces as %20.
<a href="mailto:someone@example.com?subject=Hello&body=This%20is%20the%20body">Email Us</a>tel:: (Less universally supported) Can initiate a phone call on devices that support it.
<a href="tel:+15551234567">Call Us</a>ftp:: Links to files on an FTP server.
<a href="ftp://example.com/file.zip">Download via FTP</a>file:: (Usually for local testing) Links to a file on the user’s local computer.
<a href="file:///C:/documents/report.pdf">Open Local Report</a>news:: Links to a Usenet newsgroup.
<a href="news:comp.lang.html">HTML Newsgroup</a>Link Targets Using the target Attribute
The target attribute of the <a> element specifies where to open the linked document. Common values include:
_blank: Opens the linked document in a new browser window or tab.
<a href="http://www.example.com/" target="_blank">Open in New Tab</a>Forcing a new tab/window is generally not recommended as it can violate user control.
_self: Opens the linked document in the same frame as it was clicked (this is the default behavior if no target attribute is specified).
<a href="about.html" target="_self">Open in Same Window</a>_parent: Opens the linked document in the parent frameset. This is relevant when using frames (which are less common now).
_top: Opens the linked document in the full body of the window, breaking out of any frames.
framename: Opens the linked document in a named <iframe>. You first need to give the <iframe> element a name attribute.
<iframe src="frame_content.html" name="myframe"></iframe>
<a href="another_page.html" target="myframe">Load in Frame</a>Creating Links for Downloading Files
To create a link the user to download a file instead of navigating to a web page, you can use the download attribute on the <a> tag.
- When the download attribute is present, the browser will attempt to download the resource specified in the href attribute when the user clicks the link.
- You can optionally specify a value for the download attribute, which will be the name of the downloaded file. If you don’t specify a value, the browser will typically use the original filename. The browser will automatically detect and add the correct file extension.
Example:
<a href="files/my_document.pdf" download>Download PDF</a>
<a href="images/my_image.jpg" download="profile_image">Download Profile Image</a>In the first example, clicking the link will prompt the user to download my_document.pdf. In the second example, the downloaded file will be named profile_image.jpg.
HTML5 Topics