{"id":25482,"date":"2024-02-17T02:24:42","date_gmt":"2024-02-17T01:24:42","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/domina-la-navegacion-web-guia-para-crear-y-estilizar-hipervinculos-en-html\/"},"modified":"2024-06-03T17:41:37","modified_gmt":"2024-06-03T16:41:37","slug":"domina-la-navegacion-web-guia-para-crear-y-estilizar-hipervinculos-en-html","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/master-web-navigation-guide-to-creating-and-styling-hyperlinks-in-html\/","title":{"rendered":"Master Web Browsing: Guide to Creating and Styling Hyperlinks in HTML"},"content":{"rendered":"<p>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.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-web-navigation-guide-to-creating-and-styling-hyperlinks-in-html\/#%C2%BFQue_es_un_Hipervinculo_y_Como_Funciona\" >What is a Hyperlink and How Does It Work?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-web-navigation-guide-to-creating-and-styling-hyperlinks-in-html\/#Tipos_de_Hipervinculos_y_sus_Usos\" >Types of Hyperlinks and Their Uses<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-web-navigation-guide-to-creating-and-styling-hyperlinks-in-html\/#Enlaces_Internos\" >Internal Links<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-web-navigation-guide-to-creating-and-styling-hyperlinks-in-html\/#Enlaces_Externos\" >External links<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-web-navigation-guide-to-creating-and-styling-hyperlinks-in-html\/#Enlaces_de_Anclaje\" >Anchor Links<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-web-navigation-guide-to-creating-and-styling-hyperlinks-in-html\/#Enlaces_de_Correo_Electronico\" >Email Links<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-web-navigation-guide-to-creating-and-styling-hyperlinks-in-html\/#Enlaces_de_Descarga\" >Download Links<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-web-navigation-guide-to-creating-and-styling-hyperlinks-in-html\/#Personalizando_el_Estilo_de_los_Hipervinculos\" >Customizing the Style of Hyperlinks<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-web-navigation-guide-to-creating-and-styling-hyperlinks-in-html\/#Estilo_Basico\" >Basic Style<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-web-navigation-guide-to-creating-and-styling-hyperlinks-in-html\/#Estados_del_Enlace\" >Link States<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-web-navigation-guide-to-creating-and-styling-hyperlinks-in-html\/#Enlaces_como_Botones\" >Links as Buttons<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-web-navigation-guide-to-creating-and-styling-hyperlinks-in-html\/#Mejores_Practicas_para_la_Usabilidad_de_Hipervinculos\" >Best Practices for Hyperlink Usability<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-web-navigation-guide-to-creating-and-styling-hyperlinks-in-html\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_un_Hipervinculo_y_Como_Funciona\"><\/span>What is a Hyperlink and How Does It Work?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A hyperlink, also known as a &quot;link&quot;, 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.<\/p>\n<p>To create a hyperlink in HTML, we use the element <code>a<\/code>, also known as anchor tag. The basic structure of a hyperlink is as follows:<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;a href=&quot;\/en\/URL_DESTINO\/&quot;&gt;Link text&lt;\/a&gt;<\/code><\/pre>\n<p>The property <code>href<\/code> (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.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tipos_de_Hipervinculos_y_sus_Usos\"><\/span>Types of Hyperlinks and Their Uses<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There are different types of hyperlinks that we can implement for different purposes:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Enlaces_Internos\"><\/span>Internal Links<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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:<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;a href=&quot;https:\/\/nelkodev.com\/en\/contact\/&quot;&gt;Contact&lt;\/a&gt;<\/code><\/pre>\n<p>This link would take the user to the contact page of our website.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Enlaces_Externos\"><\/span>External links<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Unlike internal links, external links point to another website. They are useful for providing references or recommending additional resources.<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;a href=&quot;https:\/\/otrasitio.com&quot;&gt;Visit this other site&lt;\/a&gt;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Enlaces_de_Anclaje\"><\/span>Anchor Links<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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 <code>id<\/code> particular.<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;!-- Anclaje en la misma p&aacute;gina --&gt;\n&lt;a href=&quot;#seccion2&quot;&gt;Go to Section 2&lt;\/a&gt;\n\n&lt;!-- M&aacute;s adelante en el documento --&gt;\n&lt;h2 id=&quot;seccion2&quot;&gt;Section 2&lt;\/h2&gt;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Enlaces_de_Correo_Electronico\"><\/span>Email Links<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To create a link that opens the user&#039;s mail client and generates a new message, we use &quot;mailto&quot;:<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;a href=&quot;mailto:contacto@nelkodev.com&quot;&gt;Send me an email&lt;\/a&gt;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Enlaces_de_Descarga\"><\/span>Download Links<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If we want a link to initiate the download of a file, we can use the attribute <code>download<\/code>:<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;a href=&quot;\/en\/path\/al\/archivo.pdf\/&quot; download&gt;Download the PDF file&lt;\/a&gt;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Personalizando_el_Estilo_de_los_Hipervinculos\"><\/span>Customizing the Style of Hyperlinks<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The default style of links usually does not match the design of our website. To customize them we use CSS. Let&#039;s look at some examples:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Estilo_Basico\"><\/span>Basic Style<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>We can change the color, the size of the text and remove the traditional underlining of the links:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">a { color: #3498db; text-decoration: none; font-size: 1.2em; }<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Estados_del_Enlace\"><\/span>Link States<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Links have different states that we can style: <code>:link<\/code>, <code>:visited<\/code>, <code>:hover<\/code>, <code>:active<\/code> y <code>:focus<\/code>. Here an example:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">\/* 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; }<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Enlaces_como_Botones\"><\/span>Links as Buttons<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In some cases, we might want our links to look like buttons. To achieve this we can apply a style similar to the following:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">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; }<\/code><\/pre>\n<p>And apply it in our HTML like this:<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;a href=&quot;https:\/\/nelkodev.com\/en\/&quot; class=&quot;button&quot;&gt;Visit my Main Page&lt;\/a&gt;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Mejores_Practicas_para_la_Usabilidad_de_Hipervinculos\"><\/span>Best Practices for Hyperlink Usability<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When using hyperlinks, it is important to keep certain practices in mind to improve usability and accessibility:<\/p>\n<ul>\n<li>\n<p><strong>Descriptive text:<\/strong> The link text should be clear and descriptive of what the user will find when they click. Avoid texts like &quot;click here.&quot;<\/p>\n<\/li>\n<li>\n<p><strong>Visual Indicators:<\/strong> 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.<\/p>\n<\/li>\n<li>\n<p><strong>Accessibility:<\/strong> Make sure links are accessible to users using screen readers by providing descriptive, not just visual, alt text.<\/p>\n<\/li>\n<li>\n<p><strong>Link Titles:<\/strong> The attribute <code>title<\/code> in links can provide additional information about the destination of the link.<\/p>\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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&#039;ve shared, make your links informative and engaging, and you&#039;ll be well on your way to delivering an improved user experience.<\/p>\n<p>Remember to visit the main page of <a href=\"https:\/\/nelkodev.com\/en\/\">NelkoDev<\/a> for more web development tips and resources. And if you have questions or need personalized assistance, don&#039;t hesitate to <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">contact me<\/a>. Keep experimenting and improving your web design skills every day!<\/p>","protected":false},"excerpt":{"rendered":"<p>Crear enlaces o hiperv\u00ednculos es uno de los fundamentos de la web. Los hiperv\u00ednculos permiten a los usuarios navegar de una p\u00e1gina a otra con un simple clic, conectando un mundo inmenso de informaci\u00f3n. Como desarrolladores web, es esencial entender c\u00f3mo implementarlos eficientemente y mejorar la experiencia del usuario a trav\u00e9s de un estilo adecuado. [&hellip;]<\/p>","protected":false},"author":1,"featured_media":25483,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420],"tags":[205,340,1473,894,358,1162,475,800,60,47],"class_list":["post-25482","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-blog","tag-crear","tag-domina","tag-estilizar","tag-guia","tag-hipervinculos","tag-html","tag-navegacion","tag-para","tag-web"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=25482"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25482\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/25483"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=25482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=25482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=25482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}