One of the main and most important features of HTML as a language is the ability to link to other resources on the web. One of the ways we do this is by using links or anchor tags that allow a user to click on them to go to another location online. That location can be part of the same site, or part of one that is not.
NOTE:
As is a best practice, all files should be named with all lowercase letters and when they have more than one word in the name, those words are separated with hyphens. Also, ensure that your file names are descriptive. If you have a website that sells clothes, naming all of your shirt files something like “shirt1.png” is not helpful. Better file names also improve SEO.
Link Syntax
An HTML link or anchor tag is used to create an element on your page that takes the user to another resource located on the web. It can be wrapped around text or an image. You can use a link to make text clickable on your site, but text isn’t the only thing you can put a link on.
<a href=""></a>
Required Attribute
There is one required attribute for an anchor tag, the href. This value will contain a URL or relative link to a resource (web page, image, file, etc).
Choosing Link Text
It is important to remember that when you are adding a link to your page where the user will click on some text to visit that link, that you make sure that the text inside of the link tags indicates to the user what will happen when they click on that link to visit it. Never use text like “Click Here” in a link, as it doesn’t mean anything without all of the other text on the page.
Adding a Link To Other Types of Content
You can use a link to make text clickable on your site, but text isn’t the only thing you can put a link on.
Wrapping an Image in a Link
You can add a link to an image:
<a href="index.html" aria-label="Visit our home page"><img src="images/logo.svg" alt=""></a>
Note that there is no alt text on this image, because it is a link and would lead to the home page when clicked. Instead, I have added an aria-labelattribute to the link itself, which would give that as a description to anyone using a screen reader to view our site.
Wrapping Heading Text in a Link
You may also find that you want to make your headings into links. This happens a lot when you use your h1 instead of a logo in the header of each page in your site that links to the home page.
<h1><a href="index.html">Company Name</a></h1>
Note that the link is added inside of the h1 around the text, not around the h1 tags themselves. This is because the h1 is a block-level element, and the link is an inline element. Putting a block element inside of an inline element isn’t generally a good practice.
Relative Links
A relative link describes one that leads to a resource that is a part of your site. These will never include things like https:// or C:Documents because those links will take the user to that exact location (although for the one in the documents folder, it will only work for someone who clicks it on your computer).
Relative Link to Another Page on Your Site
The link below would take you to a page named “About” that was in the same folder as your current page. This link would not need to be changed to work in the browser as long as your uploaded files are organized the same way as the ones on your computer.
<a href="about.html">About</a>
Relative Link to an Image Displayed on Your Site
When adding an image to your page, you would also link this relative to the current file you’re editing. If your images are correctly organized into a folder inside of your project folder/repository named “images” the link to display it alone in a browser window would look like the link below.
<a href="images/logo.svg">View this image in the browser</a>
Relative Link to an Area on The Same Page You Are Viewing (Link Fragment)
Many sites use just a single page for all of their content, and will link from the top of the page to the different sections or topics. Some sites will also link to a specific section or topic on a page on their site from another page. To do this, we use a link fragment. This means that instead of putting a file name alone inside of your href attribute, you use either an id that matches that of the container you want to link to, or a file name, followed by that id that matches the area of another page’s content you want the use to be able to click to view. The id should always include the hashtag symbol before the text of the id.
<!-- To link to a section with an id of "map" on the same page you are viewing -->
<a href="#map">View a map to our location</a>
<!-- To link to the top of the page, with an ID of "top" on the opening header or body tag -->
<a href="#top">Back to Top of Page</a>
<!--
To link to a section with an id of "map" on another page that is in the
same folder as the one you are viewing
-->
<a href="contact.html#map">View a map to our location</a>
Absolute Links
An absolute link describes one that leads to a resource that is not a part of your site. If you are linking to another website, you can’t just use the name of the page you want to display when users click the link, you have to give the full URL, as those files are not a part of your project. Never use absolute links for the resources or files that are a part of your project.
Absolute Link to Another Website
The link below would take you to the ASU landing page. Note that it must include the "https://" at the beginning of the address (and that not all address will be https, so you’d want to be sure to use the full address for the actual site you want to link to. If you only include the "www.asu.edu" portion of the URL in your href the link will not work.
<a href="https://www.asu.edu/">Visit the ASU Website</a>
Placeholder or Dummy Links
There are times when building your websites where you are not able to add a working link to an element on your page. This could be because you are only building some of the pages for an assignment, but will not have all of them completed because it is not required, or it could be because some functionality hasn’t been implemented yet, or even because your are coding a link in your navigation to the page the user is currently on. In these cases, you will use a placeholder link or dummy link. These links will not try to load a resource on your page if they are clicked. If you don’t use placeholder links and are linking to something that doesn’t exist or work, the user will see errors when they click on that link.
To make your link a placeholder link or dummy link, add a hashtag (#) inside of the href attribute instead of a URL or relative link:
<a href="#">Menu</a>
This link would be used on a site where the menu page does not actually exist yet, and if the user clicks on it nothing will happen.
GIT Coding Club 