HTML
JAVASCRIPT
CSS
PYTHON

HTML Links

HTML Links

HTML links are created using the <a> (anchor) tag. They allow you to navigate between pages, sections of a page, or even to external websites. Links are an essential part of the web.

The <a> tag in HTML stands for "anchor." It is used to create hyperlinks, allowing users to navigate to different web pages, sections within a page, email addresses, or other resources.

Basic Structure of an HTML Link

The <a> tag uses the href attribute to specify the URL or path to the destination.

Syntax:

  • href: Specifies the destination URL or path.
  • Link Text: The clickable text shown to the user.

Examples of HTML Links

          <a  href="https://topfreecourse.com/" >Visit TopFreeCourse</a>

Output:
Visit TopFreeCourse

Commonly Used Attributes

Here’s an example of an tag that includes all commonly used attributes:
  <a href="https://topfreecourse.com" 
    target="_blank" 
    rel="noopener noreferrer"                                                    
    title="Visit Example Website" 
    download="example-file.txt" 
    id="example-link" 
    class="link-class" 
    style="color: blue; text-decoration: none;"
    data-info="custom-data">
    Click Here to Visit TopFreeCourse
  </a>

Explanation of Attributes:

  • href: Specifies the URL of the link.

    • https://www.example.com: The destination of the link.

  • target: Specifies where to open the link.

    • _blank: Opens the link in a new tab or window.

  • rel: Specifies the relationship between the current page and the linked page.

    • noopener noreferrer: Improves security by preventing the new tab from accessing the original page.

  • title: Adds a tooltip text when you hover over the link.

    • "Visit Example Website": The tooltip text.

  • download: Suggests the file should be downloaded instead of navigating to the link.

    • "example-file.txt": Suggests a default file name when downloading.

  • id: Adds a unique identifier to the link for scripting or styling.

    • "example-link": The unique identifier.

  • class: Adds one or more CSS classes to the link for styling.

    • "link-class": A class name for CSS.

  • style: Adds inline CSS styles directly to the link.

    • color: blue; text-decoration: none;: Sets the text color and removes the underline.

  • Custom Attributes:

    • data-info: Custom data-* attributes can store extra data for JavaScript or styling.
    • "custom-data": Example of a custom attribute for additional information.
Previous Next