</Anchors and Hyperlinks. >

Anchors and Hyperlinks.

Parameter	Details
href	Specifies the destination address. It can be an absolute or relative URL, or the name of an anchor. An absolute URL is the complete URL of a website like https://www.thedeveloperbrains.com/. A relative URL points to absolute URL is the complete URL of a website like https://www.thedeveloperbrains.com/. A relative URL points to another directory and/or document inside the same website, e.g. /about-us/ points to the directory “about-us” inside the root directory (/). When pointing to another directory without explicitly specifying the document, web servers typically return the document “index.html” inside that directory.
hreflang	Specifies the language of the resource linked by the href attribute (which must be present with this one). Use language values from BCP 47 for HTML5 and RFC 1766 for HTML 4
rel	Specifies the relationship between the current document and the linked document. For HTML5, the values must be defined in the specification or registered in the Microformats wiki.
target	Specifies where to open the link, e.g. in a new tab or window. Possible values are _blank , _self, _parent, _top, and framename (deprecated). Forcing such behaviour is not recommended since it violates the control of the user over a website.
title	Specifies extra information about a link. The information is most often shown as a tooltip text when the cursor moves over the link. This attribute is not restricted to links, it can be used on almost all HTML tags.
download	Specifies that the target will be downloaded when a user clicks on the hyperlink. The value of the attribute will be the name of the downloaded file. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, etc.). If the value is omitted, the original filename is used.

Anchors and Hyperlinks in brief

Link to another site

This is the basic use of the <a> (anchor element) element:

It creates a hyperlink, to the URL http://thedeveloperbrains.com/ as specified by the href (hypertext reference) attribute, with the anchor text "Link to thedeveloperbrains.com". It would look something like the following:

				
				
		<a href="https://www.thedeveloperbrains.com/">Link to thedeveloperbrains.com</a>

Try it Yourself

Info :- The href Specifies the destination address (e.g :- https://www.thedeveloperbrains.com/ ) of Anchor .

To denote that this link leads to an external website, you can use the external link type:

				
				
		<a href="http://thedeveloperbrains.com/" rel="external" >example site</a>

You can link to a site that uses a protocol other than HTTP. For example, to link to an FTP site, you can do,

				
				
		<a href="ftp://thedeveloperbrains.com/">This could be a link to a FTP site</a>

In this case, the difference is that this anchor tag is requesting that the user's browser connect to example.com using the File Transfer Protocol (FTP) rather than the Hypertext Transfer Protocol (HTTP).

Link to an anchor( Used to jump to specific tags within webpage)

Anchors can be used to jump to specific tags on an HTML page. The <a> tag can point to any element that has an id attribute. To learn more about IDs, visit the documentation about Classes and IDs. Anchors are mostly used to jump to a subsection of a page and are used in conjunction with header tags.
the following:

Suppose you've created a page (page1.html) on many topics:
Once you have several sections, you may want to create a Table of Contents at the top of the page with quick-links (or bookmarks) to specific sections.
If you gave an id attribute to your topics, you could then link to them
Now you can use the anchor in your table of contents:
These anchors are also attached to the web page they're on (page1.html). So you can link across the site from one page to the other by referencing the page and anchor name.

				
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>anchor tag to link with in web page</title>
    <style>
        section {
            padding: 45px;
            text-align: center;
            border: 1px solid;
        }
        a {
            text-align: center;
            display: block;
            padding: 5px;
        }
        #another_sec{
            border: 1px solid;
            padding: 10px;
            margin: 10px ;
        }
    </style>
</head>

