HTML Tags

HTML tags are the building blocks of every webpage. They define the structure and content of your page. Each tag has a specific purpose, such as creating headings, paragraphs, links, and images.

What is an HTML Tag?

An HTML tag is enclosed in angle brackets. Most tags come in pairs: an opening tag and a closing tag.

<p>This is a paragraph</p>

The opening tag is <p> and the closing tag is </p>.

Basic Structure of Tags

HTML elements usually consist of:

<tagname>Content goes here</tagname>

Types of HTML Tags

HTML tags can be grouped into different types based on how they work and how they are used in a webpage.

1. Paired Tags (Container Tags)

These tags have both an opening tag and a closing tag. They wrap content inside them.

<p>This is a paragraph</p>
<div>Content goes here</div>

2. Unpaired Tags (Empty Tags)

These tags do not require a closing tag. They are self-contained.

<br>
<hr>
<img src="image.jpg" alt="Image">

3. Block-level Tags

Block-level elements take up the full width of the page and always 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>

4. Inline Tags

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

<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 Tags

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 Tags

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

← Previous Next →