Adding a link on your web page to another page or blog requires an HTML href tag.
In the browser, the links will appear in the following form:
- The unvisited link is blue and underlined.
- A visited link is purple and underlined.
- The active link is red and underlined.
Understand the hypertext link HTML Syntax
In HTML the links are specified using the tag. Also, a hyperlink or link can be a single word, group of words or image.
To begin the tag you need to type both the start and the end tags. Also, type and followed by to create a link tag. This is more properly called an anchor tag, and it is the “a” in the HTML tag.
Here is the HTML link example:
What is the href Attribute
The HREF in HTML is an attribute of the anchor tag and contains two components: the URL and the clickable text that is known as the “anchor text”.
In simple words, the href (hypertext reference) attribute offers the address of the page to the browser. Also, the URL needs to appear in quotation marks.
Types of URLs for Web Page
There are two types of URLs that are Absolute URLs and Relative URLs. Here is the difference between them:
Absolute URLs
An absolute URL has the entire address from the protocol (HTTPS) to the domain name ( www.example.com ). It also has the location within your website in your folder system (/foldernameA or /foldernameC) names within the URL.
Basically, it is the complete URL of the page that you link to.
Relative URLs
The relative URL does not have the full web address. It only contains the location following the domain. Relative URL assumes that the link is for the same site and has the same domain root.
Here is an example:
How To Create External Links
When you want to create a link to a page of other website, it is known as an “external” link. This is because it will take the readers to a page outside of your own website. To create an external link, you need to give the absolute URL, starting with http:// (the protocol).
You can create the external link using an anchor tag in HTML web page.
For example, to add the external link to Charle’s Décor home page, you need to link the list item “The Rustic Decor” to the site www.charlesdecor.com .
Now, marked up the link text in an anchor element with opening and closing anchor tags. And, use li element for the list. It is because the only li elements are permitted within a ul element.
Next, I add the href attribute with the complete URL for the site.
Now “The Rustic Decor” will appear as a link on the web page and will take your visitors to that site when they click on it.
How To Create Internal Links Using HTML
A large portion of the linking on your website will help your readers to go from one page to other. For example, you can create an internal link between your home page and other web pages of your site.
Without “http://”, the browser will look in the current server for the linked document. A pathname is used to point to a particular file or directory that tells the browser where to find the file.
Check out the three ways to link your HTML pages/files on your website.
- Both files are in the same folder
When both HTML files are located in the same folder, use the following syntax:
- Both HTML files are in different folders Within the parent folder
When both HTML pages are located in different folders within the same directory, use the following syntax:
- The HTML file is in the sub-folder within the parent folder
The HTML file is located in the sub-folder within the website folder within the parent folder’s directory, use the following syntax:
Link to Images in Web
To create link for image in HTML, use the
tag as well as the
tag with the href attribute. Also, for creating link to images, the
src
attribute in the
img
element works as the
href
attribute in anchors.
You can also simplify that path by going to the relative route, like this:
Final Words
Linking is very important for any business website or web page. It helps increase the traffic on your web page and improves the revenue many times. Also, by adding HTML links to wb page, you can build a strong customer base.
If you want to make your website but are not aware of its aspects and strategy, then consider Symphony Software . We are a team of expert professionals who have years of experience in web designing and technical languages.