Section and article in HTML - Browser Rendering Trace

Render Flow - Section and article

Read <section>

→Create SECTION node

↓

Read <article>

→Create ARTICLE node as child

↓

Read <h2>

→Create H2 node as child

↓

Add text 'Article Title'

↓

Close H2

↓

Read <p>

→Create P node as child

↓

Add text 'This is the article content.'

↓

Close P

↓

Close ARTICLE

↓

Close SECTION

The browser reads the HTML tags in order, building a tree of elements. It creates a section element, then inside it an article element with a heading and paragraph as children.

Render Steps - 4 Steps

Code Added:<section> element

Before

[Empty page]

→

After

[SECTION]
  (empty space inside)

Adding the section element creates a block container that takes full width and stacks content vertically.

🔧 Browser Action:Creates SECTION node and allocates block layout space

Code Sample

This code shows a section containing an article with a heading and paragraph, displayed as block elements stacked vertically.

HTML

<section>
  <article>
    <h2>Article Title</h2>
    <p>This is the article content.</p>
  </article>
</section>

Render Quiz - 3 Questions

After step 2, what do you see inside the section?

A A heading and paragraph inside the section

B An empty article block inside the section

C Only a heading inside the section

D Nothing visible inside the section

Common Confusions - 2 Topics

Why does the section not add any visible border or color by default?

Section and article are semantic containers without default styling, so they appear as empty blocks unless styled.

💡 Semantic elements group content but need CSS to show visible boundaries.

Why do the heading and paragraph appear stacked vertically inside article?

Headings and paragraphs are block elements, so they naturally stack one below the other.

💡 Block elements always start on a new line and stack vertically.

Property Reference

Element	Default Display	Semantic Meaning	Visual Behavior
section	block	Defines a thematic grouping of content	Takes full width, stacks content vertically
article	block	Represents a self-contained composition	Takes full width, stacks content vertically
h2	block	Section heading, level 2	Large bold text, block layout
p	block	Paragraph of text	Normal font size, block layout

Concept Snapshot

section and article are semantic block elements section groups related content article is a self-contained piece both display as block by default headings and paragraphs inside stack vertically no default visible styling