HTML Tags and Elements

By /

In the last chapter, you created your first HTML webpage. You saw code like <h1> and <p>. These are called HTML tags.

Let’s understand what HTML tags and elements are with complete examples.

What is an HTML Tag?

An HTML tag is a special word written inside < > that tells the browser what to do with a piece of content.. For example, we can use the <h1> tag to create a main heading.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Tag Example</title>
</head>
<body>

    <h1>My First Heading</h1>

</body>
</html>

Output

My First Heading

Here:

  • <h1> – Starts the main heading.
  • My First Heading – The text of the heading.
  • </h1> – Ends the main heading.

<h1> and </h1> are HTML tags.

Opening Tag and Closing Tag

Most HTML tags have two parts:-

  • Opening tag
  • Closing tag

Let’s see this with an example.

<!DOCTYPE html>
<html>
<head>
    <title>Paragraph Example</title>
</head>
<body>

    <p>This is my first paragraph.</p>

</body>
</html>

Output

This is my first paragraph.

Here:

  • <p> – Starts the paragraph.
  • This is my first paragraph. – The paragraph text.
  • </p> – Ends the paragraph.

Notice the / in </p>. The / tells the browser that the tag is ending.

So:

<p>    → Opening tag
</p>   → Closing tag

What is an HTML Element?

An HTML element is the complete thing made using a tag, including the opening tag, the content, and usually the closing tag.

<p>This is my first paragraph.</p>

The whole thing is called an HTML element.

An element contains the opening tag, the content, and the closing tag.

For example:

&lt;p>                    → Opening tag
This is my paragraph.  → Content
&lt;/p>                   → Closing tag

Together:

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

This complete code is an HTML element.

Let’s Use Different Elements Together

Now let’s create a webpage with a heading and two paragraphs.

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>

    <h1>About Me</h1>

    <p>My name is Rahul.</p>

    <p>I am learning HTML.</p>

</body>
</html>

Output

About Me

My name is Rahul.
I am learning HTML.

Here we used three HTML elements:

  • <h1>About Me</h1> – Creates the main heading.
  • <p>My name is Rahul.</p> – Creates the first paragraph.
  • <p>I am learning HTML.</p> – Creates the second paragraph.

You Can Use the Same Tag Again

You can use an HTML tag more than once on the same webpage.

For example, we can create three paragraphs:

<!DOCTYPE html>
<html>
<head>
    <title>My Paragraphs</title>
</head>
<body>

    <h1>My Day</h1>

    <p>I woke up early today.</p>

    <p>I went to school.</p>

    <p>I am now learning HTML.</p>

</body>
</html>

Output

My Day

I woke up early today.
I went to school.
I am now learning HTML.

The <p> tag is used three times here, and each one creates a separate paragraph.

Tag vs Element

This is the main difference you need to remember:

<!DOCTYPE html>
<html>
<head>
    <title>Tag and Element</title>
</head>
<body>

    <p>Hello!</p>

</body>
</html>

In the example above:

  • <p> is a tag.
  • </p> is a tag.
  • <p>Hello!</p> is an element.

So, tags are used to create HTML elements.

You don’t need to memorize the difference. As you write more HTML, it will become natural.

Quick Recap

  • HTML tags tell the browser what different parts of a webpage are.
  • Most HTML tags have an opening tag and a closing tag.
  • A closing tag has a /.
  • The content is written between the opening and closing tags.
  • The complete code made from the opening tag, content, and closing tag is called an HTML element.
  • <h1> is used to create a main heading.
  • <p> is used to create a paragraph.
  • The same tag can be used multiple times on a webpage.

Frequently Asked Questions (FAQs)

Q1. What are HTML Tags and Elements?

HTML Tags and Elements are the basic building blocks of an HTML webpage. Tags define different parts of a page, while an element usually includes the opening tag, content, and closing tag.

Q2. What is an HTML tag?

An HTML tag tells the browser what a particular part of a webpage is. For example, <h1> is used to create a main heading and <p> is used to create a paragraph.

Q3. What is an HTML element?

An HTML element is the complete structure made up of an opening tag, content, and closing tag. For example, <p>Hello!</p> is a complete HTML element.

Q4. What is the difference between an HTML tag and an HTML element?

In HTML Tags and Elements, a tag refers to individual parts such as <p> or </p>, while an element includes the opening tag, content, and closing tag, such as <p>Hello!</p>.

Q5. What are opening and closing tags in HTML?

An opening tag starts an element, such as <p>, while a closing tag ends it, such as </p>. The closing tag usually contains a / before the tag name.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top