5 Website Development Tips To Boost Your Business Growth Exponentially
As you already know, links are a vital part of Web pages. Links allow you to move smoothly from one page to another. It allows you to navigate from page to page. It also enables you to get more information about a certain topic.
As such, there are a lot of different types of links that you should know when learning HTML. Let us first concentrate on the body of your HTML document. What are these link types that you should know about?
- Regular or text links
- Image links
- Links to e-mail addresses
- Placeholder or anchor Links
Regular or Text Links
The most common type of link is the text link. These are text that are usually rendered underlined and in blue, and allows you to visit a linked resource.
To create a simple text link, use the <a> tag by following this syntax:
<a href=”URL of page you want to link to”>link text</a>
What does this syntax mean?
- The <a> tag opens the link element.
- The href attribute will tell you the destination of the link.
- The “link text” could be anything from a simple description of the linked page to something like “click here” or “visit the page.”
- The </a> tag closes the element.
<a href=”http://www.google.com”>Google It!</a>
would show as
Clicking on that link will take you to http://www.google.com.
Take note that the destination URL does not have to be an HTML page or a Web page. Links could take you to an image file, a Word document, a PDF file, or even audio, video and other multimedia files.
Sometimes, you would want to use an image instead of a text link. That is possible too. To use an image as your link, use the following syntax:
<img src=”image.jpg” alt=”alt text of image”></a>
On your page, the picture called image.jpg will be linked to any URL you have.
Links to e-Mail Addresses
Instead of a URL, image or video and other similar files, you could create an e-mail link.
An e-mail link would open the user’s default e-mail client (Gmail, Outlook, Apple Mail, etc) and start a new message with the specified e-mail addresses already filled into the TO: field. If you have also specified a subject, the subject line will also be filled in automatically.
How do you do this? Use the following syntax:
<a href=”mailto:[email protected]?Subject=Creating an e-mail link!”>Send me an e-mail!</a>
On your page, this will show up as
When you click on that link, it will open your e-mail client to compose a new message window. On the TO field, you will see [email protected] already entered and the subject line will read as “Creating an e-mail link!”.
There are times when you need to create links to different parts of your document. For example, FAQ pages usually have all the questions at the top of the page and then the answers to these questions follow below.
A good way to create a link that would take your users to a specific spot of the same page is by creating anchor links. To do this, you must first create a bookmark using the “id” attribute.
For example, the answer to question number 10 is “10. Yes, we do handle that.”
Look at your source code, find that corresponding line and just add the bookmark like this:
<a id=”AnswerTen”>10. Yes, we do handle that.</a>
At the top of your page, create a link to that bookmark, i.e.:
<a href=”#AnswerTen”>Question 10: Do you handle HTML tutorials?</a>
On your page, Question 10 will be highlighted and when you click on it, it will take you directly to the bookmarked answer below. Do not forget to add the # sign before the bookmark name when linking.
Other considerations when creating links:
1. Take note that you can specify where a linked resource would be opened. It could be
- opened in the same page (default).
- opened in a new window, in which case you would need to add the target=”_blank” attribute to your link element.
If you are working with frames, there are also attributes that would allow you to specify on which frame the link would open.
- target=”_self” would open the link in the same frame where you clicked it.
- target=”_parent” would open the linked page in the parent frame.
- target=”_xyz” would open the linked page in the frame named “xyz”.
2. Using absolute or relative URLs.
Absolute URLs specify the full URL, i.e. http://www.you.com/me.html. This is usually used when you are linking to another Web site on another domain.
Relative URLs, on the other hand, will not have the domain part, but instead it will be written as me.html. This is usually used when you are linking to pages within your own domain.
Published on: Mar 03, 2021