HTML Attributes & Global Attributes — Interview Questions & Answers
Introduction to Attributes
Ques: What are HTML attributes?
Ans: Attributes provide additional information about HTML elements and always appear inside the opening tag.
Example:
<p title="About HTML">This is a paragraph.</p>
Ques: What is the general syntax of an attribute?
<tagname attribute="value">Content</tagname>
Ques: Are HTML attribute names case-sensitive?
Ans: No, HTML attribute names are not case-sensitive, but the standard practice is to use lowercase.
Common HTML Attributes
| Attribute | Description | Example |
|---|---|---|
id | Unique identifier for an element | <p id="intro"> |
class | Groups elements for styling or JS | <div class="container"> |
title | Tooltip text | <abbr title="HyperText Markup Language">HTML</abbr> |
style | Inline CSS styling | <p style="color: red;"> |
lang | Defines language of content | <html lang="en"> |
dir | Text direction (ltr / rtl) | <p dir="rtl"> |
The data-* Attributes
Ques: What are data-* attributes?
Ans: Custom attributes used to store extra data on HTML elements.
<div data-user-id="101" data-role="admin"></div>
Ques: How can you access data-* attributes in JavaScript?
let user = document.querySelector('div');
console.log(user.dataset.userId); // Output: 101
Boolean Attributes
Ques: What are Boolean attributes?
Ans: Attributes that can be true simply by being present — they don’t need a value.
| Example | Meaning |
|---|---|
<input type="checkbox" checked> | Checkbox is checked |
<input required> | Field is required |
<option selected> | Option is pre-selected |
<button disabled> | Button is disabled |
<audio controls> | Shows playback controls |
Global Attributes
Ques: What are global attributes?
Ans: Attributes that can be used on any HTML element.
Ques: What does hidden do?
Ans: Hides the element from display (similar to display: none;).
<p hidden>This text is hidden</p>
Ques: What is tabindex used for?
Ans: Controls the tab order of focusable elements.
<input tabindex="1">
<input tabindex="2">
Ques: What is contenteditable?
Ans: Makes an element’s text editable by the user.
<p contenteditable="true">You can edit this text!</p>
Ques: What is draggable?
Ans: Allows an element to be dragged with the mouse.
<img src="logo.png" draggable="true">
Ques: What does spellcheck do?
Ans: Enables or disables spell checking.
<textarea spellcheck="true"></textarea>
Ques: What is accesskey used for?
Ans: Defines a keyboard shortcut to activate/focus an element.
<button accesskey="s">Submit (Alt+S)</button>
Ques: Difference between id and class?
| Feature | id | class |
|---|---|---|
| Uniqueness | Must be unique | Can be reused |
| CSS Selector | #id | .class |
| JavaScript Access | getElementById() | getElementsByClassName() |
Ques: What are deprecated attributes?
Ans: Attributes that are no longer recommended in HTML5.
Examples:
align, bgcolor, border, valign, hspace, vspaceQues: Can we define custom attributes without data- prefix?
Ans: No, Only data-* prefixed attributes are valid and accessible via the DOM.
Ques: Which attributes are most useful for accessibility?
alt→ for imagestitle→ tooltipsaria-*→ accessibility roleslang→ screen readerstabindex→ keyboard navigation