1. What is the difference between id and class attributes?
id: unique identifier for one element.class: can be shared across multiple elements.
<div id="header">Unique Header</div>
<div class="box">Reusable Box 1</div>
<div class="box">Reusable Box 2</div>2. What is the purpose of the label element in forms?
It improves accessibility and connects a text label to an input field using the for attribute.
<label for="email">Email:</label> <input id="email" type="email" name="email" />Clicking the label will focus the associated input.
3. What is the difference between block, inline, and inline-block elements?
- Block: takes full width (e.g.,
<div>) - Inline: flows with text, no width/height (e.g.,
<span>) - Inline-block: behaves like inline but allows width/height
<span>Inline</span>
<div>Block</div>4. How do you create a dropdown menu in HTML?
Use the <select> and <option> tags.
<label for="city">Choose a city:</label>
<select id="city" name="city">
<option value="dhaka">Dhaka</option>
<option value="chattogram">Chattogram</option>
</select>5. What are self-closing tags in HTML?
Tags that don’t need a closing tag (HTML5 allows omitting / but XHTML requires it).
Examples: <img>, <input>, <br>, <hr>
<img src="logo.png" alt="Logo" />
<br />
<hr />6. What is the use of the fieldset and legend tags?
Used to group related form elements together for better organization and accessibility.
<fieldset>
<legend>Personal Info</legend>
<label>Name: <input type="text" /></label>
</fieldset>7. What is the difference between <section>, <article>, and <div>?
<section>: thematic grouping of content<article>: independent, reusable content<div>: generic container with no meaning
<section>
<h2>Services</h2>
</section>
<article>
<h2>Blog Post</h2>
<p>This is a post...</p>
</article>8. How can you embed a video or audio file in HTML?
Use <video> and <audio> with controls attribute.
<video controls width="320">
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<audio controls>
<source src="song.mp3" type="audio/mp3" />
</audio>9. What are data-* attributes used for?
They store extra data on elements without affecting the layout or performance. Often used with JavaScript.
<div data-user-id="123" data-role="admin">User Info</div>const div = document.querySelector("div");
console.log(div.dataset.userId); // "123"10. What is the difference between <script> placement in <head> vs <body>?
- In
<head>: Blocks rendering until script loads (unlessasync/deferused). - In
<body>(bottom): Ensures HTML loads before script executes.
✅ Best practice:
<script src="script.js" defer></script>11. What is the significance of <head> and <body> tag in HTML?
The <head> tag provides information about the document. It is always enclosed within the <html> tag and contains metadata about the webpage.
Some of the commonly used elements inside <head> include:
<title><meta><link><style><script>
These elements define things like page title, character encoding, linked CSS files, and other resources.
The <body> tag, on the other hand, contains all the visible content of the web page such as headings, paragraphs, images, links, buttons, and more. It’s what users see and interact with in their browser.
<h1> - <h6><p><img><link><button>
12. Difference between <strong>, <b> and <em>, <i> tags
-
<b>and<i>are styling-only tags.<b>: Makes text bold.<i>: Makes text italic.- ❌ These do not carry any semantic meaning.
-
<strong>and<em>add semantic meaning:<strong>: Indicates strong importance.<em>: Indicates emphasis.- ✅ These are better for accessibility and SEO.
13. How to handle events in HTML?
In HTML, events are actions that occur in the browser, such as clicks, key presses, page loads, etc. You can handle these events using event attributes directly in HTML elements.
Common Event Attributes:
onclick: Triggered when an element is clicked.onmouseover: Triggered when the mouse hovers over an element.onchange: Triggered when the value of an input element changes.onload: Triggered when the page finishes loading.
Example:
<button onclick="alert('Button clicked!')">Click Me</button>14. What is new about the relationship between the <header> and <h1> tags in HTML5?
In HTML5, the <header> tag is a new semantic element that represents the introductory content or a section heading for a page or part of a page.
What’s new is that you can now use multiple <header> tags throughout the page, and each can contain its own <h1> tag.
Key Points:
- In HTML4, only one
<h1>per page was recommended for structure and accessibility. - In HTML5, multiple
<h1>tags are valid when scoped within separate<header>elements inside different sections or articles.
Example:
<header>
<h1>Main Site Title</h1>
</header>
<section>
<header>
<h1>Article Title</h1>
</header>
</section>15. What is the difference between <figure> tag and <img> tag?
The <img> and <figure> tags serve different purposes in HTML5.
<img> Tag:
- Used to embed an image into a web page.
- It’s a self-closing tag.
- Contains attributes like
src,alt,width, andheight.
<figure> Tag:
- Introduced in HTML5 as a semantic container for self-contained content like images, diagrams, illustrations, or code snippets.
- Typically used with
<figcaption>to add a caption or description to the content. - Helps with semantic meaning, accessibility, and SEO.
Example:
<figure>
<img src="mountain.jpg" alt="Snowy mountain" />
<figcaption>Mount Everest, the highest mountain in the world.</figcaption>
</figure>16. Are the <datalist> tag and <select> tag the same?
No, the <datalist> and <select> tags are not the same, although both provide a list of options to the user.
<select> Tag:
- Creates a dropdown menu with predefined options.
- The user can only choose from the listed options.
- Example:
<select>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
</select>