Semantic vs non-semantic elements in HTML - Performance Comparison

Performance: Semantic vs non-semantic elements

MEDIUM IMPACT

This affects page rendering speed and accessibility, impacting how browsers and assistive technologies process content.

Structuring a webpage with meaningful HTML elements

HTML

<header>Site Title</header>
<nav>Menu</nav>
<main>Content</main>
<footer>Footer info</footer>

Semantic elements provide built-in meaning and structure, helping browsers render content more predictably and assistive technologies navigate easily.

📈 Performance GainReduces CLS by providing stable layout roles and improves accessibility without extra scripting.

Structuring a webpage with meaningful HTML elements

HTML

<div id="header">Site Title</div>
<div id="nav">Menu</div>
<div id="main">Content</div>
<div id="footer">Footer info</div>

Non-semantic <div> elements do not convey meaning to browsers or assistive tools, causing extra work for accessibility and potential layout shifts.

📉 Performance CostIncreases CLS due to lack of inherent layout roles and may cause extra reflows when scripts add ARIA roles.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Non-semantic <div> with ARIA roles	More DOM nodes with added attributes	Multiple reflows if roles added dynamically	Higher paint cost due to layout shifts	[X] Bad
Semantic elements like <header>, <nav>	Fewer DOM operations, native roles	Single reflow on load	Lower paint cost with stable layout	[OK] Good

Rendering Pipeline

Semantic elements help the browser understand page structure early, optimizing style calculation and layout. Non-semantic elements require extra scripts or ARIA attributes to convey meaning, adding complexity.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage due to potential reflows caused by dynamic role assignments on non-semantic elements

Core Web Vital Affected

CLS

This affects page rendering speed and accessibility, impacting how browsers and assistive technologies process content.

Optimization Tips

1Use semantic HTML elements to provide meaning and structure.

2Avoid overusing <div> and <span> for layout without semantic purpose.

3Semantic elements reduce layout shifts and improve accessibility.

Performance Quiz - 3 Questions

Which HTML element improves accessibility and reduces layout shifts?

A <div>

B <main>

C <span>

D <b>

DevTools: Performance

How to check: Record a performance profile while loading the page. Look for layout shifts and reflows in the summary and flame chart.

What to look for: High layout shift scores or multiple reflows indicate poor semantic usage causing CLS issues.

Practice

1. Which of the following is a semantic HTML element?

easy

A. <article>

B. <div>

C. <span>

D. <b>

Solution

1. Step 1: Understand semantic elements

   Semantic elements clearly describe their meaning, like <article> which represents an independent piece of content.

2. Step 2: Identify non-semantic elements

   <div> and <span> are generic containers without meaning. <b> is a presentational element without semantic meaning.

3. Final Answer:

   <article> -> Option A

4. Quick Check:

   Semantic element = <article> [OK]

Hint: Semantic tags describe content meaning, non-semantic don't [OK]

Common Mistakes:

• Confusing <div> as semantic
• Thinking <span> is semantic
• Thinking <b> is semantic

2. Which of these is the correct syntax for a semantic header element in HTML5?

easy

A. <heading>Welcome</heading>

B. <head>Welcome</head>

C. <header>Welcome</header>

D. <head><title>Welcome</title></head>

Solution

1. Step 1: Recognize semantic header tag

   <header> is the semantic tag for page or section headers.

2. Step 2: Differentiate from <head>

   <head> contains metadata, not visible content. <heading> is not a valid HTML tag.

3. Final Answer:

   <header>Welcome</header> -> Option C

4. Quick Check:

   Semantic header = <header> [OK]

Hint: Use <header> for visible headers, not <head> [OK]

Common Mistakes:

• Using <head> for visible content
• Writing invalid <heading> tag
• Confusing metadata with page content

3. What will the browser display when rendering this HTML snippet?

<div><h1>Title</h1><p>Paragraph</p></div>

Choose the best description.

medium

A. Only the paragraph 'Paragraph' is shown

B. A heading 'Title' and a paragraph 'Paragraph' inside a generic container

C. An error because <div> cannot contain <h1>

D. The heading 'Title' is bold but paragraph is hidden

Solution

1. Step 1: Understand <div> usage

   <div> is a non-semantic container that can hold any flow content including headings and paragraphs.

2. Step 2: Check rendering of heading and paragraph

   The <h1> will display as a large bold heading, and <p> as a paragraph below it, both visible inside the container.

3. Final Answer:

   A heading 'Title' and a paragraph 'Paragraph' inside a generic container -> Option B

4. Quick Check:

   Non-semantic container shows all content [OK]

Hint: Div can hold headings and paragraphs without errors [OK]

Common Mistakes:

• Thinking div restricts content types
• Assuming heading is hidden
• Believing invalid nesting error occurs

4. Identify the error in this HTML code:

<section><div>Content</section></div>

medium

A. The tags are correctly nested with no errors

B. The <section> tag cannot contain a <div>

C. The <section> tag is missing a closing tag

D. The <div> tag is not closed before </section>

Solution

1. Step 1: Check tag nesting order

   The <div> opens inside <section> but closes after </section>, breaking proper nesting.

2. Step 2: Understand correct nesting rules

   Tags must close in reverse order of opening. Here, <div> should close before </section>.

3. Final Answer:

   The <div> tag is not closed before </section> -> Option D

4. Quick Check:

   Proper nesting = close inner tags first [OK]

Hint: Close inner tags before outer tags to avoid nesting errors [OK]

Common Mistakes:

• Ignoring tag closing order
• Thinking div can't be inside section
• Missing closing tags

5. You want to improve accessibility and SEO by replacing non-semantic tags with semantic ones. Which change is best for this code?

<div><div>Main content</div><div>Footer info</div></div>

hard

A. Replace outer <div> with <main> and inner footer <div> with <footer>

B. Replace all <div> with <section>

C. Replace outer <div> with <article> and inner footer <div> with <aside>

D. Keep all <div> tags because semantic tags are optional

Solution

1. Step 1: Identify semantic tags for main content and footer

   <main> is the semantic tag for main page content, and <footer> is for footer information.

2. Step 2: Replace non-semantic <div> with semantic tags

   Changing the outer <div> to <main> and the footer <div> to <footer> improves meaning and accessibility.

3. Final Answer:

   Replace outer <div> with <main> and inner footer <div> with <footer> -> Option A

4. Quick Check:

   Use <main> and <footer> for better semantics [OK]

Hint: Use <main> for main content, <footer> for footer info [OK]

Common Mistakes:

• Using <article> instead of <main> for main content
• Replacing all divs with <section> unnecessarily
• Ignoring semantic improvements