HTML Elements

HTML elements are the fundamental building blocks of every webpage. They define the structure, content, and layout of a website. Everything you see on a webpage—text, images, links, and sections— is created using HTML elements.

What is an HTML Element?

An HTML element consists of a start tag, content, and an end tag. It represents a complete unit of content in a webpage.

<p>This is a paragraph</p>

In this example, <p> is the opening tag, This is a paragraph is the content, and </p> is the closing tag. Together, they form an HTML element.

Basic Structure of an Element

Most HTML elements follow this structure:

<tagname>Content goes here</tagname>

Some elements also include attributes to provide additional information.

<a href="https://example.com">Visit</a>

Types of HTML Elements

HTML elements can be categorized based on their structure and display behavior.

1. Block-level Elements

Block-level elements take up the full width available and start on a new line.

<div>Block element</div>
<p>Paragraph</p>
<h1>Heading</h1>

HTML

▶ Run it

<!DOCTYPE html>
<html>
<head>
  <title> Block-level Tags</title>
</head>
<body>

  <div style="background-color:red">Block element</div>
  <p style="background-color:red">Paragraph</p>
  <h1 style="background-color:red">Heading</h1>

 

</body>
</html>

Never Skip the End Tag

Most HTML elements require a closing (end) tag. Skipping the end tag can lead to unexpected results or broken layouts in your webpage.

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

In the example above, the first paragraph is not properly closed, which can confuse the browser and cause rendering issues.

✅ Always close your tags properly:

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

⚠️ Note: Some elements like <br> and <img> are exceptions and do not require closing tags.

2. Inline Elements

Inline elements only take up as much width as necessary and do not start on a new line.

<span>Inline text</span>
<a href="#">Link</a>
<strong>Bold text</strong>

HTML

▶ Run it

<!DOCTYPE html>
<html>
<head>
  <title>Inline Tags</title>
</head>
<body>

  <span style="background-color:red">Inline text</span>
  <strong style="background-color:red" >Bold text</strong>

  <a href="#" style="background-color:red">Link</a>

</body>
</html>

Common HTML Elements

Headings

<h1>Main Heading</h1>
<h2>Subheading</h2>

Paragraph

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

Links

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

Images

<img src="image.jpg" alt="Sample Image">

Nested Elements

HTML elements can be placed inside other elements. This is called nesting.

<p>This is <strong>important</strong> text.</p>

Tip: Understanding HTML elements (not just tags) helps you build well-structured, semantic, and maintainable webpages.

← Previous Next →