Semantic HTML — Interview Questions & Answers

Introduction to Semantic HTML

Ques: What is Semantic HTML?

Ans: Semantic HTML uses meaningful tags to describe the purpose of content rather than its appearance.

Example:

<header>, <footer>, <article>, <section>, <nav>, <main>, <aside>

Ques: Why is Semantic HTML important?

• Improves readability of code
• Enhances SEO (search engines understand structure)
• Boosts accessibility for screen readers
• Easier maintenance and teamwork

Ques: What’s the difference between Semantic and Non-Semantic elements?

Semantic Elements	Non-Semantic Elements
<header>, <footer>, <article>	<div>, <span>
Have a defined meaning	Have no inherent meaning
Improve SEO & Accessibility	Used for styling only

Common Semantic Elements

Ques: What are the common semantic elements in HTML and their purposes?

Ans: HTML provides several semantic tags that give meaning to web content:

• <header> – Defines the top section of a page or article, often with logo or navigation.
• <footer> – Represents the bottom section containing contact info or copyright.
• <main> – Defines the main content area unique to the page.
• <article> – Represents independent content, like a blog or news post.
• <section> – Groups related content within a page, usually with a heading.
• <aside> – Defines side content related to the main area, such as ads or sidebars.
• <nav> – Contains navigation links for website structure.

<header>
  <h1>Welcome to My Site</h1>
  <nav>...</nav>
</header>

<main>
  <article>
    <h2>HTML Interview Guide</h2>
    <p>Learn semantic tags...</p>
  </article>

  <section>
    <h2>About Us</h2>
    <p>We are a web design team...</p>
  </section>

  <aside>
    <h4>Related Posts</h4>
  </aside>
</main>

<footer>
  <p>© 2025 My Website</p>
</footer>

Ques: What is <figure> and <figcaption> used for?

Ans: To group images or media with their captions.

<figure>
  <img src="sunset.jpg" alt="Sunset">
  <figcaption>Beautiful Sunset at Beach</figcaption>
</figure>

Ques: What does the <time> tag represent?

Ans: Represents dates or times in a machine-readable format.

<time datetime="2025-10-27">October 27, 2025</time>

Ques: What is the purpose of <summary> and <details>?

Ans: <details> defines collapsible content, <summary> is the visible title.

<details>
  <summary>More Info</summary>
  <p>This is hidden until clicked.</p>
</details>

ARIA Roles in Semantic HTML

Ques: What are ARIA roles?

Ans: ARIA (Accessible Rich Internet Applications) defines attributes to make web apps accessible to assistive technologies.

Example:

<nav role="navigation"></nav>
<main role="main"></main>
<footer role="contentinfo"></footer>

Ques: What is the difference between <div> and <section>?

<div>	<section>
Non-semantic	Semantic
Used for styling	Used for grouping related content
No meaning to browsers	Carries meaning for structure

Ques: What is the difference between <article> and <section>?

<article>	<section>
Self-contained (can stand alone)	Related content part of a bigger topic
Used for blog posts, news	Used for dividing articles into parts

Ques: What’s the role of semantic HTML in responsive design?

Ans: It provides a logical structure that pairs well with CSS Grid, Flexbox, and media queries for accessible, responsive layouts.