{"id":4679,"date":"2021-08-27T02:00:00","date_gmt":"2021-08-27T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/all-you-need-to-know-about-anchor-links\/"},"modified":"2024-02-05T20:07:06","modified_gmt":"2024-02-05T19:07:06","slug":"all-you-need-to-know-about-anchor-links","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/all-you-need-to-know-about-anchor-links\/","title":{"rendered":"Internal linking in HTML [&#8220;a&#8221; tag]"},"content":{"rendered":"\n<p>Bruce Lee once said, &#8220;<em>Until you have mastered anchor links in HTML and CSS, you have not mastered front end development.<\/em>&#8220;<\/p>\n\n\n\n<p>OK, I&#8217;m kidding, Bruce Lee didn&#8217;t say that. But it&#8217;s still kinda true. Anchor links (URL anchors) are often the first think aspiring devs learn to use &#8211; but there&#8217;s more to learn than simply hyperlinking from one page to another. So let us begin our path to mastery&#8230;<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-an-anchor-link-in-html%3F\">What Is an Anchor Link in HTML?<\/h2>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2021-08-27\/bruce-lee-anchor-text.jpeg\" alt=\"Bruce Lee Anchor Text\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>When we talk about the anchor link, we mean the <code>&lt;a&gt;<\/code> HTML element. As you know, you mainly use it to hyperlink to other webpages, but you can also use it to link to email addresses, phone numbers, or even files on your local hard drive.<\/p>\n\n\n\n<p>So why is called an &#8216;anchor&#8217;, and not a &#8216;link&#8217; like a normal person would call it?<\/p>\n\n\n\n<p>Well, it&#8217;s because it was originally invented as a way of hopping between different parts of the same document (internal linking in HTML) You&#8217;d use the <code>&lt;a&gt;<\/code> tag not only to create the link, but also to identify the part of the page you&#8217;re linking <em>to<\/em>. Just as a real anchor stops a ship from moving, the anchor tag stopped the viewport from moving.<\/p>\n\n\n\n<p>Nowadays, you don&#8217;t need to use the <code>a<\/code> tag as a &#8216;stopping point&#8217; &#8211; you can if you want, but you can also link to any element with an <code>id<\/code> attribute (more on this later).<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-add-the-url-anchor-in-html\">How To Add The URL Anchor in HTML<\/h2>\n\n\n<p>The key attribute of the anchor element is <code>href<\/code>. You use this to state where you want the link goes:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/alvarotrigo.com\/\"<\/span>&gt;<\/span>AlvaroTrigo.com<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The text between the opening <code>&lt;a&gt;<\/code> and closing <code>&lt;\/a&gt;<\/code> tags is the text that people actually click &#8211; known as the anchor text.<\/p>\n\n\n\n<p>Below are a few anchor link (URL anchor) HTML examples:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGRbQMe\" data-src=\"\/\/codepen.io\/anon\/embed\/bGRbQMe?height=450&amp;theme-id=1&amp;slug-hash=bGRbQMe&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGRbQMe\" title=\"CodePen Embed bGRbQMe\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-link-to-a-specific-part-of-a-html-page%3F\">How To Link To a Specific Part Of a HTML Page?<\/h2>\n\n\n<p>The above examples create an URL anchor to a different web page. However as I mentioned earlier, you can also use URL anchors for internal linking in HTML pages.<\/p>\n\n\n\n<p>To do that, you just add an <code>id<\/code> attribute to the element you want to link to (which would usually be a header, but can be anything), and use that in the <code>href<\/code> attribute of the anchor:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#another-section\"<\/span>&gt;<\/span>I'm linking from here<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"another-section\"<\/span>&gt;<\/span>I'm linking to here<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Note that you need to put a <code>#<\/code> in the anchor&#8217;s <code>href<\/code>, but not in the target&#8217;s <code>id<\/code>.<\/p>\n\n\n\n<p>Below is a internal linking example so you can see how it looks in action:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWgLJrd\" data-src=\"\/\/codepen.io\/anon\/embed\/QWgLJrd?height=450&amp;theme-id=1&amp;slug-hash=QWgLJrd&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWgLJrd\" title=\"CodePen Embed QWgLJrd\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"anchor-link-to-top-of-page\">Anchor Link To Top Of Page<\/h2>\n\n\n<p>OK, this works as intended. But what if our visitor wants to get back to the top? Should we just let them scroll all the way back up? We could&#8230; but let&#8217;s make it easy for them, and add another anchor link taking them to the top of the page.<\/p>\n\n\n\n<p>To do this, we use the exact same process as before. We just need to find the highest element on our page, the <code>text-area<\/code> <code>div<\/code> in this case, and add an <code>id<\/code> to it:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-area\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"top\"<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Then we just link to it as normal:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#top\"<\/span>&gt;<\/span>Back to top<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>We get this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_powzQVw\" data-src=\"\/\/codepen.io\/anon\/embed\/powzQVw?height=450&amp;theme-id=1&amp;slug-hash=powzQVw&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed powzQVw\" title=\"CodePen Embed powzQVw\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"anchor-link-smooth-scroll\">Anchor Link Smooth Scroll<\/h2>\n\n\n<p>At the moment, the link just teleports people to the new location. It would be cool if instead, the page scrolled gradually down to its destination.<\/p>\n\n\n\n<p>Not only is that possible, but it&#8217;s also pretty easy to achieve with jQuery:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEyzmoa\" data-src=\"\/\/codepen.io\/anon\/embed\/ZEyzmoa?height=450&amp;theme-id=1&amp;slug-hash=ZEyzmoa&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEyzmoa\" title=\"CodePen Embed ZEyzmoa\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>You can find detailed instructions on how to do this here: <a href=\"https:\/\/alvarotrigo.com\/blog\/jquery-smooth-scroll\/\">jQuery smooth scroll<\/a>.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"anchor-link-offset-css\">Anchor Link Offset CSS<\/h2>\n\n\n<p>One thing though. Notice how when we scroll down the lower part of the page, we end up with no gap between our destination and the top of the viewport? It&#8217;s completely flush.<\/p>\n\n\n\n<p>This doesn&#8217;t look very nice, so we should add a little offset above our destination, to give it a little breathing room. To do that, we can just this <a href=\"https:\/\/css-tricks.com\/hash-tag-links-padding\/\" target=\"_blank\" rel=\"noopener nofollow\">nice trick from Chris Coyier<\/a>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-id\">#lorem-ipsum<\/span><span class=\"hljs-selector-pseudo\">::before<\/span> { \n  <span class=\"hljs-attribute\">display<\/span>: block; \n  <span class=\"hljs-attribute\">content<\/span>: <span class=\"hljs-string\">\" \"<\/span>; \n  <span class=\"hljs-attribute\">margin-top<\/span>: -<span class=\"hljs-number\">20px<\/span>; \n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">20px<\/span>; \n  <span class=\"hljs-attribute\">visibility<\/span>: hidden; \n  <span class=\"hljs-attribute\">pointer-events<\/span>: none;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>::before<\/code> is a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Pseudo-elements\" target=\"_blank\" rel=\"noopener nofollow\">pseudo-element<\/a>, it will be the first child element of the thing you attach it to, in this case our destination header with the <code>id<\/code> of <code>#lorem-ipsum<\/code>.<\/p>\n\n\n\n<p>By giving the psuedo-element a <code>height<\/code>, and making it a <code>block<\/code> element, we ensure that any sibling elements will appear on a new line below it. By setting a negative top margin, we shift it up by the same amount, which cancels out the height so our display won&#8217;t be affected. However&#8230; as far as the <code>&lt;a&gt;<\/code> is concerned, that height still exists! So the target of the link is actually <code>20px<\/code> above the element.<\/p>\n\n\n\n<p>Told you it was a trick!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abwoQGj\" data-src=\"\/\/codepen.io\/anon\/embed\/abwoQGj?height=450&amp;theme-id=1&amp;slug-hash=abwoQGj&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abwoQGj\" title=\"CodePen Embed abwoQGj\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"url-anchor-css---styling-your-links\">URL Anchor CSS &#8211; Styling Your Links<\/h2>\n\n\n<p>OK &#8211; you can make your links do something. Now let&#8217;s think about the visual aspect. How can you change the appearance of anchor links?<\/p>\n\n\n\n<p>Easy, just select the <code>a<\/code> element in your CSS, and add any style you want. For example, the default anchor link colour is blue, or <code>#0000ee<\/code> If you wanted to change that, you&#8217;d just use:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">a<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#ee7700<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This would give you orange links.<\/p>\n\n\n\n<p>Here are a few other common ways you can customise your anchor links with CSS&#8230;<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"url-anchor-underline-css\">URL Anchor Underline CSS<\/h2>\n\n\n<p>Many sites get rid of the underline in their anchor links. I can see the logic here &#8211; I think every internet user knows that different coloured text is usually a link, and many people think links look better without the underline.<\/p>\n\n\n\n<p>In CSS, you underline (or not) using the <code>text-decoration<\/code> property, so we can just select the <code>a<\/code> element and set that to <code>none<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">a<\/span> {\n  <span class=\"hljs-attribute\">text-decoration<\/span>: none;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Let&#8217;s try it and see how it looks:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzQKRLb\" data-src=\"\/\/codepen.io\/anon\/embed\/YzQKRLb?height=450&amp;theme-id=1&amp;slug-hash=YzQKRLb&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzQKRLb\" title=\"CodePen Embed YzQKRLb\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>What do you think? Better, or worse? I&#8217;ll leave you to make that call on your own projects. Personally, I think the text looks cleaner without it&#8230; but I also think the underline is useful. It removes all confusion &#8211; &#8220;this is a link, 100% for sure, no question about it&#8221;. I wonder if there&#8217;s a middle ground here&#8230;<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"anchor-link-hover-css\">Anchor Link Hover CSS<\/h2>\n\n\n<p>If we want, we can target our anchor link CSS to take effect <em>only<\/em> when the visitor hovers over the link. It&#8217;s easy, just use <code>a:hover<\/code> in the CSS.<\/p>\n\n\n\n<p>So if you want to remove the underline from the link, but have it pop back on when people hover over it, you&#8217;d use this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">a<\/span> {\n  <span class=\"hljs-attribute\">text-decoration<\/span>: none;\n}\n\n<span class=\"hljs-selector-tag\">a<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n  <span class=\"hljs-attribute\">text-decoration<\/span>: underline;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The result:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJgLaEy\" data-src=\"\/\/codepen.io\/anon\/embed\/OJgLaEy?height=450&amp;theme-id=1&amp;slug-hash=OJgLaEy&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJgLaEy\" title=\"CodePen Embed OJgLaEy\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>OK I like it! step-by-step our page is coming together.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"url-anchor-visited-color\">URL anchor Visited Color<\/h2>\n\n\n<p>Earlier we talked about changing the colour of the link.<\/p>\n\n\n\n<p>But as you know, links change to a different colour if you&#8217;ve visited that destination before. You&#8217;ll have seen it in our example above &#8211; when you go back to the top, the original link is now purple &#8211; <code>#551A8B<\/code>, to be precise. That&#8217;s the default colour for visited links.<\/p>\n\n\n\n<p>If you want to change that, just use <code>a:visited<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">a<\/span><span class=\"hljs-selector-pseudo\">:visited<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#7B0706<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This would make it brown.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NWgKEzR\" data-src=\"\/\/codepen.io\/anon\/embed\/NWgKEzR?height=450&amp;theme-id=1&amp;slug-hash=NWgKEzR&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NWgKEzR\" title=\"CodePen Embed NWgKEzR\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"make-an-image-into-a-link-in-html\">Make an Image Into a Link In HTML<\/h2>\n\n\n<p>Your anchor text doesn&#8217;t have to be text. It can be any element at all!<\/p>\n\n\n\n<p>It&#8217;s quite common to use an image as a link &#8211; for example to point to a full-size version of the image. So how do you link up an image? Easy, just put your <code>&lt;img&gt;<\/code> element inside the <code>&lt;a&gt;<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#top\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"to-top\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/i.imgur.com\/LOUIXcd.jpg\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Back to top\"<\/span> \/&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The cool thing here is, if the image link breaks, the alt text will appear. So the fallback is just an ordinary, fully functioning text link. Here&#8217;s an example:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKqPrem\" data-src=\"\/\/codepen.io\/anon\/embed\/KKqPrem?height=450&amp;theme-id=1&amp;slug-hash=KKqPrem&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKqPrem\" title=\"CodePen Embed KKqPrem\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"anchor-link-padding\">Anchor Link Padding<\/h2>\n\n\n<p>To make your anchor links even more visible to your visitors, you might want to add a little padding around them. And your first thought, I imagine, would be to do this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">a<\/span> {\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If you do this, you&#8217;ll find that the padding only appears to the left and right of the anchor link, like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2021-08-27\/anchor-link-padding.jpeg\" alt=\"Padding only appears to the left and right of anchor text\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>This happens because <code>&lt;a&gt;<\/code> is an inline element, and all inline elements behave in this way. If that&#8217;s what you want, great! You&#8217;re done!<\/p>\n\n\n\n<p>But if you want the padding to appear on all four sides of the anchor, you just need to make it an <code>inline-block<\/code> element:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">a<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: inline-block;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This applies to all inline elements, so it&#8217;s a handy thing to know about. The result is shown below &#8211; effectively, it increases the <code>line-height<\/code> of any line that a link is on:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEyzmRv\" data-src=\"\/\/codepen.io\/anon\/embed\/ZEyzmRv?height=450&amp;theme-id=1&amp;slug-hash=ZEyzmRv&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEyzmRv\" title=\"CodePen Embed ZEyzmRv\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"nice-work-improving-your-anchor-link-skills!\">Nice Work Improving Your Anchor Link Skills!<\/h2>\n\n\n<p>OK, +100 XP for you &#8211; you now know how to create and style your anchor links!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2021-08-27\/bruce-lee-good-work.jpeg\" alt=\"Bruce Lee smiling with the caption 'Good work my friend'\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>So the question now is, what&#8217;s the next step on your journey? Here&#8217;s an idea&#8230; why not try to create a full-page site? You know the type I mean &#8211; where the web page is broken into full-page segments, and you scroll down to move between them. They are commonly used by design studios and big name brands, and your portfolio will look <em>awesome<\/em> (like <a href=\"https:\/\/alvarotrigo.com\/blog\/online-portfolio-examples\/\">these ones<\/a>) if you have a few of these on them.<\/p>\n\n\n\n<p>But aren&#8217;t they really hard to make? Well, they can be, if you decide to make one from scratch. But there&#8217;s an easier way &#8211; use a JS library called <a href=\"https:\/\/alvarotrigo.com\/fullPage\/\">fullPage.js<\/a>.<\/p>\n\n\n\n<p>fullPage.js is an easy-to-use, plug-and-play solution for making full-page sites. There are loads of different backgrounds, transition effects, and animations you can active really easily. Another cool thing is that fullPage integrates perfectly with WordPress &#8211; a lot of your potential clients (or potential employer&#8217;s clients) will use WordPress, so having a way to make your work stand out from the pack will be a huge plus. And fullPage is that way!<\/p>\n\n\n\n<p>Take a look: <a href=\"https:\/\/alvarotrigo.com\/fullPage\/\">fullPage.js<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is an anchor link, and how do you use them in your website? Here&#8217;s all you need to know to become a master!<\/p>\n","protected":false},"author":6,"featured_media":4678,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[25,17],"class_list":["post-4679","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developing","tag-html","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=4679"}],"version-history":[{"count":5,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4679\/revisions"}],"predecessor-version":[{"id":8597,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4679\/revisions\/8597"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/4678"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=4679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=4679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=4679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}