<body>
    <a href="#section-one">Click to jump on section one</a> <br>
    <a href="#section-two">Click to jump on section two</a> <br>
    <a href="#section-three">Click to jump on section three</a> <br>
    <a href="#section-four">Click to jump on section four</a>
    <a href="https://www.thedeveloperbrains.com/#what" id="another_sec">Click open new site and jump on what section </a>

    <section id="section-one">
        <h2>section one </h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat animi aspernatur veritatis magnam sequi fugit nihil laudantium quam magni maiores, doloribus velit qui, necessitatibus corporis porro obcaecati rerum ipsa recusandae. Ipsa illo quo veniam porro unde sequi. Eveniet aspernatur vitae quaerat in eius necessitatibus illum, optio! Nulla totam adipisci delectus earum, molestiae asperiores repellendus ab deserunt architecto veritatis maxime animi perferendis dignissimos quia ducimus dolores reprehenderit quis eligendi rerum tempore, ut sit itaque sapiente perspiciatis. Deserunt porro rerum vitae architecto maiores necessitatibus illum laboriosam nostrum. Sapiente, aperiam cupiditate vero fugit corrupti ad, officiis excepturi optio alias nobis obcaecati quo dolorem. ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, rerum doloribus cum ea deleniti illo obcaecati repudiandae culpa eveniet incidunt, quisquam sunt quo nobis temporibus possimus totam repellat, doloremque cupiditate minima quas qui praesentium tempore assumenda! Vel, sapiente sunt iste accusantium illo architecto dolorem soluta, harum laudantium ex dicta deleniti asperiores suscipit atque qui vero nisi repellat cum laborum in perferendis deserunt eum, explicabo nemo quae! Vitae distinctio fuga nisi? Reiciendis itaque laboriosam maxime inventore, ad a voluptates voluptatibus exercitationem facere quas. Id provident, voluptates reiciendis culpa libero ipsum debitis. Sequi odit adipisci culpa molestias quisquam perferendis autem soluta necessitatibus, recusandae qui aspernatur et vero quasi, nostrum, dicta doloremque quia! Illo non molestiae vitae inventore quidem harum distinctio dolorem voluptas accusantium, molestias vero sed porro pariatur iste, culpa eaque rem sequi autem. Earum accusamus accusantium magni, ratione itaque totam ut odit porro! Numquam explicabo, consectetur qui! Quibusdam inventore ab voluptatem perferendis et eaque in, deleniti nisi? Et est fugiat repellendus, velit autem aperiam neque. Quod repellendus voluptatem doloribus, deleniti. Assumenda quo recusandae doloremque dignissimos libero hic, maiores ut nihil, culpa nisi fugit perferendis. Sequi necessitatibus eaque esse cumque animi facere quia et, tempore ipsa quibusdam amet quo recusandae blanditiis explicabo?</p>
    </section>
    <section id="section-two">
        <h2>section two </h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde error, alias rerum voluptatem consectetur blanditiis laboriosam molestiae ad sequi asperiores similique doloremque tempore porro quo hic molestias amet, eveniet ipsam reprehenderit fugiat dignissimos earum. Commodi eaque, eius earum omnis labore. Quas sunt molestias corporis mollitia ipsa est nam quibusdam voluptate, vero possimus deleniti rem neque delectus totam minus id assumenda optio dolorum beatae eum esse error officiis. Pariatur laudantium, eum. Cum deserunt eligendi ab laudantium vel, neque soluta minima placeat? Excepturi sequi iure distinctio, possimus amet velit doloribus neque, tempora eveniet, harum fugit. Sunt iure commodi accusantium laudantium cumque perferendis. ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, rerum doloribus cum ea deleniti illo obcaecati repudiandae culpa eveniet incidunt, quisquam sunt quo nobis temporibus possimus totam repellat, doloremque cupiditate minima quas qui praesentium tempore assumenda! Vel, sapiente sunt iste accusantium illo architecto dolorem soluta, harum laudantium ex dicta deleniti asperiores suscipit atque qui vero nisi repellat cum laborum in perferendis deserunt eum, explicabo nemo quae! Vitae distinctio fuga nisi? Reiciendis itaque laboriosam maxime inventore, ad a voluptates voluptatibus exercitationem facere quas. Id provident, voluptates reiciendis culpa libero ipsum debitis. Sequi odit adipisci culpa molestias quisquam perferendis autem soluta necessitatibus, recusandae qui aspernatur et vero quasi, nostrum, dicta doloremque quia! Illo non molestiae vitae inventore quidem harum distinctio dolorem voluptas accusantium, molestias vero sed porro pariatur iste, culpa eaque rem sequi autem. Earum accusamus accusantium magni, ratione itaque totam ut odit porro! Numquam explicabo, consectetur qui! Quibusdam inventore ab voluptatem perferendis et eaque in, deleniti nisi? Et est fugiat repellendus, velit autem aperiam neque. Quod repellendus voluptatem doloribus, deleniti. Assumenda quo recusandae doloremque dignissimos libero hic, maiores ut nihil, culpa nisi fugit perferendis. Sequi necessitatibus eaque esse cumque animi facere quia et, tempore ipsa quibusdam amet quo recusandae blanditiis explicabo?</p>
    </section>
    <section id="section-three">
        <h2>section three </h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nostrum, neque nisi officiis ab id asperiores odit, architecto, dolorum eveniet pariatur laboriosam rem quia sint fuga quibusdam distinctio delectus sit quidem error. Tempore quidem atque aspernatur aut, quis laudantium ea, sit hic voluptatibus ullam necessitatibus pariatur ad, at autem est eaque quisquam adipisci recusandae et molestias. Magni beatae quas unde fugit magnam similique blanditiis esse inventore commodi recusandae dolorum obcaecati nostrum, quae tempora aliquam! Voluptatibus in doloribus, aperiam pariatur. Iusto praesentium aut sint ipsa necessitatibus doloremque iure deserunt non quo recusandae. Veniam illum saepe amet provident molestias, hic modi repudiandae. ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, rerum doloribus cum ea deleniti illo obcaecati repudiandae culpa eveniet incidunt, quisquam sunt quo nobis temporibus possimus totam repellat, doloremque cupiditate minima quas qui praesentium tempore assumenda! Vel, sapiente sunt iste accusantium illo architecto dolorem soluta, harum laudantium ex dicta deleniti asperiores suscipit atque qui vero nisi repellat cum laborum in perferendis deserunt eum, explicabo nemo quae! Vitae distinctio fuga nisi? Reiciendis itaque laboriosam maxime inventore, ad a voluptates voluptatibus exercitationem facere quas. Id provident, voluptates reiciendis culpa libero ipsum debitis. Sequi odit adipisci culpa molestias quisquam perferendis autem soluta necessitatibus, recusandae qui aspernatur et vero quasi, nostrum, dicta doloremque quia! Illo non molestiae vitae inventore quidem harum distinctio dolorem voluptas accusantium, molestias vero sed porro pariatur iste, culpa eaque rem sequi autem. Earum accusamus accusantium magni, ratione itaque totam ut odit porro! Numquam explicabo, consectetur qui! Quibusdam inventore ab voluptatem perferendis et eaque in, deleniti nisi? Et est fugiat repellendus, velit autem aperiam neque. Quod repellendus voluptatem doloribus, deleniti. Assumenda quo recusandae doloremque dignissimos libero hic, maiores ut nihil, culpa nisi fugit perferendis. Sequi necessitatibus eaque esse cumque animi facere quia et, tempore ipsa quibusdam amet quo recusandae blanditiis explicabo?</p>
    </section>
    <section id="section-four">
        <h2>section four </h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque officia magnam, iusto amet labore nemo distinctio, non, molestiae eaque dolorem nihil maiores soluta rem saepe repellendus assumenda aliquam aut? Minima minus, iure illo tempora fuga quos voluptate! Quam accusamus modi, earum ipsam error quas quo distinctio veniam qui minima sequi tenetur non officiis, placeat fugit ex illo ducimus aspernatur quibusdam corporis voluptas, corrupti vero. Eos maiores voluptatibus veritatis, similique omnis laborum repellendus? Sed ullam, laudantium porro, optio similique repellat expedita voluptatibus necessitatibus quos natus sunt vitae quibusdam soluta iusto. Itaque debitis cum voluptatibus dolor vitae illo ipsam, nemo aliquid exercitationem. ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, rerum doloribus cum ea deleniti illo obcaecati repudiandae culpa eveniet incidunt, quisquam sunt quo nobis temporibus possimus totam repellat, doloremque cupiditate minima quas qui praesentium tempore assumenda! Vel, sapiente sunt iste accusantium illo architecto dolorem soluta, harum laudantium ex dicta deleniti asperiores suscipit atque qui vero nisi repellat cum laborum in perferendis deserunt eum, explicabo nemo quae! Vitae distinctio fuga nisi? Reiciendis itaque laboriosam maxime inventore, ad a voluptates voluptatibus exercitationem facere quas. Id provident, voluptates reiciendis culpa libero ipsum debitis. Sequi odit adipisci culpa molestias quisquam perferendis autem soluta necessitatibus, recusandae qui aspernatur et vero quasi, nostrum, dicta doloremque quia! Illo non molestiae vitae inventore quidem harum distinctio dolorem voluptas accusantium, molestias vero sed porro pariatur iste, culpa eaque rem sequi autem. Earum accusamus accusantium magni, ratione itaque totam ut odit porro! Numquam explicabo, consectetur qui! Quibusdam inventore ab voluptatem perferendis et eaque in, deleniti nisi? Et est fugiat repellendus, velit autem aperiam neque. Quod repellendus voluptatem doloribus, deleniti. Assumenda quo recusandae doloremque dignissimos libero hic, maiores ut nihil, culpa nisi fugit perferendis. Sequi necessitatibus eaque esse cumque animi facere quia et, tempore ipsa quibusdam amet quo recusandae blanditiis explicabo?</p>
    </section>
