21 Website Authoring: Understanding Anchors

Objective

Understand the function of an anchor in HTML.

What is an Anchor?

An anchor is an HTML element that creates a hyperlink to another piece of content within the same page. It allows users to quickly navigate to a specific section of a webpage.

Why Use Anchors?

Anchors provide several benefits:

• Improved Navigation: They make long pages easier to navigate by providing direct links to different sections.
• Accessibility: They improve accessibility for users who may use screen readers or keyboard navigation.
• SEO Benefits: Search engines can use anchor text to understand the content of a page and improve search rankings.

How to Create an Anchor

An anchor is created using the (anchor) tag. The href attribute of the tag specifies the destination of the link. When the href attribute points to an ID of another element on the same page, it creates an internal link (an anchor).

Example: Creating an Internal Anchor

Consider the following HTML structure:

1. Main Content: This is the main content of the page.
2. Section 1: Introduction

   This is the introduction to the topic.

3. Section 2: Details

   This section provides more details about the topic.

4. Section 3: Conclusion

   This is the conclusion of the topic.

To create an anchor to the Section 2: Details element, we would use the following HTML:

    Go to Section 2
    

And the Section 2: Details element would have an id attribute:

    

        Section 2: Details
        
This section provides more details about the topic.
    
    

Explanation of the Code

Go to Section 2: This creates a hyperlink that points to the element with the id="section2". The # symbol in the href attribute indicates an internal link.

: This defines the section that the anchor links to. The id="section2" attribute provides a unique identifier for this element.

Example HTML Code

Anchor Element	Destination Element
Go to Introduction	Section 1: Introduction
Go to Details	Section 2: Details
Go to Conclusion	Section 3: Conclusion

Key Takeaways

Anchors are a fundamental part of website authoring, enabling better navigation and accessibility. They work by linking to elements with specific id attributes on the same page.