HTML — Elements

Anatomy of an element

An HTML element usually has three parts:

<p>Hello there</p>

Part	Name	Purpose
`<p>`	Opening tag	Starts the element
`Hello there`	Content	What the visitor sees
`</p>`	Closing tag	Ends the element (note the `/`)

The whole thing — opening tag + content + closing tag — is one element.

Tags are case-insensitive (<P> works), but lowercase is the universal convention:

<p>Lowercase — standard</p>
<P>Works, but nobody writes this</P>

Empty elements

Some elements have no content, so they never close. These are called empty elements:

<br>     <!-- line break -->
<hr>     <!-- horizontal divider -->
<img src="cat.jpg" alt="A cat">
<input type="text">

They carry their information in attributes instead of inner text. <img> above says what to show via src — there's nothing left to put inside.

Elements nest inside each other

Elements can contain other elements:

<p>
  My cat is <strong>very</strong> fluffy.
</p>

This is called nesting. The page itself is one giant nesting: <body> contains <p>, which contains <strong>.

The one nesting rule that matters

Close elements in the reverse order you opened them — last opened, first closed:

<!-- Correct: strong closes before p -->
<p><strong>Bold text</strong></p>

<!-- Wrong: overlapping like crossed rubber bands -->
<p><strong>Bold text</p></strong>

Browsers will try to fix bad nesting, and different browsers may "fix" it differently — meaning your page can break unpredictably.

Visualizing nesting

<p>
├── "My cat is "
├── <strong>
│   └── "very"
└── " fluffy."

Block vs inline (a first peek)

Two big families of elements:

Block elements (<p>, <h1>, <div>) take the full width and stack vertically.
Inline elements (<strong>, <em>, <a>) sit inside text, flowing with it.

<h1>Block: gets its own line</h1>
<p>This paragraph has an <strong>inline bold word</strong> inside it.</p>

Renders as:

Block: gets its own line

This paragraph has an inline bold word inside it.

(The heading occupies its own line; the bold word flows within the sentence.)

We'll go much deeper on this in the Block & Inline lesson.

Common mistake: forgetting a closing tag entirely. Symptom: everything after your new element looks wrong — often all bold or all linked. Hunt for the missing </...>.

Mini Practice

Write a page containing:

A paragraph with one bold word (<strong>)
A paragraph with one italic word (<em>)
A line break splitting one paragraph into two lines (<br>)

Then deliberately remove one closing tag, save, refresh, and observe how the browser guesses wrong. Understanding breakage teaches faster than understanding success.

Next: attributes — extra information inside tags →

Frequently Asked Questions about Elements

What is Elements in HTML?

Elements is a fundamental concept in HTML. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Elements?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Elements.

Why is Elements important in HTML?

Elements is essential for HTML development. Understanding this concept will help you write better code and solve real-world problems more effectively.