HTMLmarkup~8 mins

What is an HTML element - Browser Rendering Explained

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - What is an HTML element

Read <html>

→Create HTML node

↓

Read <body>

→Create BODY node as child

↓

Read

→Create P node as child

↓

Add text node inside P

↓

Close P

↓

Close BODY

↓

Close HTML

The browser reads the HTML code from top to bottom, creating nodes for each element and nesting child elements inside their parents to build the DOM tree.

Render Steps - 3 Steps

Code Added:<html> element

Before

→

After

[HTML]
  (empty page)

The browser creates the root HTML element which will contain all other elements.

🔧 Browser Action:Creates root HTML node in DOM

Code Sample

This code creates a simple webpage with a paragraph showing the text 'Hello, world!'.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

Render Quiz - 3 Questions

Test your understanding

After step 2, what does the page show visually?

AA blank page with the body element created

BThe text 'Hello, world!' visible

CAn error message

DOnly the <html> tag visible

Common Confusions - 2 Topics

Why do I see nothing if I only write <html> without <body>?

The <body> element holds the visible content. Without it, the browser has no content to show on the page.

💡 Always put visible content inside <body> to see it in the browser.

Is the text inside visible on the page?

Yes, text inside is shown as a block paragraph with spacing around it.

💡 Text inside block elements like appears on its own line with space above and below.

Property Reference

Element	Description	Role in Page	Visual Behavior
<html>	Root element	Contains all content	Defines the document structure
<body>	Body element	Holds visible content	Displays page content
<p>	Paragraph element	Holds text	Displays block of text with margin

Concept Snapshot

An HTML element is a building block of a webpage. It starts with a tag like and may contain text or other elements. Elements nest inside each other forming the DOM tree. The <html> element is the root, <body> holds visible content, and shows text. Browsers read HTML top to bottom, creating nodes for each element. Visible content appears inside the body and its child elements.