HTML HyperLinks
Web structure starts with solid HTML. Learn how HTML HyperLinks contributes to accessible and semantic web pages in the tutorial below.
HTML provides a way to transform text and image elements on a webpage into interactive hyperlinks by using hyperlink code. These links play a crucial role in enhancing user experience by enabling seamless online navigation.
Moreover, when utilized correctly for internal linking, they can also contribute to SEO efforts by enhancing the visibility of web pages within your site.
In this guide, you will learn how to create various HTML links and apply fundamental CSS styling to enhance the appearance of your links.
What is a Hyperlink?
A hyperlink, also known as a link, serves as a connection between two resources. It contains an interactive element, like an icon, text, phrase, or image, that can be activated by a user.
A hyperlink enables users to initiate an action, such as redirecting them to a different webpage or making a phone call.
Creating hyperlinks is straightforward once you are familiar with the structure of an anchor element, which is represented by the <a> tag in HTML.
Syntax of Anchor Element
Four components make up anchor elements:
- A heading tag marks the link element's beginning and the anchor element's start.
- Values of characteristics plus tag attributes: Several properties can be included in the opening tag. Extra details are provided via attributes, such as the behaviour and destination of the connection. (We'll go into more detail about certain qualities later).
- Other material or anchor text: This is what users click on.
- The last tag indicates that the link element has ended.
Consider this simple illustration for linking the four locations. In the provided example, an href attribute is employed to specify the target destination of the link, which, in this case, is the homepage of Semrush.
An illustration of the href property in use
A designated spot on a webpage or a file available for download can also function as the target location.
Note: The anchor elements you employ can utilise one or more attributes.
How to Create an HTML Link
Examine the process of generating a simple HTML hyperlink directing to the main page of your website.
First, start with your anchor tag:
<a> /a>
Subsequently, utilize the href attribute to incorporate the web address of your main webpage:
The link <a href="https://logic-practice.com">
Incorporate compelling anchor text to encourage readers to click on your link immediately:
The link <a href="https://logic-practice.com>Check out our homepage.
Utilizing detailed anchor text is highly recommended to ensure that users are informed about where they will be directed upon clicking the link.
1. Linking with Pictures and Videos
Adding a source to your anchor tag allows you to incorporate interactive media elements like images or animated graphics that can be clicked on.
Instead of employing anchor text in this scenario, you can insert a hyperlink to the media, such as an image.
In the above code:
<a href="https://logic-practice.com"><img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="a description of the media"></a>
The term "source" or "src" refers to the address or URL pointing to your content.
When utilizing an image as a hyperlink, the alt attribute contains the alternative text, which provides a descriptive explanation visible to screen readers in cases where the image is not displayed. This alt text serves as an indication that the image was unable to load.
2. Anchor Links: Connecting to Particular Sections of the Page
By utilizing the provided code snippets, anchor links, which are also referred to as jump links, can be used to navigate users to specific sections on a webpage.
<a href="https://logic-practice.com/blog/#seo-tips">SEO tips</a>
Items like a table of contents aid readers in navigating the page efficiently and finding the information they are looking for.
Initially, it is important to assign an identification (ID) to the anchor within the opening tag. This ensures that the link directs the reader to the specified location. This can be achieved by:
An identification can be assigned to any HTML element. In the provided example, we have positioned it inside a heading tag.
<h2 id="seo-tips">
Verify if the ID is still operational at this time. Employ a hash similar to this one to attach the ID to the conclusion of your URL:
https://logic-practice.com/blog/#seo-tips
Copy and paste the URL into the address bar of your web browser. Press Enter to navigate to the specified ID location on the webpage.
If the function is operational, you have the option to insert the link into the href attribute.
3. Clicking on Links in Tabs or New Windows
By using the destination property, you have the option to specify if your hyperlinks should open in a new browser tab or within the current window.
Utilize the target="_self" attribute value to specify the same window as follows:
<a href="https://logic-practice.com" target="_self">Anchor text</a>
Normally, links will open in the current window without the need for specifying "self." Nonetheless, adding "self" can help clarify the intention behind certain hyperlinks.
In order to open links in a new tab, you should specify "blank" instead of "self":
<a href="https://logic-practice.com" target="_blank">Anchor text</a>
For the sake of accessibility, it is generally recommended that links should open in the current tab.
4. Including Email Address Links
Clicking on a link by a user triggers the opening of their email provider by including the mailto value:
For example, kindly share a hyperlink to your support email for customers to easily send their questions.
It is important to make sure that the hyperlink in your anchor text suggests that when clicked, it will trigger an email application. Use phrases such as "Contact us via email" or "Drop us an email" to convey this message effectively.
Users are unlikely to be surprised when a program begins unexpectedly in this manner.
5. Linking to Phone Numbers
Initiate a Call:
A call is initiated by associating a phone number. By utilizing the tel attribute, you can create a link to a phone number:
An alternative method to transmit a text message is by utilizing the value "sms":
Initiate a text message:
<a href="sms:0987-654-321">Send SMS</a>
Make sure the user is aware that clicking will initiate a phone call or a text message, similar to how it functions with the email property.
6. Making Links for Downloads
Similar to establishing a connection to a URL, the HTML code utilized for generating downloads appears as follows:
<a href="https://logic-practice.com/path/to/file.pdf" download>Download the PDF (175kB) now</a>
The content will be automatically downloaded to users' devices when they click on the link.
A few things to consider while selecting the files for your links are as follows:
- Ensure the anchor text indicates the file type so people know what to expect when downloading.
- Make advantage of commonly supported file types so people can open them without needing extra software.
- Provide the file size to help the user decide if they have adequate room for the file 7. Connecting with Features of Accessibility
- It is possible to explain links to screen readers using the aria-label element. As in this:
7. Linking with accessibility attributes
Consider a scenario where you offer excerpts of content accompanied by a hyperlink for further reading:
<a href="https://logic-practice.com" aria-label="Read more about building a brand">Read more</a>
To offer more context for the "read more" link, you can utilize the "aria-label" attribute.
This approach ensures that individuals using screen readers will have a clear understanding of the link's purpose.
8. Connecting with Title Features
Text is displayed when a user hovers over a link due to the title property.
Hovering on a hyperlink displays text.
By incorporating the title attribute, you will achieve this text:
<a href="https://logic-practice.com" title="Read more about this topic by clicking this link">Anchor text</a>
Utilize it to offer your contacts additional background information.
One way to provide guidance to users is by informing them about the outcome of clicking a link. For example, using a headline like "Explore a detailed guide on this subject at www.logic-practice.com" can help set expectations for users.
9. Adding Relationships to Your Links
Link relationships play a crucial role in helping browsers and search engines comprehend the connection between the current page and the linked one.
In case you are collaborating with another organization, you can include the rel="sponsored" attribute value to your anchor element in the following manner:
<a href="https://logic-practice.com" rel="sponsored">Anchor text</a>
This informs search engines that the hyperlink is associated with a collaborative sponsorship or advertising initiative.
Here are some other common relationship attributes:
- Nofollow: Tells search engines not to consider the link when determining search rankings. Use to stop search engines from giving the linked page link equity or when you are connecting to content that you may not necessarily support.
- Noopener: A security feature that stops information from being accessed from the original page by the opened page. When using the target="_blank" property value, use this. It assists in shielding your website from possible security flaws.
- Noreferrer: Prevents browsers from passing the URL of the originating page as a referrer. Use this if you want the connected page to be unable to trace visitors from your website.
Link Design and Style using CSS
CSS can be utilized to customize your links by adjusting their color and styling to better match your brand identity.
Cascading Style Sheets, commonly known as CSS, is a stylesheet language used to define the presentation of web documents written in markup languages such as HTML. Web browsers utilize CSS to render the visual layout of web pages.
Let's explore a couple of methods for modifying CSS styles:
- CSS Inline
- External CSS file
CSS Inline
Styling can be applied directly to a single element by using inline CSS within the HTML code.
Just add a style attribute. As in this:
<a href="https://logic-practice.com" style="color: red;">Anchor text</a>
The term "style" is utilized within this code to incorporate color.
You may use to alter the colour:
- Colored keywords, such as red
- In HEX code
- Values in RGB and RGBA
- HSL grading
To remove the underline from a hyperlink, you can use the CSS attribute "text-decoration:none;". For example:
<a href="https://logic-practice.com" style="color: red; text-decoration: none;">Anchor text</a>
Inline CSS can be utilized to customize the appearance of a specific hyperlink among others.
Consider a scenario where all your connections are styled in green, but you specifically desire the hyperlink to your downloaded file to appear in orange. Achieve this by employing inline CSS.
External CSS File
Global styles can be set up by utilizing an external CSS file.
In your external CSS file, add this code:
a {
color: red; /* Change this to your desired color */
text-decoration: none; /*Remove this line to keep the link's underline */
}
Similar to inline CSS, you have the option to define the color of your links using RGB and RGBA values, color keywords, HEX codes, or HSL values.
