HTML links enable users to navigate from page to page seamlessly whereas HTML anchors are used to create a hyperlink between a source anchor and a destination anchor. So, let’s dive deeper into understanding how you can create HTML anchors.
Define HTML Links
In HTML, hyperlinks are created through links. Clicking on a link allows you to navigate to another document. When you hover the mouse over a link, the cursor transforms into a hand. It’s essential to note that a link doesn’t have to be a text; it can be an image or any other HTML element.
What is the Anchor Element?
The anchor attribute in HTML is the letter a surrounded by angle brackets <>. The HTML <a> tag is employed to define a hyperlink, and its syntax is:
<a href=”url”>link text</a>
The most crucial attribute of the <a> element is the href attribute which specifies the link’s destination. The link text is the visible part seen by the reader. Clicking on the link text directs the reader to the specified URL address. Both the opening and closing attributes are required for the anchor element, and aloof the content between the tags makes up for the anchor text.
By default, a link exhibits the following appearances across all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
What are Integral Anchor Attributes?
To create dynamic hyperlinking, understanding the three essential attributes of anchor tags is crucial:
- Defining Hyperlink Destination: href
The hypertext reference (href) attribute designates the target or destination for the anchor element. It often specifies a URL for the link.
In this instance, the <a href=“http://example.com”>anchored text</a> links to the URL www.example.com.
Moreover, the href attribute can do more than just link to another website. You can use it to link directly to any element on a web page that has been assigned an ID. You can also use it to link to a resource using a protocol other than http or also run a script.
- Specifying Link Opening Location: target
The target attribute comes into play to determine how a link opens. For example, adding target=“_blank” to mailto link instructs the browser to open the link in a new browser tab or window. This ensures visitors remain on the current website. The modified code would look like this:
We’d love for you to <a href=“mailto:[email protected]” target=“_blank” ref=“noopener”>get in touch</a> with us. The link would be visible in the anchor text which users can click for the action to happen.
- Designating a Resource for Download: download
Links can also initiate file downloads using the download attribute. This attribute, paired with the href attribute, identifies the file to download and provides a name for it. For example,
To create a link that tells a browser to <a href=“example.com/file.ext” download=“Example_File”>download a file</a>, use the <code>href</code> attribute to identity the file to be downloaded and the <code>download</code> attribute to provide a name of the downloaded file.
This approach ensures the downloaded file is automatically named based on its format, enhancing user experience during the download process.
What are Internal and External Links?
Links created using the “a” element can be categorized into two types: internal and external. Internal links connect to other pages within the same domain or website. It facilitates navigation menus, aids content discovery, and supports search engine crawlers in indexing and distributing authority across the site. It is essential to exercise moderation in internal linking so that the link is not diluted easily.
External links, on the other hand, point to web pages beyond your website and serve various purposes. They offer proper attribution, guide visitors to relevant content, and, when reciprocated as backlinks, enhance your website’s position on search engine results pages (SERPs). While incorporating external links, it is advisable to refrain from linking to direct competitors and to use the target=“_blank” attribute to keep visitors on your site.
How to Create Anchor Link?
To create an anchor link HTML where you can jump to a certain section of the same page by using the <a> tag, follow these steps:
Step 1: Add an id attribute to the anchor element to give a name to the section of the page. The value of the attribute may be a word or phrase. However, do not use any spaces between the words; you can use underscores or dashes instead.
<a href=“anchor_name”>Name of the section where you want to jump</a>
You can also have the following types of anchors:
- Anchor within a header: <h2 id=“anchor_name”>Section name</h2>
- Anchor within an image: <img id“anchor_name” sec“/images/imgname.jpeg/”>
- Anchor within a paragraph: <p id=“anchor_name”>Paragraph name</p>
Step 2: Create a hyperlink by using the id of the link target, preceded by #. Remember that each id can appear only once on a page.
<a href=“anchor_name”>Jump to the part of the page with the anchor name id</a>
You only need to add the preferred text and you would be able to jump to different sections of a page.
Here’s how you can create an anchor tag in HTML with example:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”
<title>Jumping Anchor Example</title>
</head>
<body>
<p>Content above the jumped section.</p>
< ! – – Jumping anchor link – ->
<a href=“#jumpedSection”>Jump to Section</a>
<div id=“#jumpedSection”>
<h2>Jumped Section</2>
<p>This is the content you will jump to.</p>
</div>
How to Style a Jumping Anchor Link?
You can enhance the visual appeal of a jumping anchor link by applying additional styling. Achieve this by incorporating the <style> tag within the <head> element and defining the desired appearance for the target section using properties such as color and background. For example.,
<style>
#jumpedSection {
color: #3498db; /* Set text color to a specific shade of blue */
background: #ecf0f1; /* Apply a light background color */
}
#anotherSection {
color: #e74c3c; /* Set text color to a specific shade of red */
background: #f5b7b1; /* Apply a dark background color */
}
</style>
How Do You Link to an Anchor from Another Web page?
You can establish links to your anchor from external websites by appending the URL, followed by # and the anchor value. There are two variations of this application.
Linking to another page within the same domain:
<a href=“/explore-css/css-styles.html#syntax-2”Explore CSS Styles on our website.</a>
Linking to an external website:
<a href=“https://example.com/about-us#team-section”>Visit our team section on Example.com</a>
Example of how you can link to the anchor of another web page:
<a href=“https://example-site.com/products#pricing”>Discover pricing details on Example.com</a>
How to Load a Content Page in iframe and Jump to a Specific Section in that Page?
Consider a scenario where you have two iframes on a single page, and you want to establish a link in the first iframe. This link, when clicked, should load a specific page in the second iframe and navigate to a designated section. Here’s how you can do it:
Step 1: Assign an id to the second iframe for targeted referencing from the first iframe. Let’s assume you give it an id of “frame2.”
<iframe id=“iframe2” src=“content-page.html”></iframe>
Step 2: Subsequently, within the first iframe, generate a link to load the content page in the second iframe and navigate to a specific section using the target attribute. For instance, if you aim to navigate to a section with the id “section2” on the content page, you need to implement the following code:
<a href=“content-page.html#section2” target=“iframe2”> Load Content Page and Navigate to Section 2</a>
This code constructs a hyperlink that, upon clicking Loads “content-page.html” in the second iframe within the id “iframe2” and navigates to the section within the id “section2” on that page.
Here’s a complete example of loading a content page in an iframe and jumping to a specific section:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”
<title>iframe Example</title>
</head>
<body>
< ! – – First iframe with a link – ->
<iframe src=“about.html” width=“300” height=“200” title=“First iframe”></iframe>
<br>
< ! – – Second iframe with an id for targeting – ->
<iframe src=“about.html” width=“400” height=“300” title=“Second iframe”></iframe>
<script>
// Javascript to handle link click and load content in the second iframe document.addEventListener(“DOMContentLoaded”, function () {
// Reference to the link in the first iframe
var linkInFirstIframe = document.querySelector(“firstIframeLink”);
// Event listener for the link click
linkInFirstIframe.addEventlistner(“click”, function (event) {
// Prevent the default link behavior
event.preventDefault():
// Get the href attribute of the clicked link
var linkHref = event.target.getAttribute(“href”);
// Update the src attribute of the second iframe to load the content page and jump to the specified section section
document.getElementById(“iframe2”).src = linkHref;
});
});
</script>
< ! – – Link in the first iframe to load content in the second iframe – ->
<a id=“firstIframeLink” href=“about.html#team-section” target=“iframe2”>Load Content Page and Jump to Team Section</a>
</body>
</html>
In this example, there are two iframes on the page. Clicking the link in the first iframe triggers JavaScript to update the ‘src’ attribute of the second iframe. This loads the content page specified in the link (‘about.html’) and helps in jumping to the section with the id “team-section.”
Conclusion
Thus, an anchor tag is used for various purposes. By learning how to use an anchor, you can understand how to create links on the same web page as well as other pages. So, understand how to use the link URLs and create pages link by following the steps illustrated in this blog. Use this to improve usability and accessibility for users as well as enhance the readability and structure of your webpage. You can easily create interactive connections between your content and manage the document into logical sections.