What is an HTML element - Browser Rendering Explained

Render Flow - What is an HTML element

Read <html>

→Create HTML node

↓

Read <body>

→Create BODY node as child

↓

Read <p>

→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

After step 2, what does the page show visually?

A A blank page with the body element created

B The text 'Hello, world!' visible

C An error message

D Only 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 <p> visible on the page?

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

💡 Text inside block elements like <p> 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 <p> 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 <p> shows text. Browsers read HTML top to bottom, creating nodes for each element. Visible content appears inside the body and its child elements.

Practice

1. What is an HTML element?

easy

A. A tag that wraps content to tell the browser how to display it

B. A style rule that changes colors on a page

C. A script that runs in the browser

D. A file format for images

Solution

1. Step 1: Understand the role of tags in HTML

   HTML elements use tags to wrap content and give instructions to the browser.

2. Step 2: Differentiate elements from styles and scripts

   Styles and scripts are separate parts; elements define structure and content.

3. Final Answer:

   A tag that wraps content to tell the browser how to display it -> Option A

4. Quick Check:

   HTML element = tag wrapping content [OK]

Hint: Elements wrap content with tags to show in browser [OK]

Common Mistakes:

• Confusing elements with CSS styles
• Thinking elements are scripts
• Believing elements are image files

2. Which of the following is the correct syntax for an HTML element?

easy

A. <div>This is content</div>

B. {div}This is content{/div}

C. [div]This is content[/div]

D. (div)This is content(/div)

Solution

1. Step 1: Identify the correct tag format in HTML

   HTML elements use angle brackets < and > for tags, not braces or brackets.

2. Step 2: Check opening and closing tags

   The opening tag <div> and closing tag </div> correctly wrap the content.

3. Final Answer:

   <div>This is content</div> -> Option A

4. Quick Check:

   HTML tags use < > brackets [OK]

Hint: HTML tags always use < and > brackets [OK]

Common Mistakes:

• Using curly braces or square brackets instead of angle brackets
• Forgetting the slash in closing tags
• Mixing tag symbols

3. What will the browser display for this HTML code?

<p>Hello <strong>World</strong>!</p>

medium

A. Hello <strong>World</strong>!

B. Hello World!

C. Hello <p>World</p>!

D. !;tg&gnorts/;tl&dlroW;tg&gnorts;tl& olleH

Solution

1. Step 1: Understand how tags affect display

   The <p> tag creates a paragraph, and <strong> makes text bold but does not show tags.

2. Step 2: Visualize the rendered text

   The browser shows "Hello " normal, "World" bold, and "!" normal, but tags are hidden.

3. Final Answer:

   Hello World! -> Option B

4. Quick Check:

   Tags format text, not show tags [OK]

Hint: Tags format text; browser hides tag symbols [OK]

Common Mistakes:

• Thinking tags appear as text
• Ignoring the effect of <strong>
• Confusing tags with visible characters

4. Find the error in this HTML element:

<h1>Welcome to my site<h1>

medium

A. There is no error

B. The opening tag should be <h2> instead

C. The closing tag should be </h1>, not <h1>

D. The text should be inside <p> tags

Solution

1. Step 1: Check the closing tag syntax

   HTML closing tags must have a slash, so <h1> is incorrect as a closing tag.

2. Step 2: Correct the closing tag

   The correct closing tag is </h1> to properly close the heading element.

3. Final Answer:

   The closing tag should be </h1>, not <h1> -> Option C

4. Quick Check:

   Closing tags need a slash / [OK]

Hint: Closing tags always start with [OK]

Common Mistakes:

• Forgetting the slash in closing tags
• Using wrong tag names for closing
• Thinking opening and closing tags are identical

5. Which of these is a self-closing HTML element?

hard

A. <p>Text</p>

B. <div></div>

C. <h1>Title</h1>

D. <br />

Solution

1. Step 1: Identify self-closing elements

   Self-closing elements do not have separate closing tags and end with a slash inside the opening tag.

2. Step 2: Check each option

   <br /> is a line break and self-closes; others have separate closing tags.

3. Final Answer:

   <br /> -> Option D

4. Quick Check:

   Self-closing tags end with / inside < > [OK]

Hint: Self-closing tags end with /> inside angle brackets [OK]

Common Mistakes:

• Thinking all elements need closing tags
• Confusing self-closing with empty tags
• Missing the slash in self-closing tags