EasyConcept

What are semantic HTML elements and why do they matter?

Technology:
HTML
Experience:
Intern,
Junior
Roles:
Frontend Developer,
Full Stack Developer
Topics:
Accessibility,
Browser & DOM

Quick answer

Semantic elements describe their meaning in the name, such as header, nav, main, article and footer, so browsers, assistive technology and search engines can understand the page structure.

Detailed explanation

A <div> or <span> says nothing about the content. <header>, <nav>, <main>, <article>, <section>, <aside> and <footer> tell the browser what that region is for. Screen readers use them as landmarks, and search engines use them as a hint about what is primary content.

Use one <main> per page, put the site chrome in <header> and <footer>, and wrap a self-contained story or card in <article>. Keep using <div> when you only need a styling hook. Pair landmarks with a clear heading order (h1 then h2) rather than skipping levels.

Key points

  • Semantic tags describe meaning, not just layout
  • They help accessibility, SEO and maintainability
  • div and span are still correct when there is no meaning to express
Download HTML PDFMore HTML questions

Related interview questions

  • HTMLMedium

    What is the difference between async and defer on script tags?

    Both download the script without blocking HTML parsing. defer waits until parsing finishes and runs scripts in document order; async runs a script as soon as it is downloaded, which can be before or after parsing and in any order.

    Mid-level 路 Senior 路 Browser & DOM
  • HTMLMedium

    How does the browser render a web page?

    The browser parses HTML into a DOM and CSS into a CSSOM, combines them into a render tree, computes layout (reflow), paints pixels and composites layers onto the screen.

    Mid-level 路 Senior 路 Browser & DOM
  • HTMLHard

    What are Core Web Vitals and how do you improve them?

    Core Web Vitals are Google鈥檚 field metrics for real-user experience: LCP (loading), INP (interactivity) and CLS (visual stability). They influence search ranking and are measured on real devices, not only Lighthouse.

    Senior 路 Performance
  • JavaScriptMedium

    What is event delegation in JavaScript?

    Event delegation means attaching one listener to a parent element and using event bubbling to handle events from its children, instead of adding a listener to each child.

    Junior 路 Mid-level 路 Browser & DOM

Free templates to practise with