Semantic vs non-semantic elements in HTML - Quick Revision & Key Differences

Recall & Review

beginner

What is a semantic HTML element?

A semantic HTML element clearly describes its meaning to both the browser and the developer. For example, <header> means the top section of a page, and <article> means a piece of content. It helps with accessibility and SEO.

beginner

Give an example of a non-semantic HTML element.

Examples of non-semantic elements are <div> and <span>. They do not tell anything about their content or purpose. They are used mainly for styling or grouping content.

beginner

Why should we prefer semantic elements over non-semantic ones?

Semantic elements improve accessibility for screen readers, help search engines understand the page, and make the code easier to read and maintain.

beginner

Which element is semantic: <section> or <div>?

<section> is semantic because it defines a section of content with meaning. <div> is non-semantic and just groups content without meaning.

intermediate

How do semantic elements help keyboard navigation?

Semantic elements provide structure that assistive technologies use to help users navigate with a keyboard, making websites easier to use for people with disabilities.

Which HTML element is semantic?

A <span>

B <article>

C <div>

D <b>

is semantic because it describes a piece of content.

and are non-semantic containers. is for styling bold text without meaning.

What is the main benefit of using semantic elements?

A They reduce file size

B They make the page load faster

C They allow custom fonts

D They improve website accessibility and SEO

Semantic elements help screen readers and search engines understand the page structure, improving accessibility and SEO.

Which element is non-semantic?

A <div>

B <nav>

C <header>

D <footer>

is non-semantic; it does not describe its content. The others are semantic elements.

Why is <section> considered semantic?

A It groups related content with meaning

B It styles text bold

C It creates a clickable button

D It adds images

groups related content and gives it meaning, helping browsers and assistive tools.

Which is NOT a reason to use semantic elements?

A Better code readability

B Improved SEO

C Faster internet speed

D Enhanced accessibility

Semantic elements do not affect internet speed but improve readability, SEO, and accessibility.

Explain the difference between semantic and non-semantic HTML elements.

Think about how elements describe their content and why that matters.

Describe how semantic elements improve website accessibility and SEO.

Consider how meaning helps machines and people understand the page.