HTML Elements — Interview Questions & Answers
1. What Are HTML Elements
Ques: What is an HTML element?
Ans: An HTML element is a complete set of tags that defines content and its purpose on a web page.
Example:
<p>This is a paragraph.</p>
Ques: What is the difference between a tag and an element?
Ans: A tag is the markup (<p>), while an element includes the tag and its content (<p>Text</p>).
Ques: Can HTML elements be nested?
Ans: Yes, elements can contain other elements, forming a hierarchical DOM (Document Object Model).
2. Block-level vs Inline Elements
Ques: What is a block-level element?
Ans: It starts on a new line and takes up the full width available.
Examples: <div>, <p>, <section>, <h1>.
Ques: What is an inline element?
Ans: It appears within a line of text and only takes up as much width as necessary.
Examples: <span>, <a>, <strong>.
Ques: Can you nest block elements inside inline elements?
Ans: No, that’s invalid HTML. Block elements can contain inline ones, but not vice versa.
3. Headings and Paragraphs
Ques: How many heading levels does HTML support?
Ans: Six — <h1> to <h6> (from most to least important).
Ques: What is the purpose of the <p> tag?
Ans: It defines a paragraph of text and adds spacing before and after it by default.
4. Line Breaks & Horizontal Rules
Ques: What does the <br> tag do?
Ans: Inserts a line break without starting a new paragraph.
Ques: What is the purpose of <hr>?
Ans: Represents a thematic break or section divider.
5. <div> vs <span>
| Feature | <div> | <span> |
|---|---|---|
| Type | Block-level | Inline |
| Use | Structure/layout | Styling small inline content |
| Example | <div class="section">...</div> | <span class="highlight">text</span> |
Ques: Can you style a <span> like a <div>?
Ans: Yes, by setting display: block or display: inline-block in CSS.
6. Self-Closing & Empty Elements
Ques: What are self-closing (empty) elements?
Ans: Elements that don’t have content or a closing tag.
Examples: <br>, <hr>, <img>, <input>, <meta>, <link>.
7. Nesting & Hierarchy
Ques: Why is proper nesting important?
Ans: It ensures a valid DOM structure and prevents rendering or accessibility issues.
Example (correct):
<p><strong>Bold text</strong></p>
8. Advanced — Custom Elements
Ques: Can you create custom HTML elements?
Ans: Yes, using Web Components and the customElements.define() API in JavaScript.
Ques: Why use custom elements?
Ans: They allow creation of reusable, encapsulated UI components without relying on external frameworks.