HTML
JAVASCRIPT
CSS
PYTHON
SQL
JAVA
GO
REACT
NODEJS
AWS
GENERATIVE AI
AI
GIT
SWIFT
KOTLIN
TYPESCRIPT
ANGULAR
BLOCKCHAIN
CYBERSECURITY
MACHINE LEARNING
C
C PLUS
QUANTUM COMPUTING
DSA
AGENTIC AI
AZURE
GCP
VUE JS
POSTGRESQL
DJANGO

HTML Links

HTML Links

HTML links are created using the <a> (anchor) tag. Links enable navigation to other pages, sections, or external sites, forming a crucial component of the web.

The <a> tag in HTML, known as "anchor," creates hyperlinks that enable users to access different pages, sections, or external 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: defines the relationship between the current and linked pages.

    • 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.

Prefer Learning by Watching?

Watch these YouTube tutorials to understand HTML Tutorial visually:

What You'll Learn:
  • 📌 Learn HTML Hyperlinks
  • 📌 HTML Anchor Tag | How to Link to a Section of the Page
Previous Next