Hyperlinks (<a>) html tag
To create text, images, audio, video, email, web pages, sections, phone numbers, same page links, relative and absolute web page links, etc. and any other type of web page hyperlink text information in an HTML web page, you use the hyperlink <a> anchor tag in the HTML web page. In common language, hyperlink means that when you click on any link or object in an existing HTML web page, the source hyperlink location moves the web user immediately to the destination source hyperlink location.
Basic structure of hyperlink <a> tag in HTML web page.
If you want to create hyperlink text information in an HTML web page, then you can create hyperlink text information with the help of HTML web page <a> anchor tag.
HTML web page hyperlink basic syntax.
Feature of anchor, hyperlink tag in HTML web page.
- href – Defines the web site page or website address location in an HTML web page. Here href link adds the website or web page location for the link, where the created link opens the web URL source link.
- target – Indicates the hyperlink link location, where and how to click to open the linked website URL document object. All these properties are configured in the target hyperlink properties.
Common anchor tag properties are.
- _self (default) – Opens the access link in the current web page in the same web page frame or web browser tab.
- _blank – Immediately opens the link in the default blank page new tab or blank window of the opened web page.
- _parent – Opens the developed hyperlink text object in the created web page in the parent frame window.
- _top – Opens the user created hyperlink text or object in a fullscreen window.
Basic hyperlink link example.
<a href=”https://www.vcanhelpsu.com” target=”_blank”>Open Link in Default New Browser Tab</a>
<a href=”https://vcanhelpsu.com”>click to open url</a>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Simple Hyperlink Tag</title>
</head>
<body>
<p><b>Vcanhelpsu Website Simple Hyperlink</b></p>
<p><a href=”https://www.vcanhelpsu.com”>Open Vcanhelpsu Website</a></p>
</body>
</html>
title – An additional tooltip provides web page link information to the web user about the created hyperlink, it is used as a tooltip. When the internet surfer hovers over the link with his mouse. So this tooltip displays title information about that link.
html web page title tooltip example.
<a href=”https://www.vcanhelpsu.com” title=”open vcanhelpsu”>it move you vcanhelpsu url</a>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Hyperlink Tooltip Tag</title>
</head>
<body>
<p><b>Title Tooltip Properties</b></p>
<p><a href=”https://www.vcanhelpsu.com” title=”Open Vcanhelpsu”>Open Vcanhelpsu With title Properties</a></p>
</body>
</html>
rel – Relative hyperlink establishes a relationship between the current document and the linked URL document in the anchor tag. For example, rel=”noopener noreferrer” text is safe to open hyperlinks with target=”_blank” to improve security purpose.
Relative and blank title properties example in html web page.
<a href=”https://www.vcanhelpsu.com” target=”_blank” rel=”noopener noreferrer”>open vcanhelpsu url</a>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Hyperlink Rel Attribute Properties</title>
</head>
<body>
<p><b>Relative Hyperlink Properties</b></p>
<p><a href=”https://www.vcanhelpsu.com” rel=”noopener noreferrer” target=”_blank”>Open Vcanhelpsu Wirh Rel Attributes</a></p>
</body>
</html>
Hyperlinking to sections within the same HTML web page.
You can create more than one hyperlink to a specific paragraph text section within your current web page by using hyperlink id attributes on the target link element in your HTML web page.
<!– Target section link –>
<h2 id=”about html”>about html</h2>
<!– Link to the section –>
<a href=”#what is html”>Go to html Section </a>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Webpage Internal Link Tag</title>
</head>
<body>
<p><a href=”#html”>Move To Html Link Section</a></p>
<p><a href=”#Css”>Move To Css Link Section</a></p>
<h1>Paragraph First</h1>
<p>Css Used To Highly Customized Web Pages</p>
<h1 id=”html”>Hyper Text Markup Language</h1>
<p>Paragraph Second</p>
<h1 id=”Css”>Css -Csscading Style Sheet</h1>
</body>
</html>
Linking to email addresses in an HTML web page.
If you want to create a link to an email address anywhere on your web page, then you can create an email address link in the HTML web page by linking the email address to the proper text information.
<a href=”mailto:vcanhelps@gmail.com”>email to vcanhelpsu</a>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Email Link Tag</title>
</head>
<body>
<p><b>Email Hyperlink</b></p>
<p> <a href=”mailto:vcanhelpsu@gmail.com”>Contact Vcanhelpsu</a></p>
</body>
</html>
Html Title Tooltip Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Hyperlink Tooltip Tag</title>
</head>
<body>
<p><b>Title Tooltip Properties</b></p>
<p><a href=”https://www.vcanhelpsu.com” title=”Open Vcanhelpsu”>Open Vcanhelpsu With title Properties</a></p>
</body>
</html>
Creating a hyperlink from a phone number to a web page.
To create a telephone hyperlink in your HTML web page, follow the proper telephone hyperlink syntax given below.
<a href=”tel:+0121131314151″>Landline contact</a>
Email Hyperlink.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Telephone Hyperlink Tag</title>
</head>
<body>
<p><b>Vcanhelpsu Website Simple Hyperlink</b></p>
<p><a href=”tel:+0121131314151″>Landline contact</a></p>
</body>
</html>
Creating a file folder download link in a website.
If you want to create a file download link in an HTML web page, you can download the files in the client web browser by adding the proper server download path.
<a href=”path/to/movie.mkv” download>Download movie File</a>
HTML Web Page Multiple Hyperlink Overview.
Basic Link Example.
<a href=”https://www.google.com”>open google</a>
Link URL link with a tooltip in an HTML web page.
<a href=”https://www.vcanhelpsu.com” title=”it move you on vcanhelpsu”>open vcanhelpsu</a>
Create open link in new tab in HTML web page.
<a href=”https://www.vcanhelpsu.com” target=”_blank” rel=”noopener noreferrer”>open website in new blank tab</a>
Create link to section on same page in HTML web page.
<a href=”#html”>move to html Section </a>
Create email link in HTML web page.
<a href=”mailto:vcanhelpsu@yahoo.com”>contact us</a>
Create phone link in HTML web page.
<a href=”tel:+1987654321″>Phone Us</a>
Create file download link in HTML web page.
<a href=”files/audio.mp3″ download>Download audio file</a>
