HTML – LINKS
HTML Links are widely used tags in the web-documents. Links are used to loading an external file or make a connection with other documents. Linking also used to provide a quick jump over document blocks and over web-pages.
Below is an example of an anchor tag.
Example <a href="#">Click On Me</a>
There are different ways to use a single link tag in an Html document. Like anchor tag can be used for:
- Linking any document file like – pdf file, word file, etc.
- Direct jump to any page.
- Pagination of your web page.
- Used in navigation.
- Bookmark to the same page or different page.
- Hyperlink any media file and enable it to download.
There is another Linking tag used for including the external source files that is Link tag. The Link tag is used inside the head section and it basically embeds/includes the external source files to the current web document.
Below is an example of the link tag.
Example <head> <link rel="stylesheet" href="style.css"> </head>
Most of the time the link tag is used for linking style sheets for every single web page. Here the styles.css is the stylesheet that is used for making any document better in look and style the element that will make the page more attractive and clean.
Attributes and Examples of Anchor Tag.
Attributes provide some additional information and functionality to the element.
To know more about attributes Click here Html – Attributes.
Herf, name, target, id, class, title are the basic attributes used in this tag.
Herf is used for hyperlinking/URL, the target is used for a landing page or where the document will open.
The name attribute is used for naming the anchor link for jumping over document sections.
The Id attribute is a global attribute used as a selector for styling and scripting.
To know more about global attribute – id, class, and title chick here Html Global Attributes.
Examples of Anchor Tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI Html Tutorials</title>
</head>
<body>
<h1>Html Anchor Tag Example</h1>
<a href="page_2.html">Go to page 2</a>
</body>
</html>
Here Go to page 2 will become a hyperlink and it is a link to land on a file placed in the same folder with the name “page_2.html”.
The anchor tag is an unpaired tag and content which is placed inside starting and closing tag will work as a hyperlink.
Below is an example of making other content a hyperlink.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI Html Tutorials</title>
</head>
<body>
<h1>Html Anchor Tag Example</h1>
<!---link to a single page placed in the same directory--->
<a href="page_2.html" name="top">Go to page 2</a>
<br>
<a href="page_2.html">Go to top</a>
<br>
<!---link to a single page after click the page will open in the new tab of the browser--->
<a href="page_2.html" target="_blank">Go to page 2</a>
</body>
</html>
Image Link
For linking an image or using an image as a hyperlink, then the image tag will be used between anchor tags.
Below is an example of an image link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI Html Tutorials</title>
</head>
<body>
<h1>Html Anchor Tag Example</h1>
<!---image link--->
<a href="new_page.html" target="_blank">
<img src="image_file.jpg" alt="Image" width="100px" height="100px">
</a>
</body>
</html>
Jump Over a Section(Internal linking)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI Html Tutorials</title>
</head>
<body>
<h1>Html Anchor Tag Example</h1>
<!---jump over section internal links--->
<h1 id="menu">Menu</h1>
<a href="#section_1">Go to Section 1</a>
<p>
Place the link with herf in anchor tag and used # for id.
</p>
<p>
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
</p>
<p>Here is the link of bottom id and use this example with more content.</p>
<a id="section_1">section_1</a>
<hr>
<a href="#section_2">Go to Section 2</a>
<p>
Place the link with herf in anchor tag and used # for id.
</p>
<p>
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
Dummy text or dummy content.
</p>
<p>Here is the link of bottom id and use this example with more content.</p>
<div id="section_2">
<p>
any element with id can be a jump link. like div, a, p, h, table, etc.
</p>
</div>
<hr>
<a href="#menu">Go to Menu</a>
</body>
</html>
Link to Jump on Other Page(External Linking)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI Html Tutorials</title>
</head>
<body>
<h1>Html Anchor Tag Example</h1>
<!---jump over section external links--->
<p>
Place the link/url with #id of the element/section in href attribute in anchor tag and set target.
</p>
<a href="url/path_of_the_external_file.html#id">GO TO Next Page Section</a>
<br>
<a href="file.html#about_us">GO TO About Us Section</a>
</body>
</html>
Same or Other Directory Link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI Html Tutorials</title>
</head>
<body>
<h1>Html Anchor Tag Example</h1>
<!---same or other directory path--->
<p>
Links can be set for same directory and can be set for different directory to make a hyperlink.
basically it is used for linking file or documents.
</p>
<p>For same directory</p>
<br>
<a href="url or file_name"> any text</a>
<br>
<p>For sub directory</p>
<br>
<a href="dir_name/url or file_name"> any text</a>
<br>
<p>For outter directory or going back from one directory</p>
<br>
<a href="../url or file_name"> any text</a>
<br>
<p>For 2 outter directory or going back from two directory</p>
<br>
<a href="../../url or file_name"> any text</a>
<br>
<p>For outter directory and inner directory</p>
<br>
<a href="../dir_name/url or file_name"> any text</a>
<br>
</body>
</html>
Link Tag Example
The link tag is mostly used inside the head section of the Html document and it is as a source link to insert CSS external file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI Html Tutorials</title>
<!--link tag examples-->
<link rel="stylesheet" href="style.css">
<link rel="manifest" href="manifest.json">
</head>
<body>
</body>
</html>
Mailto Link
Mailto Link is used for sending an email from the client-side via the client’s email application. The “mailto” function is set up with some parameters like the address of the receiver, cc, bcc, subject, body text.
Below is an example of mailto function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI Html Tutorials</title>
</head>
<body>
<!--mailto function used as a link -->
<p>Sending a test mail to [email protected] by using mailto function </p>
<a href="mailto:[email protected][email protected]&[email protected]&subject=Test Message&body=This is a Test Message">
Click Here To Open Your Default Mail Application Software </a>
</body>
</html>