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.