HTMLmarkup~8 mins

Opening and closing tags in HTML - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - Opening and closing tags

Read <html>

→Create HTML node

↓

Read <body>

→Create BODY node as child

↓

Read <p>

→Create P node as child

↓

Read text

→Add text to P

↓

Read </p>

→Close P node

↓

Read </body>

→Close BODY node

↓

Read </html>

→Close HTML node

The browser reads each opening tag to create elements in the DOM tree, adds text inside elements, and uses closing tags to know when elements end.

Render Steps - 7 Steps

Code Added:<html>

Before

→

After

[html]

The browser starts by creating the root HTML element.

🔧 Browser Action:Creates root HTML node in DOM

Code Sample

This code shows a paragraph with text inside the body of an HTML document.

HTML

<html>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Render Quiz - 3 Questions

Test your understanding

What does the browser do when it reads the closing </p> tag in step 5?

AIt ignores the tag

BIt creates a new paragraph element

CIt closes the paragraph element in the DOM

DIt deletes the paragraph element

Common Confusions - 2 Topics

Why does my text not appear inside the element?

If you forget the closing tag, the browser may not know where the element ends, causing layout issues. Always close tags properly as shown in steps 5, 6, and 7.

💡 Every opening tag needs a matching closing tag to wrap content correctly.

Can I omit closing tags for some elements?

Some tags like <img> are self-closing and don't need a closing tag. But most elements like <p> must have closing tags to define their content boundaries.

💡 Know which tags are self-closing and which need closing tags.

Property Reference

Tag Type	Example	Purpose	Effect on DOM
Opening tag	<p>	Starts an element	Creates element node in DOM
Closing tag	</p>	Ends an element	Closes element node in DOM
Self-closing tag	<img />	Element with no children	Creates element node without closing tag

Concept Snapshot

Opening tags start elements and create nodes in the DOM. Closing tags end elements and close nodes in the DOM. Text goes inside elements between tags. Some tags are self-closing and don't need a closing tag. Properly paired tags ensure correct page structure and display.