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.

HTML Handbook