HTML – Elements
Chapter 3 • Beginner
In HTML, an element is more than just a tag. An element usually has:
- A start tag (opening tag)
- Some content (text or other elements)
- An end tag (closing tag)
Element vs tag
- Tag: The actual markup inside angle brackets, like <p> or </p>.
- Element: The complete structure including start tag, content, and end tag.
Example:
- <p>This is a paragraph</p>
- <p> → opening tag
- </p> → closing tag
- "This is a paragraph" → content
- Together they form a paragraph element.
Nested elements
You can put one element inside another. This is called nesting.
Example:
- <p>This is <b>very</b> important.</p>
Here:
- The <p> element contains text and a <b> element.
- The <b> element is nested inside the <p> element.
Rules for nesting:
- Always close inner elements before closing the outer element.
- Don’t overlap tags: <b><i>text</b></i> is incorrect nesting.
Correct nesting:
- <b><i>text</i></b>
Block-level vs inline elements (basic idea)
For now, just understand at a high level:
- Block-level elements (like <div>, <p>, <h1>) start on a new line and take full width.
- Inline elements (like <span>, <b>, <i>, <a>) stay inside the line and only take the width they need.
You will use both types to structure your page.
Empty elements
Some elements do not have any content and therefore have no closing tag. These are called empty (or void) elements.
Examples:
- <br> (line break)
- <hr> (horizontal line)
- <img> (image)
They contain only attributes inside the start tag.
Suggested image prompt
"Diagram showing an HTML element broken into parts: opening tag, content, closing tag, plus another diagram showing nested elements inside each other like boxes."
Interview-style questions from this topic
- What is the difference between an HTML tag and an HTML element?
- Give an example of a properly nested HTML element.
- What are empty elements? Give at least two examples.
- What is the difference between block-level and inline elements (in simple words)?
- Why is proper nesting of HTML elements important?
- What can go wrong if tags are not correctly nested?
Hands-on Examples
Nested Elements Example
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is an <u>underlined</u> paragraph.</p>
</body>
</html>In this example, the <i> and <u> tags are nested inside <h1> and <p> elements. The browser first understands the outer element (heading or paragraph) and then adds extra styling from the inner element (italic or underline). This shows how elements can be combined to create richer content.