Creating links or hyperlinks is one of the fundamentals of the web. Hyperlinks allow users to navigate from one page to another with a simple click, connecting a vast world of information. As web developers, it is essential to understand how to implement them efficiently and improve the user experience through proper styling. In this guide, we will learn how to implement and customize hyperlinks in HTML, focusing on usability and design.
What is a Hyperlink and How Does It Work?
A hyperlink, also known as a "link", is an element in an HTML document that allows you to jump from one section to another within the same document, or to another document on another server. These are the basis of the interconnection of content on the Internet.
To create a hyperlink in HTML, we use the element a, also known as anchor tag. The basic structure of a hyperlink is as follows:
<a href="/en/URL_DESTINO/">Link text</a>The property href (hypertext reference) is where we specify the destination of the link. It can be a URL that leads to another page, a file to download, an email address, among others.
Types of Hyperlinks and Their Uses
There are different types of hyperlinks that we can implement for different purposes:
Internal Links
Internal links are used for navigation within the same website. They are essential for the user experience and also for SEO. Next, we will see how to create an internal link:
<a href="https://nelkodev.com/en/contact/">Contact</a>This link would take the user to the contact page of our website.
External links
Unlike internal links, external links point to another website. They are useful for providing references or recommending additional resources.
<a href="https://otrasitio.com">Visit this other site</a>Anchor Links
Anchor links are used to move to a specific section within the same page. To do this, we anchor the link to an element with a id particular.
<!-- Anclaje en la misma página -->
<a href="#seccion2">Go to Section 2</a>
<!-- Más adelante en el documento -->
<h2 id="seccion2">Section 2</h2>Email Links
To create a link that opens the user's mail client and generates a new message, we use "mailto":
<a href="mailto:[email protected]">Send me an email</a>Download Links
If we want a link to initiate the download of a file, we can use the attribute download:
<a href="/en/path/al/archivo.pdf/" download>Download the PDF file</a>Customizing the Style of Hyperlinks
The default style of links usually does not match the design of our website. To customize them we use CSS. Let's look at some examples:
Basic Style
We can change the color, the size of the text and remove the traditional underlining of the links:
a { color: #3498db; text-decoration: none; font-size: 1.2em; }Link States
Links have different states that we can style: :link, :visited, :hover, :active y :focus. Here an example:
/* Normal and visited state */ a:link, a:visited { color: #2980b9; } /* When the cursor hovers over the link */ a:hover { color: #3498db; text-decoration: underline; } /* When link is clicked */ a:active { color: #2ecc71; } /* When the link is focused */ a:focus { background-color: #f0f0f0; }Links as Buttons
In some cases, we might want our links to look like buttons. To achieve this we can apply a style similar to the following:
a.button { display: inline-block; padding: 10px 20px; background-color: #3498db; colour: white; border-radius: 5px; transition: background-color 0.3s; } a.button:hover { background-color: #2980b9; }And apply it in our HTML like this:
<a href="https://nelkodev.com/en/" class="button">Visit my Main Page</a>Best Practices for Hyperlink Usability
When using hyperlinks, it is important to keep certain practices in mind to improve usability and accessibility:
-
Descriptive text: The link text should be clear and descriptive of what the user will find when they click. Avoid texts like "click here."
-
Visual Indicators: A style that changes when the user hovers over the link helps differentiate it. Incorporating elements such as underlining, changing color or size are good practices.
-
Accessibility: Make sure links are accessible to users using screen readers by providing descriptive, not just visual, alt text.
-
Link Titles: The attribute
titlein links can provide additional information about the destination of the link.
Conclusion
Hyperlinks are essential to the architecture of the web and to the user experience. As we have seen, creating a link in HTML is simple, but the key is how to customize them and make them an integral and useful part of the design and navigation of a website. Implement the practices we've shared, make your links informative and engaging, and you'll be well on your way to delivering an improved user experience.
Remember to visit the main page of NelkoDev for more web development tips and resources. And if you have questions or need personalized assistance, don't hesitate to contact me. Keep experimenting and improving your web design skills every day!
English 
Spanish