Working with Links

Example: Internal Link

<a href="about.html">About Us</a>
        

This example creates a link to another page within the same website.

Example: External Link

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

This example creates a link to an external website and opens it in a new tab using the target="_blank" attribute.

Example: Anchor Link

<a href="#section1">Go to Section 1</a>

<section id="section1">
    <h2>Section 1</h2>
    <p>This is Section 1.</p>
</section>
        

This example creates a link that jumps to a specific section within the same page using an ID.

Best Practices for Links

• Use descriptive text for links to improve accessibility.
• Ensure links are visually distinguishable (e.g., underlined).
• Test links to ensure they work correctly.
• Use rel="noopener noreferrer" with target="_blank" for security.

Practice: Try It Yourself

1. Project: Navigation Bar
   Create a navigation bar with links to different pages of a website. Style the links using CSS.
2. Project: Resource Page
   Build a page with links to external resources, such as articles, tutorials, and tools.

Continue Learning

• Back to Home