Creating and Styling Hyperlinks
This article is part of series: Yet Another Full Stack Development Course
You can switch to video version of this article
In previous part, we did a basic HTML document that we should take forward and covered head section, some basic elements, and styling. Today we are going to start off with hyperlink or anchor element and their styling.
Hyperlinks allow you to link to another web page a specific section of the current page or on some other page. They can also be links to an email address, a file or any other resource on the internet. That’s the formal definition so we can begin by describing how you can go to another page.
Hyperlinks to external web page
So we are going to start off with an example of linking to another page. Let’s add a new file to our folder say mylinkedfile.html. At the moment leave it empty and just save it to the disk. If you are unsure how to do so, please refer to our Visual Studio Code setup article earlier in the series.
Now let’s create a link from our first html file to this linked document. I’ll write the full hyperlink or anchor element first. see the full anchor tag first and then I’m going to explain
<a href=”./mylinkedfile.html”>Open my linked html document</a>Let’s explain this anchor element that we just created. <a is the starting tag or the opening tag of the anchor element. The attribute href specifies the destination of this anchor element, i.e. when you click the anchor element Link in the browser, where it would lead you to. So right now I am pointing to another HTML file in the same folder via relative URL, but you can also have a full URL in the form http://somewebsite.com/linkedfile.html or something.
What follows after the starting tag is known as the anchor text, and at the end </a> is the closing anchor tag. So just a word of terminology. The address starting with ./ is a relative URL, whereas the other one with the http prefix would be called an absolute URL because this is a fully qualified URL to another web page. So if you have been following by writing code, you can see this in action. So if you click the phrase ‘Open my linked html document in browser, it would open the other page i.e. the one specified in href and you can confirm using the address bar. Let’s go back to this and cover some more aspects of the anchor link.
Navigating to section in the same web page
So we used this URL example to go to another web page, but you can easily go to another section of the same HTML document. That is useful in cases where the document is a bit long and has different chapters or sections, so let’s cover an example of that. Let’s create a target first and then we’ll create the link. Let’s create a span element and create a bookmark for it using the ID attribute so specifying an ID of an element, in link terminology we call creating a bookmark. And bookmark, as you might already be aware, is something that you link to. Let’s add some content to the span element like ‘I am target of same document hyperlink’, and then we close the span element. The entire target span element looks like this
<span id=”sameDocLinkTarget”>I am target of same document hyperlink<span>Next we create a link to this and the way to go about is
<a href=”#sameDocLinkTarget”>Navigate to target in same document</a>The key to navigate to same document bookmarks is by using a pound sign before id attribute. As we shall see later, id is an attribute found on all HTML elements, and is a unique identifier of that element in the HTML document. Only one element in an HTML document can have a given id, and it can’t be duplicated.
So if you save your document and try clicking on the hyperlink, or just click the hyperlink if using live preview extension in visual studio code, you would notice nothing happens. The reason being the source and target are located really close together, and our document is not long enough for link to cause a scroll and give a visual feedback of hyperlink navigation occuring. We can quickly fix that by adding some dummy text to our document. And the best way to do so is using lipsum.com
Lipsum.com
Lipsum.com is an amazing website with a singe purpose, provide you with a plentiful supply of dummy text. You can control how many words, paragraphs or bytes of text you need, and it would give you a loram ipsum passage of the given length. Simply copy and paste in visual studio code via clipboard using ctrl+c to copy, and ctrl+v to paste in your code.
To do that in your html document, add a paragraph element after your hyperlink, and before your target span element like below, and paste the contents of lorem ipsum as its contents. Make sure to have enough text so that it would cause a wide vertical gap between hyperlink and target element forcing you to scroll to see the span element in the rendered web page. If in any confusion about how to do any of that, refer to our video version of this article where we do this live on YouTube.
<a href=”#sameDocLinkTarget”>Navigate to target in same document</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo…
</p>
<span id=”sameDocLinkTarget”>I am target of same document hyperlink<span>All right so our document is lengthy enough, the target is hidden from the current view. So I’m going to go to go to hyperlink and click it. Yes, we scroll to the bottom of the document to our target, but that’s not really visible and distinguishable from rest of the text, so let’s change that. What I’m going to do is quickly introduce the line break and add some different color to it color red so our target stands out
<span id=”sameDocLinkTarget” style=”color:red”>I am target of same document hyperlink<span>Let’s scroll back up and click our hyperlink again, and yes the link correctly took us to the span element in the same document. So this is really useful if you’re writing let’s say a blog, or a lengthy web document, and you want to refer your user to to another section like for example you’re writing a research paper, and you want your reader to go directly to your conclusion or result section, then would be the way to go.
You would notice this on a lot of websites which have summary sections or table of contents on top of a web page, and then each section or chatper in the web page or HTML document has an id with accompanying bookmark which is linked to that table of content. Usually if you hover over the bookmark, you see a piece of chain icon, which is a standard icon for hyperlinks.
Attributes of hyperlink
Download Attribute
The link tag has a bunch of attributes on it. The most important ones are a download attribute. What it does is that you specify whether you want to ‘open’ the linked resource, like for example what we did earlier. Here it took me to the other HTML file from the current web page (or scrolled to linked target in same document), but let’s say I do not want to go to the another page. I want to download it e.g. my linked resource is a pdf file or some form that needs to be filled offline, now it wouldn’t make sense trying to open it in browser. You get the idea.
So what we need to do here is to go ahead and add another hyperlink to our body section like below and call its contents as ‘Download my second practice page’section. I’ll stick to using an HTML file for now as we haven’t introduced other resources yet, but you can add a picture to your folder say mypic.jpg, and use that instead of linked page.
For this exercise, you can even copy and paste the earlier hyperlink (for external file) and add download attribute as well as change the contents accordingly
<a href=”./mylinkedfile.html” download>Download my linked html document</a>It must be visible in my live preview or browser, so if I click this, it would start downloading the page and prompt you to specify the download location instead of navigating to the web page. For the picture example, assuming you add a picture to your folder containing the source html document called mypic.jpg, your hyperlink to download that image would look like below
<a href=”./mypic.jpg” download>Download my picture</a>Go ahead and give these a try.
Target Attribute
Get Ali Aslam’s stories in your inbox
Join Medium for free to get updates from this writer.
The other most important uh attribute is Target. The intuition for Target is that a linked web page is normally displayed in the current browser window, replacing the current web page, unless you specify another target. You noticed with our original external page example that when I clicked the hyperlink, it opened and replaced the current web page with the other one. But let’s say you don’t want to do that. Like i mentioned lipsum website earlier in this article, but i wouldn’t want the link to open lipsum website replacing my article since you are still reading it. You want uh the link to open in another tab, and you would do so using the target attribute on anchor element. Now the target attribute has a bunch of values, the most important of which is _blank, which opens linked page in a new tab or window keeping your current web page open as it is. There are other values like
- _self Opens the linked document in the same frame as it was clicked (this is default)
- _parent Opens the linked document in the parent frame
- _top Opens the linked document in the full body of the window
and - framename Opens the linked document in the named iframe
I think we don’t need to go in specifics of parent, top and framename at this stage because we haven’t introduced frames yet, so we’ll stick to _blank and we are going to add another hyperlink, so I’m going to follow the same example here i.e. copy and paste the hyperlink to external document, and just use the target equal to _blank to force the linked page to open in new window
<a href=”./mylinkedfile.html” target=”_blank”>Open my linked html document in new window</a>For those using live preview extension from Microsoft in Visual Studio Code for this exercise, note the above would not work with live preview as live preview is a very minimalistic browser with a single window so above hyperlink would fail to work in that. You would need to save the file, open it in another (proper) browser manually and give it a try to see it in action. Most browsers support Ctrl+O shortcut to open files from the disc.
Linking to specific location in another/external web page
Let’s say you want to go to the other page from the first page, and not just to the top, but to another section of that page i.e. you’re referring to a particular section of a very lengthy document in another URL. Let’s go ahead and do that. For that you need to make the linked document a bit lengthy, so first open the lipsum website again and generate say 200 paragraphs worth of dummy text and copy it to clipboard, then paste it in the target/linked document as a paragraph in body text
<p>lorem ipsum….</p>Remember that you need to do it in target or linked document, and not the source document where our hyperlink lives. Now after this paragraph with dummy text, add a line break using <br/> and then add a span element with id externalPageBookmark
<span id=”externalPageBookmark”>I am bookmark in external linked document</span>If you’re wondering what the span tag is, span is an element where you wrap sections of text for styling purpose or to add attributes to a section of text without creating a new line of content so nothing fancy. It’s just a way of wrapping text in a transparent manner so you can apply a different style on it. Here we are not applying any style, but if we want we can do so using the style attribute as seen earlier. We are currently interested in just giving that piece of text an id, so it can be accessed from the source document. Same effect can be achieved using an h2 heading as well so please go ahead and try that as well like below
<h2 id=”externalPageBookmark”>I am bookmark in external linked document</h2>Remember you need to either use span or h2, but not both. Id is meant to be a unique identifier, and there must not be two elements with the same id in an HTML document.
Let’s go back to our source document and add a hyperlink
<a href=”./mylinkedfile.html#externalPageBookmark”>Open designated section in my linked html document</a>Awesome, lets click it in the browser, and it would navigate to linked document, and you can see from the scroll bar that it scrolled all the way down to this ‘I am bookmark in external linked document’ portion, and not at the top.
If its not so obvious from the scrollbar, you can add some styling like a color to the span or heading in linked document.
Styling the hyperlink
So far we have just styled the linked span or heading elements to make them stand out from the crowd (other text in document), but let’s focus on styling the hyperlink itself. Hyperlinks by default have a default style since forever which is
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
Note hyperlinks are the very first elements and predate CSS and styling so they have been around for decades and everyone that has used world wide web knows and implicitly expects links to behave this way. So any styling that you do must be done consciously knowing that users have come to expect a certain behavior and style for hyperlinks.
So if you do decide to change the default styling, good news is that you have full control of styling. So head over to the css file linked to the source file and add the following style there
a:link {
color:cadetblue;
}In case you are wondering what a css file is, please read our previous article on styling an html document. Otherwise, you can just add a style element like below to the head element and it would result in the same behavior
<head>
<style>
a:link {
color:cadetblue;
}
</style>
</head>Once this is done, have a look at the preview, and notice all hyperlinks are appearing in a different color than before. You can try changing the color choice if it does not strike you as different enough. Note the styling was done in a different way than disussed before and we used : followed by link as a suffix for a element in styling. This syntax is formally known as pseudo classes in CSS and allow you to style different states of the element. Using link allowed you to modify the anchor tag styling for default state or more specifically the ‘unvisited’ state.
Why stop here, let’s go ahead and modify styling for visited state as well.
a:visited {
color:lightcoral;
}You can see all the links that you have visited already, are now appearing in a different color. Any link that you click from now onwards would start showing in lightcoral color.
This is it for links and their styling. If you liked, please clap/share and subscribe to our YouTube channel to be notified of exciting content like this.
Thank you.
Next article: Creating and Styling HTML Lists
