HTML Elements

An HTML element is the basic building block of a web page. Everything seen on a web page — text, images, headings, buttons — is made up of HTML elements. Understanding what an element is and how it works is fundamental to writing HTML.

What is an HTML Element?

An HTML element consists of three parts:

1. Opening Tag – marks where the element begins
2. Content – the actual text or data inside
3. Closing Tag – marks where the element ends

<p>This is a paragraph.</p>

<!-- Structure:
  <p>   = Opening Tag
  This is a paragraph.  = Content
  </p>  = Closing Tag
-->

Types of HTML Elements

1. Normal Elements (with opening and closing tags)

Most HTML elements have both an opening and a closing tag. The content is placed between them.

<h1>Main Heading</h1>
<p>This is a paragraph of text.</p>
<strong>This text is bold.</strong>
<em>This text is italic.</em>

2. Void (Self-Closing) Elements

Some HTML elements do not have a closing tag. These are called void elements or self-closing elements. They do not wrap around content — they represent a single item on their own.

<br>        <!-- Line break -->
<hr>        <!-- Horizontal line -->
<img src="photo.jpg" alt="A photo">   <!-- Image -->
<input type="text">    <!-- Input field -->
<meta charset="UTF-8"> <!-- Meta info -->

Nested HTML Elements

HTML elements can be placed inside other elements. This is called nesting. The element placed inside is called the child, and the element it is placed inside is called the parent.

When nesting elements, always close the inner tag before closing the outer tag.

<!-- Correct Nesting -->
<p>This is <strong>bold text</strong> inside a paragraph.</p>

<!-- Wrong Nesting (overlapping tags - avoid this) -->
<p>This is <strong>wrong</p></strong>

Block-Level vs Inline Elements

HTML elements are categorized into two display types:

Common HTML Elements with Examples

<!-- Heading -->
<h1>This is a Heading</h1>

<!-- Paragraph -->
<p>This is a paragraph.</p>

<!-- Line break -->
<p>Line one.<br>Line two.</p>

<!-- Bold text -->
<p><strong>Important notice</strong></p>

<!-- Italic text -->
<p><em>Note: Read carefully.</em></p>

<!-- Link -->
<a href="https://example.com">Visit Website</a>

<!-- Image -->
<img src="logo.png" alt="Company Logo">

<!-- Unordered List -->
<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

The Empty Element

An element with no content is called an empty element. For example, <br> just inserts a line break — it has no text content.

<p>First line of text.<br>Second line starts here.</p>

Key Points to Remember

• An HTML element = opening tag + content + closing tag
• Some elements are self-closing (void) and do not need a closing tag
• Elements can be nested inside each other, but must be properly closed
• Block elements take full width; inline elements stay in line with text
• Always write HTML element names in lowercase (best practice)
• Proper nesting avoids unexpected display issues in browsers