Anchor tag basics in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visible text of this anchor tag?

Look at the anchor tag below. What text will you see on the webpage?

HTML

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

A https://example.com

B Click here

C example.com

D Visit Example

💡 Hint

The text between and tags is what shows on the page.

The anchor tag shows the text inside it as clickable link text. Here, it is 'Visit Example'.

🧠 Conceptual

intermediate

What does the href attribute do in an anchor tag?

Choose the best description of the href attribute in an anchor tag.

A It defines the URL the link points to.

B It sets the color of the link text.

C It makes the link open in a new tab.

D It adds a tooltip when hovering over the link.

💡 Hint

Think about what happens when you click a link.

The href attribute tells the browser where to go when the link is clicked.

📝 Syntax

advanced

Which anchor tag opens the link in a new browser tab?

Select the anchor tag code that opens the link in a new tab when clicked.

A <a href="https://example.com" newtab>Open in new tab</a>

B <a href="https://example.com" target="new">Open in new tab</a>

C <a href="https://example.com" target="_blank">Open in new tab</a>

D <a href="https://example.com" open="new">Open in new tab</a>

💡 Hint

The target attribute controls where the link opens.

Using target="_blank" tells the browser to open the link in a new tab or window.

❓ accessibility

advanced

Which anchor tag is best for accessibility?

Choose the anchor tag that improves accessibility by describing the link purpose clearly.

A <a href="https://example.com">Click here</a>

B <a href="https://example.com" aria-label="Visit Example website">Example</a>

C <a href="https://example.com">Example</a>

D <a href="https://example.com" title="Example">Link</a>

💡 Hint

Screen readers use aria-label to describe links better.

Adding aria-label with a clear description helps users who rely on screen readers understand the link's purpose.

❓ selector

expert

Which CSS selector styles only anchor tags inside a nav element?

Select the CSS selector that applies styles only to anchor tags inside a

element.

A nav a { color: blue; }

B a nav { color: blue; }

C nav > a { color: blue; }

D a > nav { color: blue; }

💡 Hint

Think about how CSS selects child elements inside parents.

The selector 'nav a' targets all anchor tags inside any nav element, regardless of depth.