Intern / FresherHTML & CSS

What are semantic HTML elements and why do they matter?

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.

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 & CSS PDF More HTML & CSS questions

Related HTML & CSS interview questions

What is the CSS box model?

Every element is a box made of content, padding, border and margin. The default content-box size counts only the content; border-box includes padding and border in the width you set.

What is the difference between display none and visibility hidden in CSS?

display: none removes the element from the layout so it takes no space; visibility: hidden hides it but leaves the empty space, and the element can still be read in the accessibility tree in some cases.

What is the difference between inline, block and inline-block in CSS?

Block elements start on a new line and take the full available width; inline elements sit in the text flow and ignore width and height; inline-block sits in the flow but accepts width, height, padding and margin on all sides.

What is the difference between relative, absolute, fixed and sticky positioning in CSS?

Relative offsets an element from its normal place; absolute positions it against the nearest positioned ancestor; fixed is against the viewport; sticky sits in normal flow until a scroll threshold, then sticks.