</body>
</html>

Try it Yourself

Link to a page on the same site

You can use a relative path to link to pages on the same website

				
				
		<a href="/example">Text Here</a>

The above example would go to the file example at the root directory (/) of the server.

If this link was on http://example.com, the following two links would bring the user to the same location

				
				
		<a href="/page">Text Here</a>
<a href="http://example.com/page">Text Here</a>

Both of the above would go to the page file at the root directory of example.com.

Link that dials a number

If the value of the href-attribute begins with tel:, your device will dial the number when you click it. This works on mobile devices or on computers/tablets running software – like Skype or FaceTime – that can make phone calls

				
				
		<a href="tel:11234567890">Call us</a>

Try it Yourself

Info :- Most devices and programs will prompt the user in some way to confirm the number they are about to dial.

Open link in new tab/window

				
				
		<a href="example.com" target="_blank">Text Here</a>

The target attribute specifies where to open the link. By setting it to _blank, you tell the browser to open it in a new tab or window (per user preference)

SECURITY VULNERABILITY WARNING! :-

Using target="_blank" gives the opening site partial access to the window.opener object via JavaScript, which allows that page to then access and change the window.opener.location of your page and potentially redirect users to malware or phishing sites.

Whenever using this for pages you do not control, add rel="noopener"to your link to prevent the window.opener object from being sent with the request.

Currently, Firefox does not support noopener, so you will need to use rel="noopener noreferrer" for maximum effect.

Link that runs JavaScript

Simply use the javascript: protocol to run the text as JavaScript instead of opening it as a normal link:

				
<script>
    function myFunction(){ alert("this function is call by anchor tag"); }
</script>
		<a href="javascript:myFunction();">Run Code</a>

Try it Yourself

You can also achieve the same thing using the onclick attribute:

				
<script>
    function myFunction(){ alert("this function is call by anchor tag"); }
</script>
		<a href="#" onclick="myFunction(); return false;">Run Code</a>

Try it Yourself

The return false; is necessary to prevent your page from scrolling to the top when the link to # is clicked. Make sure to include all code you'd like to run before it, as returning will stop execution of further code

Note! :- Also noteworthy, you can include an exclamation mark ! after the hashtag in order to prevent the page from scrolling to the top. This works because any invalid slug will cause the link to not scroll anywhere on the page, because it couldn't locate the element it references (an element with id="!"). You could also just use any invalid slug (such as #scrollsNowhere) to achieve the same effect. In this case, return false is not required:

				
		<a href="#!" onclick="myFunction();">Run Code</a>

Should you be using any of this ? :- The answer is almost certainly no. Running JavaScript inline with the element like this is fairly bad practice. Consider using pure JavaScript solutions that look for the element in the page and bind a function to it instead. Listening for an event ,
Also consider whether this element is really a button instead of a link. If so, you should use <button>

Link that runs email client

Basic usage

If the value of the href-attribute begins with mailto: it will try to open an email client on click:

				
				<a href="mailto:support@thdeveloperbrains.com">Send email</a>

Try it Yourself

This will put the email address support@thdeveloperbrains.com as the recipient for the newly created email.

Cc and Bcc

You can also add addresses for cc- or bcc-recipients using the following syntax:

				
				<a href="mailto:support@thdeveloperbrains.com?cc=john@example.com&bcc=jane@example.com">Send email</a>

Try it Yourself

Subject and body text

You can populate the subject and body for the new email as well:

				
				<a href="mailto:support@thdeveloperbrains.com?subject=Example+subject&body=Message+text">Send email</a>

Try it Yourself

Those values must be URL encoded. click here to know more

Info :- Clicking on a link with mailto: will try to open the default email client specified by your operating system or it will ask you to choose what client you want to use. Not all options specified after the recipient's address are supported in all email clients

Link that Download file

download attribute sets the target to be downloaded instead of opened in the browser.

				
				<a href="https://www.thedeveloperbrains.com/img/logos/logo.png" download>Download image</a>

Try it Yourself

HTML Anchors and Hyperlinks

</HTML Anchors and Hyperlinks>