links-and-navigation - html Interview Questions | Preplance

1. Which CSS pseudo-class is used to style a link that has been visited?

Difficulty: MediumType: MCQTopic: Link Styling

The colon visited pseudo-class is used to style links that the user has already visited. Browsers keep track of visited links and apply different styles to them, typically displaying them in a purple color by default. CSS provides four pseudo-classes for link states. Colon link targets unvisited links. Colon visited targets visited links. Colon hover targets links when the mouse pointer is over them. Colon active targets links at the moment they are being clicked. The order of these pseudo-classes in your CSS matters. The recommended order is link, visited, hover, active, which can be remembered as LVHA or love hate. This order ensures that hover and active states work correctly on both visited and unvisited links.

Example code

/* Link pseudo-classes in correct order */

/* Unvisited links */
a:link {
  color: blue;
  text-decoration: none;
}

/* Visited links */
a:visited {
  color: purple;
}

/* Mouse over link */
a:hover {
  color: red;
  text-decoration: underline;
}

/* Active/clicked link */
a:active {
  color: orange;
}

2. How do you create an email link in HTML?

Difficulty: EasyType: MCQTopic: Email Links

To create an email link in HTML, you use the anchor tag with href equals mailto colon followed by the email address. When users click this link, their default email client opens with a new message addressed to the specified email. You can enhance mailto links by adding additional parameters. For example, you can pre-fill the subject line using question mark subject equals your subject. You can also pre-fill the body text using ampersand body equals your message. You can add CC or BCC recipients as well. Email links are useful for contact pages, but be aware that they require users to have an email client configured. Some users may prefer a contact form instead.

Example code

<!-- Basic email link -->
<a href="mailto:info@example.com">Email Us</a>

<!-- With subject line -->
<a href="mailto:support@example.com?subject=Help Request">Get Help</a>

<!-- With subject and body -->
<a href="mailto:sales@example.com?subject=Product Inquiry&body=I am interested in...">Contact Sales</a>

<!-- With CC and BCC -->
<a href="mailto:info@example.com?cc=manager@example.com&bcc=admin@example.com">Email with CC</a>

3. What is the default value of the target attribute if not specified?

Difficulty: EasyType: MCQTopic: Link Target

The default value of the target attribute is underscore self, which means the link opens in the same browser tab or frame where it was clicked. You do not need to explicitly specify target equals underscore self because it is the default behavior. This is the most common way links work on websites. The link replaces the current page with the new page in the same browsing context. Understanding the default behavior is important because it affects user experience. If you want different behavior, you must explicitly set the target attribute to another value like underscore blank for a new tab.

Example code

<!-- These two are equivalent -->
<a href="page.html">Link 1</a>
<a href="page.html" target="_self">Link 2</a>

<!-- Both open in same tab by default -->

4. Which target attribute value opens a link in a new browser tab?

Difficulty: EasyType: MCQTopic: Link Target

The target attribute with the value underscore blank opens the link in a new browser tab or window. This is useful when you want users to stay on your current page while viewing the linked content. The target attribute has several values. Underscore self opens the link in the same frame or tab, which is the default behavior. Underscore parent opens the link in the parent frame. Underscore top opens the link in the full body of the window, breaking out of any frames. When using target equals underscore blank, it is a good practice to also add rel equals noopener noreferrer for security reasons. This prevents the new page from accessing your page's window object.

Example code

<!-- Opens in new tab -->
<a href="https://example.com" target="_blank">Visit Example</a>

<!-- Opens in same tab (default) -->
<a href="about.html" target="_self">About</a>

<!-- Best practice with security -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">External Link</a>

5. Which of the following is an absolute URL?

Difficulty: MediumType: MCQTopic: URL Types

An absolute URL is a complete web address that includes the protocol, domain name, and path to the resource. In this case, https colon slash slash www dot example dot com slash page dot html is an absolute URL. It includes the protocol which is https, the domain which is www dot example dot com, and the path which is slash page dot html. Absolute URLs work from anywhere on the internet because they contain the full address. They are used when linking to external websites or when you want to ensure the link works regardless of the current page location. The other options are relative URLs, which are paths relative to the current page or website root.

Example code

<!-- Absolute URLs -->
<a href="https://www.google.com">Google</a>
<a href="https://example.com/about.html">About</a>
<a href="http://website.org/page">External Site</a>

<!-- Relative URLs -->
<a href="contact.html">Contact</a>
<a href="/images/photo.jpg">Photo</a>
<a href="../index.html">Home</a>

6. How do you create a link to a specific section on the same page?

Difficulty: MediumType: MCQTopic: Anchor Links

To create a link to a specific section on the same page, you use the anchor tag with href equals hash symbol followed by the ID of the target element. This is called a bookmark link or anchor link. For example, href equals hash section1 will jump to the element with id equals section1. The target element can be any HTML element with an ID attribute, such as a heading, div, or section tag. When users click the link, the page scrolls to bring that element into view. Bookmark links are useful for creating tables of contents, back to top buttons, or navigating long pages. They improve user experience by allowing quick navigation within a page.

Example code

<!-- Link to section -->
<a href="#about">Go to About Section</a>
<a href="#contact">Go to Contact Section</a>
<a href="#top">Back to Top</a>

<!-- Target sections with IDs -->
<section id="about">
  <h2>About Us</h2>
  <p>Content here...</p>
</section>

<section id="contact">
  <h2>Contact</h2>
  <p>Contact information...</p>
</section>

<div id="top">
  <h1>Page Title</h1>
</div>

7. What does the title attribute in an anchor tag provide?

Difficulty: MediumType: MCQTopic: Link Attributes

The title attribute in an anchor tag provides additional information about the link that appears as a tooltip when users hover their mouse over the link. This tooltip gives users a preview of what they can expect when clicking the link. The title attribute improves accessibility and user experience by providing context. For example, a link saying click here is not very descriptive, but adding a title attribute can explain where the link leads. Screen readers also announce the title attribute to visually impaired users. However, you should not rely solely on title attributes for important information because they are not visible on touch devices. The link text itself should be descriptive whenever possible.

Example code

<!-- Link with title attribute -->
<a href="https://example.com" title="Visit Example Website">Example</a>

<!-- Descriptive title for external link -->
<a href="document.pdf" title="Download Product Brochure (PDF, 2MB)">Brochure</a>

<!-- Title for context -->
<a href="/pricing" title="View our pricing plans and packages">Pricing</a>

8. What is the purpose of the anchor tag's title attribute?

Difficulty: MediumType: SubjectiveTopic: Link Attributes

The title attribute in an anchor tag serves multiple important purposes for both usability and accessibility. The primary purpose is to provide additional information about the link that appears as a tooltip when users hover their mouse over the link. This tooltip helps users understand where the link leads before clicking it. For example, a link with text download might have a title attribute explaining download product brochure, PDF, 2 megabytes. This gives users context about what they are downloading. The title attribute is particularly useful in several scenarios. First, when link text is necessarily brief or generic, the title can provide more detail. Second, for external links, the title can indicate that the link opens an external site. Third, for download links, the title can specify the file type and size. Fourth, for links with icons only, the title provides a text description. From an accessibility perspective, the title attribute is announced by screen readers, helping visually impaired users understand link purposes. However, you should not rely solely on title attributes for critical information because they have limitations. Title tooltips only appear on hover, so they are not accessible on touch devices like phones and tablets. They also have inconsistent browser support and styling. Some users may not discover them. Best practices include making the link text itself descriptive enough to stand alone. Use the title attribute to provide supplementary information, not essential information. Keep title text concise but informative. Avoid redundant titles that just repeat the link text. For example, if your link text already says download annual report PDF, you do not need a title that says the same thing. Understanding the proper use of the title attribute demonstrates attention to user experience and accessibility, which are important topics in web development interviews. It shows you understand how to create links that work well for all users, including those using assistive technologies.

Example code

<!-- Title provides context for brief link text -->
<a href="https://example.com" title="Visit Example Company's Official Website">Example</a>

<!-- Title describes file details -->
<a href="report.pdf" title="Download Annual Report 2024 (PDF, 2.5 MB)" download>Download Report</a>

<!-- Title for external link warning -->
<a href="https://external-site.com" title="External link - Opens in new window" target="_blank" rel="noopener noreferrer">Visit Partner Site</a>

<!-- Title for icon-only link -->
<a href="/help" title="Help and Documentation">
  <img src="help-icon.png" alt="Help">
</a>

<!-- Title adds clarity -->
<a href="/products" title="Browse our full product catalog">Products</a>

<!-- BAD: Redundant title -->
<a href="contact.html" title="Contact Us">Contact Us</a>
<!-- Better: More informative -->
<a href="contact.html" title="Send us a message or find our office locations">Contact Us</a>

9. Which CSS property is used to remove the underline from links?

Difficulty: EasyType: MCQTopic: Link Styling

The CSS property text-decoration with the value none is used to remove the underline from links. By default, browsers display links with an underline to make them easily identifiable. However, modern web design often removes this underline and uses other visual cues like color, hover effects, or icons to indicate links. If you remove underlines, make sure your links are still easily distinguishable from regular text through color or other styling. This is important for accessibility. You can also add the underline back on hover to provide feedback to users. The text-decoration property can also be set to underline, overline, or line-through for different visual effects.

Example code

/* Remove underline from all links */
a {
  text-decoration: none;
}

/* Remove underline but add on hover */
a {
  text-decoration: none;
  color: blue;
}

a:hover {
  text-decoration: underline;
  color: darkblue;
}

/* Style specific links */
.nav-link {
  text-decoration: none;
  font-weight: bold;
}

10. What does the download attribute in an anchor tag do?

Difficulty: MediumType: MCQTopic: Link Attributes

The download attribute prompts the browser to download the linked file instead of navigating to it. This is useful when linking to files like PDFs, images, documents, or zip files that you want users to save rather than view in the browser. You can use the download attribute in two ways. First, just add download without a value, and the file will be downloaded with its original name. Second, provide a value like download equals new filename dot pdf to suggest a different filename for the downloaded file. The download attribute only works for same-origin URLs or blob and data URLs. For security reasons, it does not work for cross-origin links. This attribute improves user experience by making it clear that clicking the link will download a file.

Example code

<!-- Download with original filename -->
<a href="document.pdf" download>Download PDF</a>

<!-- Download with custom filename -->
<a href="report.pdf" download="Annual-Report-2024.pdf">Download Report</a>

<!-- Download image -->
<a href="photo.jpg" download="my-photo.jpg">Download Image</a>

<!-- Must be same-origin for security -->
<a href="/files/data.zip" download>Download ZIP</a>

11. How do you create a link that opens in a new tab?

Difficulty: EasyType: SubjectiveTopic: Link Target

In HTML, if I want a link to open in a new browser tab, I use the target="_blank" attribute in the anchor (<a>) tag.

Example code

<!-- Basic new tab link (less secure) -->
<a href="https://example.com" target="_blank">Visit Example</a>

<!-- RECOMMENDED: Secure new tab link -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">External Link</a>

<!-- Real-world examples -->

<!-- External website -->
<a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">Wikipedia</a>

<!-- PDF document -->
<a href="document.pdf" target="_blank" rel="noopener noreferrer">View PDF</a>

<!-- Social media -->
<a href="https://twitter.com/share" target="_blank" rel="noopener noreferrer">Share on Twitter</a>

<!-- Help documentation -->
<a href="/help/guide.html" target="_blank" rel="noopener noreferrer">Open Help in New Tab</a>

12. What does the href attribute in an anchor tag specify?

Difficulty: EasyType: MCQTopic: Link Attributes

The href attribute, which stands for hypertext reference, specifies the destination URL where the link will navigate to when clicked. This is the most important attribute of the anchor tag. The href value can be an absolute URL with the full web address, a relative URL pointing to a file in the same website, an email address using mailto protocol, a phone number using tel protocol, or an anchor link to a section on the same page using a hash symbol. Without an href attribute, the anchor tag will render as plain text and will not be clickable. Understanding how to use href correctly is essential for web development.

Example code

<!-- Absolute URL -->
<a href="https://www.google.com">Google</a>

<!-- Relative URL -->
<a href="contact.html">Contact</a>

<!-- Email link -->
<a href="mailto:info@example.com">Email Us</a>

<!-- Phone link -->
<a href="tel:+1234567890">Call Us</a>

13. What does a relative URL starting with '/' refer to?

Difficulty: MediumType: MCQTopic: URL Types

A relative URL starting with a forward slash refers to the root of the website. This is called a root-relative URL or absolute path from the root. For example, slash images slash photo dot jpg always refers to the images folder at the root of your website, regardless of which page you are currently on. This is different from a relative URL without the leading slash, which is relative to the current page's location. Root-relative URLs are useful because they work consistently across your entire website. If you move pages around, root-relative URLs do not break as easily as page-relative URLs. Understanding the difference between root-relative and page-relative URLs is important for maintaining large websites.

Example code

<!-- Root-relative URL (starts from website root) -->
<a href="/about.html">About</a>
<a href="/images/logo.png">Logo</a>
<a href="/contact/form.html">Contact</a>

<!-- Page-relative URL (relative to current page) -->
<a href="about.html">About</a>
<a href="images/logo.png">Logo</a>
<a href="../contact.html">Contact (parent folder)</a>

14. Explain the difference between absolute and relative URLs with examples.

Difficulty: MediumType: SubjectiveTopic: URL Types

Absolute and relative URLs are two different ways to specify link destinations in HTML. Understanding the difference is crucial for web development. An absolute URL is a complete web address that includes the protocol such as http or https, the domain name, and the full path to the resource. For example, https colon slash slash www dot example dot com slash about dot html is an absolute URL. It contains everything needed to locate the resource from anywhere on the internet. Absolute URLs are used when linking to external websites or when you need a link that works regardless of the current page location. They never change based on where you use them. A relative URL is a path relative to the current page or website. It does not include the protocol or domain name. Relative URLs come in different forms. A page-relative URL like about dot html looks for the file in the same directory as the current page. A parent-relative URL like dot dot slash contact dot html looks in the parent directory. A root-relative URL like slash images slash logo dot png starts from the website root. Relative URLs are shorter and more flexible for internal website links. If you change your domain name, relative URLs still work without modification. However, if you move pages to different directories, page-relative URLs may break. Best practices include using absolute URLs for external links to other websites and relative URLs for internal links within your own website. For internal links, root-relative URLs starting with a slash are often preferred because they work consistently across your entire site. Understanding when to use each type is important for maintainable websites and is commonly asked in interviews.

Example code

<!-- ABSOLUTE URLs (full address) -->
<a href="https://www.google.com">Google</a>
<a href="https://example.com/about.html">About</a>
<a href="http://website.org/page.html">External</a>

<!-- RELATIVE URLs -->

<!-- Page-relative (same directory) -->
<a href="contact.html">Contact</a>
<a href="page2.html">Page 2</a>

<!-- Parent directory -->
<a href="../index.html">Home</a>
<a href="../../main.html">Main</a>

<!-- Root-relative (from website root) -->
<a href="/about.html">About</a>
<a href="/images/logo.png">Logo</a>
<a href="/products/item.html">Product</a>

<!-- Subdirectory -->
<a href="images/photo.jpg">Photo</a>
<a href="docs/guide.pdf">Guide</a>

Master Interviews
Anywhere, Anytime

Links & Navigation – HTML interview questions

Set overview

HTML – Links & Navigation questions (14)

1. Which CSS pseudo-class is used to style a link that has been visited?

Continue your preparation

2. How do you create an email link in HTML?

3. What is the default value of the target attribute if not specified?

4. Which target attribute value opens a link in a new browser tab?

5. Which of the following is an absolute URL?

6. How do you create a link to a specific section on the same page?

7. What does the title attribute in an anchor tag provide?

8. What is the purpose of the anchor tag's title attribute?

9. Which CSS property is used to remove the underline from links?

10. What does the download attribute in an anchor tag do?

11. How do you create a link that opens in a new tab?

12. What does the href attribute in an anchor tag specify?

13. What does a relative URL starting with '/' refer to?

14. Explain the difference between absolute and relative URLs with examples.

More sets in HTML

Explore related subjects

Master Interviews Anywhere, Anytime

Links & Navigation – HTML interview questions

Set overview

1. Which CSS pseudo-class is used to style a link that has been visited?

Continue your preparation

2. How do you create an email link in HTML?

3. What is the default value of the target attribute if not specified?

4. Which target attribute value opens a link in a new browser tab?

5. Which of the following is an absolute URL?

6. How do you create a link to a specific section on the same page?

7. What does the title attribute in an anchor tag provide?

8. What is the purpose of the anchor tag's title attribute?

9. Which CSS property is used to remove the underline from links?

10. What does the download attribute in an anchor tag do?

11. How do you create a link that opens in a new tab?

12. What does the href attribute in an anchor tag specify?

13. What does a relative URL starting with '/' refer to?

14. Explain the difference between absolute and relative URLs with examples.

More sets in HTML

Explore related subjects

Master Interviews
Anywhere, Anytime