Links and Anchor Tags

HTML Links and Anchor Tags

HTML Links and Anchor Tags

Creating hyperlinks with <a>

By using the <a> (anchor) tag/element throughout the HTML web creation process, basic HTML web page hyperlinks may be created. A web page’s hyperlink text might connect many items on the same page (an anchor link), to distinct resources (such a user’s email address or a download file location), or to other web pages. used to build internal linkages.

Links and Anchor Tags

You utilize the HTML tag/element <a> to insert a hyperlink into any HTML web page.

Linking to a different website’s page.

To establish a hyperlink to your current HTML web page to another online page, you utilize the href link property of the <a> element that ties the source web page content to the destination web page URL.

Here is an easy illustration.

<a href=”https://www.vcanhelpsu.com”>Explore our website</a>

The text “https://vcanhelpsu.com” in this example is a hyperlink leading to the website’s main page. This will take the user to the “https://vcanhelpsu.com” website when clicked by the web user.

Linking directly to an email address.

Use the email HTML link tag to insert a hyperlink to an email address in an HTML web page. It launches the email client software that is already installed on your computer and allows you to send emails from the website client to a certain email address. The mailto: tag in the html href attribute can be used to link a straightforward email address.

Here is an easy illustration.

<a href=”mailto:Vcanhelpsu@Gmail.Com”>E-mail-us </a>

The “E-mail-us” link in this example will prompt the user’s email program to establish an empty email for this website with the email address “Vcanhelpsu@Gmail.Com.”

Linking to any downloaded files.

If you want any file on your website or web page to be downloaded by a web user or random client. Consequently, you must generate a file download link. By providing the file’s URL file storage web address in the href attributes in HTML, you may construct several hyperlink links to download files from this page. You may, for instance, attach a download link to a PDF file with the name “syllabus.pdf” that is located in the same directories as the HTML page on your current web hosting server.

<a href=”syllabus.pdf”>Download Latest Syllabus</a>

Html Example

<!DOCTYPE html>

<html>

  <head>

    <title>A href Link tag example </title>

    <link rel=”stylesheet” href=”styles.css” />

  </head>

  <body>

      <h1 class=”title”>Hello World! </h1>

      <h1>Linking to another web page on a website. </h1>

      <ol></ol><li></li><a href=”https://www.vcanhelpsu.com”>Explore our website</a></li>

      <li></li><a href=”https://www.google.com”>Explore Google website</a></li></ol>

      <h1>Linking directly to an email address. </h1>

      <ul><li><a href=”mailto:Vcanhelpsu@Gmail.Com”>E-mail-us</a></li>

      <li><a href=”mailto:mitteam2021@gmail.com”>E-mail-us </a></li></ul>

      <h1>Linking to any downloaded files</h1>

      <a href=”syllabus.pdf”>Download Latest Syllabus</a>

      <script src=”script.js”></script>

  </body>

</html>

Linking to external websites and internal pages

If you plan to build these links for your website or web page. which, although not your website, are connected to both internal pages from any page of your own website and external websites owned by any other user or business. With the suitable external website URL for an external link to one of your websites or web pages and the equivalent URL for an acceptable internal connection to your website, you may use the HTML <a> (anchor) tag/element.

How to link your website to an external website is provided here.

linking to any other external websites from your website.

The whole URL address of the other page must be provided using the href attributes with the <a> html tag in order to build a hyperlink to another external website.

Here is an illustration of a link to an external website.

<a href=”https://vcanhelpsu.com”>Let’s open vcanhelpsu.com website</a>

The phrase “Let’s open vcanhelpsu.com website” in this case will be a clickable link. This, when clicked, directs them to the website “https://vcanhelpsu.com”.

establishing a relative URL link from your website to a page within your company.

If you wish to link to an internal website page or a page in a subdirectory on your own website. In your website, you can utilize related website URLs. Relative web page URLs define the route from the present position of your web page to a target web page or web page resources.

Here are a few illustrations for you.

In the same directory, include a link to a web page.

<a href=”about.html”>Go to about page</a>

Link to a page in a subdirectory storage location.

<a href=”subdirectory/course.html”>Go to course Page</a>

Immediate Link or jump to the website’s home page.

<a href=”/”>Home</a>

Html Example.

<!DOCTYPE html>

<html>

  <head>

    <title>External Links</title>

    <link rel=”stylesheet” href=”styles.css” />

  </head>

  <body>

      <h1 class=”title”>Linking to external websites and internal pages </h1>

      <h2>Here is an example of an external website link.</h2>

      <ol></ol><li></li><a href=”https://vcanhelpsu.com”>Let’s open vcanhelpsu.com website</a></li>

      <li></li><a href=”https://www.google.com”>Explore Google website</a></li></ol>

      <h2>Link to a web page in the same directory.</h2>

      <a href=”about.html”>Go to about page</a>

    <h2>Link to a page in a subdirectory storage location.</h2>

      <a href=”subdirectory/course.html”>Go to course Page</a>

       <h2>Immediate Link or jump to the website’s home page.</h2>

      <a href=”/”>Home</a>

      <script src=”script.js”></script>

  </body>

</html>

Linking to email addresses and phone numbers

To make it simpler for Internet users to send emails or provide a phone call to the connected website, you may build a hyperlink to any HTML web page or website for email addresses and phone numbers throughout the HTML web construction process.

if you want to connect phone and email addresses on a website. So, follow to the guidelines listed below.

creating a mailto: link from an HTML website to an email address.

in order to connect to any html web page. It launches the user’s default email client and displays an email address that has already been corrected. For an email link, you put mailto: in the href attribute of an HTML a> tag.

Here is an easy illustration.

<a href=”mailto:Vcanhelpsu@Gmail.Com”>E-mail Us</a>

In this case, clicking the “E-mail Us” link will launch the user’s email application and automatically complete the “To” field with the email address “Vcanhelpsu@Gmail.Com”.

Linking a phone number to an HTML web page.

Based on your needs, you construct a phone number hyperlink. This, when clicked, enables users to start a phone conversation using a suitable desktop or laptop programmes or on a mobile device.

Any html page can utilize the tel: tag or element in the href attribute here.

Here is an easy illustration.

<a href=”tel:+0123456789″>You Can Call us</a>

Html Example.

<!DOCTYPE html>

<html>

  <head>

    <title>External Links</title>

    <link rel=”stylesheet” href=”styles.css” />

  </head>

  <body>

   <h2>Linking an html webpage to an email address (using mailto:).</h2>

      <a href=”mailto:Vcanhelpsu@Gmail.Com”>E-mail Us</a>

    <h2>Linking an html web page to phone numbers.</h2>

      <a href=”tel:+0123456789″>You Can Call us</a>

  </body>

</html>

Rate this post

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top