Links & Navigation in HTML — Interview Questions & Answers

Anchor Tag Basics

Ques: What is the purpose of the <a> tag?

Ans: The <a> tag is used to create hyperlinks, allowing users to navigate between web pages or resources.

Ques: What is the syntax of the <a> tag?

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

href specifies the destination URL.

Ques: What are common attributes of the <a> tag?

Attribute	Description
`href`	Specifies the link’s destination URL
`target`	Defines where to open the link (same tab/new tab)
`title`	Tooltip text on hover
`download`	Forces file download
`rel`	Defines relationship between current and linked page

Absolute vs Relative URLs

Ques: What is the difference between absolute and relative URLs?

Type	Example	Description
Absolute URL	`https://example.com/about.html`	Full path to a resource on the web
Relative URL	`about.html` or `../images/pic.jpg`	Path relative to the current page’s location

Ques: Which type of URL should you use?

Ans:

Use Absolute URLs for external links.
Use Relative URLs for internal links within the same website.

Opening Links in a New Tab

Ques: How do you open a link in a new tab?

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

Ques: Why should you use rel="noopener noreferrer" with target="_blank"?

Ans: It improves security and performance by preventing the new tab from accessing the original page’s window.opener object.

Example:

<a href="<https://example.com>" target="_blank" rel="noopener noreferrer">Safe Link</a>

Email & Phone Links

Ques: How do you create an email link?

<a href="mailto:[email protected]">Email Us</a>

Ques: How do you create a phone link?

<a href="tel:+919999999999">Call Us</a>

Internal Page Navigation (Bookmarks)

Ques: What is internal linking or bookmarking?

Ans: It allows users to jump to a specific section within the same page using IDs.

Example:

<a href="#about">Go to About Section</a>
<h2 id="about">About Us</h2>

Link Colors & States

Ques: What are the default link states in HTML?

State	Pseudo-class	Default Color
Unvisited	`a:link`	Blue
Visited	`a:visited`	Purple
Hover	`a:hover`	Darker Blue
Active	`a:active`	Red

Ques: How can you style link states using CSS?

a:link { color: blue; }
a:hover { color: green; }
a:active { color: red; }

Navigation Menus (`<nav>`)

Ques: What is the purpose of the <nav> element?

Ans: It defines a section for navigation links, usually used in headers, sidebars, or footers.

Ques: Give an example of a simple navigation menu.

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Ques: Why is the <nav> element important for accessibility?

Ans: Screen readers recognize <nav> as a navigation region, helping users skip or locate menus quickly.

Advanced Link Attributes

Ques: What does the download attribute do?

Ans: It prompts the browser to download a file instead of opening it.

Example:

<a href="resume.pdf" download>Download Resume</a>

Ques: What is the purpose of the rel attribute?

Ans: It specifies the relationship between the current page and the linked resource.

Examples: nofollow, noopener, external.

Ques: What is a “nofollow” link?

Ans: A link with rel="nofollow" tells search engines not to pass ranking authority to the linked page (used for sponsored or paid links).

Ques: Can links contain images or other elements?

Ans: Yes. Example:

<a href="home.html"><img src="logo.png" alt="Company Logo"></a>

HTML Handbook