HTML Links (Hyperlinks)

0

In HTML, links are created using the <a> (anchor) tag. This tag is used to define a hyperlink, which allows users to navigate to another webpage or a different location within the same page.

Basic Syntax:

<a href="URL">Link Text</a>
  • <a> is the tag that defines the link.
  • href (hyperlink reference) is an attribute that specifies the destination URL. It tells the browser where the link should point to.
  • “Link Text” is the clickable text that appears on the page.

Example:

<a href="https://www.example.com">Visit Example Website</a>

In this example, the link text “Visit Example Website” will take you to https://www.example.com when clicked.

Types of Links:

  1. External Link: A link that points to a different website. 
    <a href="https://www.google.com">Go to Google</a>
  2. Internal Link: A link that points to a page within the same website. 
    <a href="/about.html">About Us</a>
  3. Anchor Link (Same Page Navigation): A link that jumps to a specific section of the same page.
    • First, create an anchor (using an ID): 
      <div id="section1">This is section 1</div>
    • Then link to it: 
      <a href="#section1">Go to Section 1</a>
  4. Mailto Link: A link that opens the default email client to send an email. 
    <a href="mailto:example@example.com">Send Email</a>

Opening Links in a New Tab:

To make a link open in a new tab or window, you can use the target="_blank" attribute.

<a href="https://www.example.com" target="_blank">Open in New Tab</a>

Adding a Title Attribute:

You can also add a title attribute to provide additional information when a user hovers over the link.

<a href="https://www.example.com" title="Click to visit Example">Visit Example Website</a>

Links with Images:

You can create links that use an image as the clickable element. The image tag (<img>) can be placed inside the <a> tag.

<a href="https://www.example.com">
  <img src="logo.png" alt="Example Logo">
</a>

These are the basics of HTML links. There are more advanced ways to work with links, but this should cover the fundamental uses!