HTML 8 💻 Comments and anchor element in HTML - KandZ

Comments and hyperlinks are fundamental to creating well-documented and navigable web pages.

HTML Comments

Comments are used to add notes, explanations, or temporarily disable code without affecting the displayed content.

Syntax:

<!-- This is a comment -->
<p>This is some text</p>

<!--
<p>This text is commented out and will not display</p>
-->

Browser Display:
This is some text

Key Points:

Comments are not displayed in the browser
They improve code readability by explaining what different parts do
Can be used to leave notes for yourself or other developers
Temporarily disable code without deleting it
Helpful for debugging and testing

Examples:

<!-- TODO: Add a navigation menu here -->
<!-- This section contains the main article -->
<article>
  <h2>About Us</h2>
  <p>Our company was founded in 2010...</p>
</article>

<!-- 
  Multi-line comment explaining complex logic
  This section handles user authentication
  Last updated: January 2024
-->
<div class="login-form">
  <!-- Login form content -->
</div>

The Anchor Element `<a>`

The <a> (anchor) element creates hyperlinks that allow users to navigate to other webpages, websites, or resources.

Basic Syntax:

<a href="https://www.google.com">Click here to visit Google</a>

Browser Display:
Click here to visit Google (rendered as a clickable link)

Attributes:

Attribute	Purpose	Example
`href`	Specifies the destination URL or resource	`href="https://example.com"`
`target`	Defines where to open the link	`target="_blank"`
`title`	Provides additional information (tooltip)	`title="Opens Google in a new tab"`

Understanding URLs in `href`

Absolute URL:

Links to an external website using the full web address.

<a href="https://www.google.com">Visit Google</a>

Relative URL:

Links to a page within the same website.

<a href="7.html">Lesson 7</a>
<a href="pages/about.html">About Us</a>
<a href="../index.html">Home</a>

Email Link:

Opens the user’s default email client.

<a href="mailto:me@example.com">Send email to me</a>
<a title="Send email to me" href="mailto:me@example.com">Send email</a>

Telephone Link:

Opens the user’s default phone app (mainly for mobile).

<a href="tel:+1234567890">Call us</a>

The `target` Attribute

The target attribute specifies where the linked document will open.

Value	Description
`_self`	Opens in the same tab/window (default)
`_blank`	Opens in a new tab/window
`_parent`	Opens in the parent frame
`_top`	Opens in the full body of the window

Examples:

<!-- Opens in the same tab (default) -->
<a href="7.html">Lesson 7</a>

<!-- Opens in a new tab -->
<a href="7.html" target="_blank">Lesson in a new tab/window</a>

<!-- Opens Google in a new tab -->
<a href="https://www.google.com" target="_blank">Search Google</a>

Links with Images

You can wrap an image inside an anchor to make the image clickable.

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

Link States (CSS)

Links have different states that can be styled:

State	Description
`:link`	Unvisited link
`:visited`	Visited link
`:hover`	Mouse hover over link
`:active`	Clicking on link

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comments and Anchor Elements</title>
</head>
<body>

    <h1>Comments and Hyperlinks</h1>

    <!-- ====== SECTION 1: BASIC LINKS ====== -->
    <h2>1. Basic Links</h2>

    <!-- External link -->
    <p><a href="https://www.google.com">Visit Google</a></p>

    <!-- Relative link within the same site -->
    <p><a href="7.html">Go to Lesson 7</a></p>

    <!-- Link with title attribute for tooltip -->
    <p>
        <a href="https://www.wikipedia.org" title="Wikipedia - The Free Encyclopedia">
            Visit Wikipedia
        </a>
    </p>

    <hr>

    <!-- ====== SECTION 2: TARGET ATTRIBUTE ====== -->
    <h2>2. Target Attribute</h2>

    <!-- Opens in the same tab -->
    <p><a href="https://www.example.com" target="_self">Open in same tab</a></p>

    <!-- Opens in a new tab -->
    <p><a href="https://www.example.com" target="_blank">Open in new tab</a></p>

    <hr>

    <!-- ====== SECTION 3: EMAIL AND PHONE LINKS ====== -->
    <h2>3. Email and Phone Links</h2>

    <!-- Email link -->
    <p><a href="mailto:info@example.com">Send us an email</a></p>

    <!-- Email with subject -->
    <p>
        <a href="mailto:info@example.com?subject=Inquiry%20About%20Services">
            Email with subject
        </a>
    </p>

    <!-- Phone link -->
    <p><a href="tel:+1234567890">Call us: (123) 456-7890</a></p>

    <hr>

    <!-- ====== SECTION 4: IMAGES AS LINKS ====== -->
    <h2>4. Image as a Link</h2>

    <a href="https://www.example.com" target="_blank">
        <img src="https://via.placeholder.com/200x100/007bff/ffffff?text=Click+Me" 
             alt="Click to visit example.com">
    </a>

    <hr>

    <!-- ====== SECTION 5: NAVIGATION MENU ====== -->
    <h2>5. Navigation Menu</h2>

    <nav>
        <!-- TODO: Add styling to make this look like a real menu -->
        <a href="index.html">Home</a> |
        <a href="about.html">About</a> |
        <a href="services.html">Services</a> |
        <a href="contact.html">Contact</a>
    </nav>

    <hr>

    <!-- ====== SECTION 6: COMMENTS IN ACTION ====== -->
    <h2>6. Debugging with Comments</h2>

    <!-- This link is temporarily disabled -->
    <!-- <p><a href="new-page.html">New Page (coming soon)</a></p> -->

    <p><a href="current-page.html">Current Page</a></p>

    <!-- 
    ======================================================
    NOTES:
    - The link above was disabled because the page isn't ready
    - Will be enabled in the next release
    - Created by: Development Team
    - Date: January 2024
    ======================================================
    -->

</body>
</html>

Quick Reference

Element/Attribute	Purpose	Example
`<!-- -->`	Comment	`<!-- This is a comment -->`
`<a>`	Anchor element	`<a href="url">Link text</a>`
`href`	Destination URL	`href="https://google.com"`
`target="_blank"`	Open in new tab	`target="_blank"`
`mailto:`	Email link	`href="mailto:me@example.com"`
`tel:`	Phone link	`href="tel:+1234567890"`
`title`	Tooltip	`title="More info"`

Best Practices

✅ Do This:

<!-- Use descriptive link text -->
<a href="about.html">Learn about our company</a>

<!-- Add title for clarity -->
<a href="https://example.com" title="External website">Example</a>

<!-- Use target="_blank" for external links -->
<a href="https://google.com" target="_blank">Search Google</a>

<!-- Add security for external links -->
<a href="https://external.com" target="_blank" rel="noopener noreferrer">
  External Site
</a>

❌ Don’t Do This:

<!-- Don't use vague link text -->
<a href="about.html">Click here</a>

<!-- Don't use target="_blank" without security -->
<a href="https://external.com" target="_blank">External</a>
<!-- Always add rel="noopener noreferrer" for security -->

<!-- Don't use title for content that should be visible -->
<a href="page.html" title="Click to learn more">Learn More</a>

Pro Tip: Always use rel="noopener noreferrer" when using target="_blank" with external links. This prevents the new page from accessing the window.opener object, which can be a security risk.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!