Author
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.
| 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"> |
data-* AttributesQues: 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
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 |
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