HTML Links - Hyperlinks
An HTML link is referred as Hyperlink that takes you to other document or web page. A normal web page can contains one or more links that enable the capability to jump to another webpage in same website or other website.
HTML links are Hyperlinks. Normally when move mouse over Hyperlink text then the mouse pointer turn into a little hand. A link does not necessary to be text only; it can be images or other HTML Elements. HTML links can be created using anchors elements.
Hyperlink Element <a>
An HTML link can be defined on webpage with <a> tag which is called Anchor Element or Anchor tag or link tag. <a> is opening tag and </a> is closing tag. Between opening and closing tags text, image or HTML elements can be defined and they becomes the part of the Clickable Hyperlink. Text between anchor tags is called anchor text. The link is visible part that allow to let you go through the specified destination by clicking on it. Normally <a> tag is used along with three attributes.
1. Href attribute: Href attribute specifies destination address of a link. It is used inside the opening tag. Without Href attribute <a> tag doesn’t appear and act like Hyperlink. Destination address can be URL of Same website, other websites, web pages, web page sections, emails or other documents.
2. Target attribute: The target attribute determine that where to open the linked document. It can be in same window or tab or can be in new window or tab. It is an optional choice but using this attribute is the best practice.
3. Title attribute: title attribute also is an optional choice. By using this attribute you can allow the readers to have a title of the content that will be open after clicking the link.
HTML Link Syntax
This is how HTML link is defined on a web page. We use <a> anchor element to make an anchor on a web page. Below is the syntax.
Example - 1
<a href = "url" target = "" title = "">text</a>
<a href = "url" target = "" title = ""><img src = "image_URL"></a>
“href” attribute is also used in link element to define CSS link tag. Link element is defined in the <head> section. You study more about <head> in HTML5 Tutorial - HTML Meta
Hyperlink Element <a> can be nested
HTML links can be nested both ways. HTML Element can be nested inside the anchor tags and anchor tags can be nested inside other elements. Empty element can be nested only inside the anchor elements.
Example - 2
<a href = "https://www.progrramers.com">progrramers</a>
<ul>
<li><a href = "https://www.progrramers.com/search/label/HTML5%20Tutorial">HTML5 Tutorial</a></li>
<li><a href = "https://www.progrramers.com/search/label/PHP%20Tutorial">PHP5 Tutorial</a></li>
</ul>
Target and Title attributes
Target attribute can have one of the following different values.
1. _blank - Opens the linked document in a new window or tab
2. _self - Opens the linked document in the same window/tab as it was clicked (this is default)
3. _parent - Opens the linked document in the parent frame
4. _top - Opens the linked document in the full body of the window
5. framename - Opens the linked document in a named frame
This is how Target attribute can be used. Target attribute determines that where to open the linked document.
Example - 3
<p>Opens progrramers web page in a new window or tab
<a href = "https://www.progrramers.com" target = "_blank">progrramers</a>
</p>
<p>Opens progrramers web page in a same window or tab
<a href = "https://www.progrramers.com" target = "_self">progrramers</a>
</p>
<p>Opens progrramers web page in a parent frame
<a href = "https://www.progrramers.com" target = "_parent">progrramers</a>
</p>
<p>Opens progrramers web page in the full body of the window
<a href = "https://www.progrramers.com" target = "_top">progrramers</a>
</p>
When move the mouse pointer over the link then it show the title of the link.
Color of Links
By default, a link will appear like this (in all browsers):
1. An unvisited link is underlined and blue
2. A visited link is underlined and purple
3. An active link is underlined and red
You can change the default colors by CSS and you can also set colors of links, active links and visited links using ‘link’, ‘alink’ and ‘vlink’ attributes respectively of <body> tag.
Example - 4
<body alink = "#FF0000" link = "#0000FF" vlink = "#00FF00">
<p>Click the link</p>
<a href = "https://www.progrramers.com" target = "_blank" >HTML Tutorial</a>
</body>
Example - 5
<style>
a:link{
color:#FF0000;
}
a:visited{
color:#00FF00;
}
a:active{
color:#FF0000;
}
</style>
<p>Click the link</p>
<a href = "https://www.progrramers.com" target = "_blank" >HTML Tutorial</a>
Try this example into your html editor.
Using Image as Link
<img> is an empty element and it can be nested inside the anchor <a> element. When an image is nested inside anchor element then image becomes a Hyperlink. In below example you can see how image become a Hyperlink.Example - 6
<p>Click on the Image</p>
<a href = "https://www.progrramers.com"><img = "/html/Tutorials.jpg" alt = "HTML Tutorials"></a>
Use of File Path
An HTML link can be specified with Absolute path and Relative path. You can study more about HTML file path in HTML5 Tutorial - HTML File Path chapter.
Example - 7
<p>This is an example of Relative Path</p>
<a href = "2017/12/html5-tutorial-html-images.html">Progrramers - HTML5 Tutorials</a>
Example - 8
<p>This is an example of Absolute Path</p>
<a href = "https://www.progrramers.com/2017/12/html5-tutorial-html-images.html">Progrramers - HTML5 Tutorials</a>
Use of Base path
When you link HTML documents related to the same website, it is not required to give a complete URL for every link. Like showing below Example:
Example - 9
<!DOCTYPE html>
<html>
<head>
<title>Progrramers - Normal Hyperlink Example</title>
</head>
<body>
<p>Click to following link</p>
<a href = "https://www.progrramers.com/index.html" target = "_blank">HTML Tutorial</a>
</body>
</html>
You can get rid of it by using <base>tag in HTML document header. This tag is used to give a base path for all the links. So browser will concatenate given relative path to this base path and will make a complete URL like absolute path.
Example - 10
<!DOCTYPE html>
<html>
<head>
<title>Progrramers - Base Hyperlink Example</title>
<base href = "https://www.progrramers.com/">
</head>
<body>
<p>Click to following link</p>
<a href = "/index.html" target = "_blank">HTML Tutorial</a>
</body>
</html>
HTML links – How to create Anchor Bookmark
Anchor Bookmark can be very useful for very long webpage. HTML anchor bookmarks are used to allow readers to jump one section to another section of a webpage.
To create Anchor Bookmarks we need to create a bookmark first and then add a link to it. When Anchor Bookmark is click then by default page is scrolled to the location linked with the bookmark.
Example - 11
<h2 id = "ch-3">Let's Start Java Script Tutorials</h2>
Example - 12
<ol>
<li><a href = "#ch-1">HTML Tutorials</a></li>
<li><a href = "#ch-2">CSS Tutorials </a></li>
<li><a href = "#ch-3">Java Script Tutorials 1</a></li>
<li><a href = "#ch-4">SQL Tutorials</a></li>
<ol>
Download Link
To create any downloadable link on webpage simply you need to define absolute path of any downloadable file. You can create text link to make your PDF, or DOC or ZIP files downloadable. See the example.
Example - 13
<p>Click to Download the file</p>
<a href = "https://www.progrramers.com/store/file/html.pdf">HTML Tutorials PDF</a>
Email Link
To send an email we have to write the email id, subject and main content which are called message body. Email Links are use to allow webpage reader and visitors to send emails directly without doing so many things. If you predefined the id, subject and body then user have to only click that link to send an email to you. In below example you can find the syntax that how to create an Email Link.
Example - 14
<a href = "mailto: xyz@example.com">Send Email</a>
Example - 15
<a href = "mailto: xyz@example.com?subject = Your_Subject&body = Your_Message">
Send Email
</a>
But before reaching the end of this long chapter one more thing which needs to be cleared essentially that creating the email link on your website can let you unnecessarily drag into spamming problem. There are so many people around the World Wide Web who can harvest your email Id to use them latter for spamming.
Post A Comment:
0 comments: