As manual exploratory testers, understanding HTML anchors is crucial for ensuring that web pages function correctly and deliver a seamless user experience. HTML internal anchors, commonly known as hyperlinks or links, enable users to navigate through different pages and sections within a website. In this article, we will provide a comprehensive guide to HTML internal anchors and their significance in our type of testing.

To understand the elements we are about to analyse, it's essential to know how to inspect them to see them. Inspecting DOM elements involves using browser developer tools to understand the structure of a webpage. This is crucial for manual exploratory testers as it helps us identify issues, validate interactions, and assess user experience.

If you want to learn how to use browser developer tools, refer to our article Browser console.

HTML anchors create clickable links, allowing users to move from one page to another or jump to specific sections within a page. Anchors are defined using the a tag in HTML and consist of two main attributes: href and text. The href attribute specifies the destination URL or target, while the text attribute defines the visible link text users interact with.

See, for example, the HTML anchor for the BECOME A TESTER button on our website: https://test.io/:

Please read the article here to learn how to read and understand URL structure.

There are two types of HTML anchors: external and internal.

External anchors navigate users to resources outside the current website domain. They are used to direct users to other websites or external content.

Like our Tester Academy link in the footer of https://test.io/:

On the other hand, internal anchors allow users to navigate within the same website, jumping to specific sections on the current page or different pages within the same site.

For instance, this is the footer element ❝Policies for Testers❞ at https://test.io/:

This is the element to link on the same article page, Bug Report Requirements, to the bug report ❝Title❞ section:

As a Test IO freelance tester, you play a vital role in ensuring that all links on a website work correctly and provide a smooth user experience. Here's why understanding HTML anchors are crucial in testing:

a. Functionality Testing: One of the primary responsibilities of exploratory testers is to verify that all internal and external links work as intended. Broken links can create a frustrating user experience and negatively impact a website's credibility.

b. Navigation Testing: Internal anchors should direct users to the correct sections within a page. We must ensure that clicking on an internal link takes users to the expected location on the same page or another page.

c. Link Text Verification: We need to validate that the link text accurately represents the content it points to. Misleading or irrelevant link text can confuse users and reduce their trust in the website.

d. Cross-Browser Compatibility: HTML anchors can behave differently across various web browsers. We must conduct cross-browser testing to ensure links work uniformly on all major browsers.

e. Mobile Responsiveness: With the increasing number of users accessing websites on mobile devices, we need to check that links function correctly on different screen sizes and orientations.

Since external anchors have the same general link structure based on the a tag and their attributes href , and text, let's dive into internal anchors because they have other attributes to be analysed when testing them.

Internal anchors, also known as fragment identifiers or named anchors, allow users to navigate to sections on the same page instead of directing users to a different page. The most common examples are when testing a table of contents that has linked to specific sections so readers can jump to the section or content block on the same page or when clicking on an email address and the user navigates to an email service to do so, saving time and enhancing the user experience.

To create an internal anchor, you must define an id attribute for the destination section's HTML element. Then, you can reference this id attribute in the href attribute of the anchor link, preceded by a hash (#) symbol. Despite IDs being the most straightforward implementation, anchors can also use a class name.

As shown in our example above of the ❝Title❞ in our article Bug Report Requirements, that is referenced like so: #h_f4796ee256

By using the DevTools of the browser, it is easier to spot these elements and, therefore, better identify the root cause of a bug when testing.

Let's identify the elements that make this navigation possible. At the top of Bug Report Requirements, a paragraph contains the anchor href attribute: <a href=" #h_f4796ee256">Title</a>

At the bottom, the ❝Title❞ section contains the id attribute, the destination of the above anchor, which makes possible the navigation on the same page and is shown as <h1 id= "h_f4796ee256">Title</h1>

These issues usually involve absent or misspelt HTML attributes or the complete lack of elements (missing information). Although they may look like links and are clickable, they don't significantly affect functionality, so they are considered content bugs.

When it comes to web development, HTML anchors play a vital role. As a QA tester, it's essential to understand the significance of anchors to conduct effective manual exploratory testing. By conducting thorough tests and following best practices, you can help ensure a seamless browsing experience for users and contribute to the website's overall success.