Anchor tag basics in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a link to example.com.

HTML

<a href="[1]">Visit Example</a>

Drag options to blanks, or click blank then click option'

Aexample

Bwww.example.com

Chttps://example.com

Dhttp://example

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving out 'https://' causes the link to break.

Using just 'example' is not a valid URL.

The href attribute needs a full URL starting with https:// to link correctly.

2fill in blank

medium

Complete the code to open the link in a new browser tab.

HTML

<a href="https://example.com" [1]>Open in new tab</a>

Drag options to blanks, or click blank then click option'

Atarget="_self"

Btarget="_blank"

Crel="nofollow"

Dhref="_blank"

Attempts:

3 left

💡 Hint

Common Mistakes

Using target="_self" opens in the same tab.

Putting href="_blank" is invalid.

Using target="_blank" makes the link open in a new tab.

3fill in blank

hard

Fix the error in the anchor tag to make the link valid.

HTML

<a [1]>Click here</a>

Drag options to blanks, or click blank then click option'

Ahref="https://example.com"

Blink="https://example.com"

Csrc="https://example.com"

Dhref=https://example.com

Attempts:

3 left

💡 Hint

Common Mistakes

Using link or src instead of href.

Not putting quotes around the URL.

The correct attribute for links is href with quotes around the URL.

4fill in blank

hard

Fill both blanks to create a link that opens in a new tab and is safe for security.

HTML

<a href="https://example.com" [1] [2]>Secure Link</a>

Drag options to blanks, or click blank then click option'

Atarget="_blank"

Brel="noopener"

Crel="noreferrer"

Dtarget="_self"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting rel="noopener" when using target="_blank".

Using target="_self" which opens in the same tab.

Use target="_blank" to open in a new tab and rel="noopener" to improve security.

5fill in blank

hard

Fill all three blanks to create a link with text, URL, and open it safely in a new tab.

HTML

<a href="[1]" [2] [3]>Visit Site</a>

Drag options to blanks, or click blank then click option'

Ahttps://openai.com

Btarget="_blank"

Crel="noopener"

Drel="nofollow"

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving out rel="noopener" causes security risks.

Using rel="nofollow" instead of rel="noopener" for this purpose.

The link URL is https://openai.com. Use target="_blank" to open in a new tab and rel="noopener" for security.

Practice

1. What does the <a> tag do in HTML?

easy

A. Creates a clickable link to another page or resource

B. Defines a paragraph of text

C. Inserts an image into the page

D. Adds a heading to the page

Solution

1. Step 1: Understand the purpose of the <a> tag

   The <a> tag is used to create links that users can click to go to other pages or resources.

2. Step 2: Compare with other tags

   Other tags like <p>, <img>, and <h1> serve different purposes such as paragraphs, images, and headings.

3. Final Answer:

   Creates a clickable link to another page or resource -> Option A

4. Quick Check:

   Anchor tag = clickable link [OK]

Hint: Anchor tag always creates clickable links [OK]

Common Mistakes:

• Confusing <a> with <p> or <img>
• Thinking <a> adds images or text formatting
• Ignoring the clickable nature of <a>

2. Which of the following is the correct syntax to create a link to "https://example.com" with the text "Visit Example"?

easy

A. Visit Example

B. Visit Example

C. Visit Example

D. https://example.com

Solution

1. Step 1: Identify the correct attribute for link destination

   The correct attribute to specify the link URL is href inside the <a> tag.

2. Step 2: Check the tag and attribute usage

   <a href="https://example.com">Visit Example</a> uses <a> with href and link text correctly. Other options use wrong attributes or tags.

3. Final Answer:

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

4. Quick Check:

   Use <a href="URL">text</a> for links [OK]

Hint: Use href attribute inside <a> for links [OK]

Common Mistakes:

• Using url instead of href attribute
• Using <link> tag instead of <a>
• Omitting href attribute

3. What will the following HTML code display in the browser?

<a href="#section2">Go to Section 2</a>
<h2 id="section2">Section 2</h2>

medium

A. A link that opens a new tab to a page named 'section2'

B. An error message because href cannot start with #

C. A clickable link labeled 'Go to Section 2' that scrolls to the heading 'Section 2' on the same page

D. Plain text 'Go to Section 2' with no link

Solution

1. Step 1: Understand href with # and id attribute

   The href="#section2" links to an element with id="section2" on the same page, causing the page to scroll there.

2. Step 2: Check the displayed content

   The link text 'Go to Section 2' is clickable and scrolls to the heading labeled 'Section 2'.

3. Final Answer:

   A clickable link labeled 'Go to Section 2' that scrolls to the heading 'Section 2' on the same page -> Option C

4. Quick Check:

   href="#id" scrolls to element with that id [OK]

Hint: href="#id" links inside same page [OK]

Common Mistakes:

• Thinking # means new page or error
• Expecting new tab to open
• Ignoring id attribute connection

4. Find the error in this anchor tag code:

<a href="www.example.com">Example</a>

medium

A. href attribute should be written as link

B. Incorrect closing tag, should be <a />

C. Text 'Example' should be inside quotes

D. Missing protocol like https:// in href URL

Solution

1. Step 1: Check href URL format

   The href value 'www.example.com' lacks the protocol (http:// or https://), so the browser treats it as a relative link.

2. Step 2: Understand correct URL usage

   To link to an external site, the URL must include the protocol like 'https://www.example.com'.

3. Final Answer:

   Missing protocol like https:// in href URL -> Option D

4. Quick Check:

   External links need full URL with protocol [OK]

Hint: Always include https:// for external links [OK]

Common Mistakes:

• Omitting https:// causes relative link errors
• Using self-closing tag incorrectly
• Misnaming href attribute

5. You want to create an email link that opens the user's email program to send mail to "[e-mail]". Which anchor tag is correct?

hard

A. Send Email

B. Send Email

C. Send Email

D. Send Email

Solution

1. Step 1: Identify the correct protocol for email links

   Email links use the mailto: protocol in the href attribute to open the email client.

2. Step 2: Check each option's syntax

   <a href="mailto:[e-mail]">Send Email</a> uses mailto:[e-mail] correctly. <a href="email:[e-mail]">Send Email</a> uses wrong protocol 'email:', while others lack the protocol or use incorrect formats like 'mailto://'.

3. Final Answer:

   <a href="mailto:[e-mail]">Send Email</a> -> Option B

4. Quick Check:

   Email links use mailto: prefix [OK]

Hint: Use mailto: before email address in href [OK]

Common Mistakes:

• Using email: instead of mailto:
• Omitting mailto: prefix
• Adding extra slashes after mailto: