HTML Interview Questions 16-20 (Attributes, Links, Accessibility)

Welcome back! You have mastered the structure and the browser mechanics. Now, we are going to focus on precision and inclusivity.

In this lesson, we will clarify the subtle but strict differences between common attributes, learn how to attach hidden data to elements without cluttering the UI, and dive into Web Accessibility (a11y). Understanding these topics proves to an interviewer that you can build applications that are not just functional, but maintainable and usable by everyone.

16. What is the difference between id and class attributes?

Both attributes are used to select elements for styling (CSS) or interactivity (JavaScript), but they follow very different rules regarding uniqueness.

Analogy: Passport vs. Uniform
- ID: Like a Passport Number. It must be unique. Two people cannot have the same passport number in the same room.
- Class: Like a School Uniform. Many students can wear the exact same uniform at the same time.

Feature	ID (#)	Class (.)
Limit per Page	Only One element per page can have a specific ID.	Unlimited elements can share the same Class.
Limit per Element	An element can have only one ID.	An element can have multiple classes (space-separated).
CSS Specificity	High specificity (overrides classes).	Medium specificity.
JavaScript	`getElementById('name')`	`getElementsByClassName('name')`

<h1 id="main-title">Welcome</h1>

<button class="btn btn-primary">Login</button>
<button class="btn btn-secondary">Cancel</button>

17. What are data-* attributes and why are they used?

Standard attributes (like href or src) are defined by the HTML spec. But sometimes, you need to store custom data associated with an element - like a database ID, a price, or a user role - specifically for your JavaScript to use.

HTML5 introduced data attributes. They must start with data- followed by your custom name.

How to use them:
In JavaScript, you access them via the dataset property. The browser automatically converts kebab-case (data-user-id) to camelCase (dataset.userId).

<div id="product-card" data-id="101" data-category="electronics" data-price="499">
  Smartphone X
</div>

<script>
  const card = document.getElementById("product-card");
  
  // Accessing data
  const productId = card.dataset.id;      // "101"
  const category = card.dataset.category; // "electronics"
  
  console.log(`User clicked product ${productId} in ${category}`);
</script>

Sample Output (Console):
User clicked product 101 in electronics

18. What is the purpose of the <link> tag in HTML?

The <link> tag is an empty (self-closing) element used to define a relationship between the current document and an external resource. It almost always lives in the <head>.

While it is most famous for loading CSS, it has several other powerful uses for performance and branding.

1. Stylesheets: The most common usage.
<link rel="stylesheet" href="style.css">
2. Favicons: The small icon in the browser tab.
<link rel="icon" href="favicon.ico">
3. Preloading (Performance): Tells the browser to start downloading a resource (like a font) immediately, even before it parses the rest of the HTML.
<link rel="preload" href="font.woff2" as="font">

19. What is the role of ARIA attributes in accessible HTML?

ARIA (Accessible Rich Internet Applications) is a set of attributes that make web content and applications more accessible to people with disabilities using screen readers.

The Golden Rule of ARIA:
"No ARIA is better than bad ARIA." Always prefer native semantic HTML elements first. Only use ARIA when HTML tags cannot describe the behavior of your component (like a complex custom dropdown or a popup modal).

aria-label: Provides an invisible label for an element that has no text (like an icon button).
role: Tells the screen reader what the element is (e.g., role="alert").
aria-hidden: Tells the screen reader to ignore an element (useful for decorative icons).

<button><i class="fa fa-times"></i></button>

<button aria-label="Close">
  <i class="fa fa-times" aria-hidden="true"></i>
</button>

20. What is the difference between iframe and embed tags?

Both tags allow you to bring external content into your webpage, but they serve different historical and practical purposes.

Tag	Primary Use	Closing Tag?
<iframe>	Embedding other HTML pages (Maps, YouTube, Ads). It creates a "nested browsing context".	Yes (`</iframe>`)
<embed>	Embedding non-HTML resources via plugins (PDFs, older Flash). Mostly obsolete for media.	No (Self-closing)

Modern Usage:
You will use <iframe> 99% of the time. It is standard for embedding third-party content like YouTube videos or Google Maps. <embed> is largely replaced by <audio>, <video>, or <object>.

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  title="YouTube video player"
  style="border: 0;">
</iframe>

Navigate by Range