HTML Tags, Elements and Attributes

After understanding the basic structure of an HTML document, the next important concept is understanding HTML Tags, Elements and Attributes.

These three concepts form the foundation of HTML. Almost every HTML page is created by combining elements and adding attributes whenever additional information or behaviour is required.

Remember:

Tags define HTML instructions, Elements represent complete pieces of HTML content, and Attributes provide additional information about an element.

1. What is an HTML Tag?

An HTML Tag is a special keyword enclosed within angle brackets < > that tells the browser how a piece of content should be interpreted.

Most HTML tags are written using an opening tag and a closing tag.

Example

<p>Welcome to CodeStep Academy.</p>

Here:

<p> is the opening tag.
</p> is the closing tag.
The text between them is the content.

Important:

The closing tag generally contains a forward slash / before the tag name.

2. Opening Tag and Closing Tag

An HTML element commonly consists of an opening tag, content and a closing tag.

<h1>Learn HTML</h1>

Part	Example	Purpose
Opening Tag	<h1>	Starts the element.
Content	Learn HTML	Contains the actual information.
Closing Tag	</h1>	Ends the element.

3. What is an HTML Element?

An HTML Element is the complete structure consisting of the opening tag, content and closing tag.

<p>HTML is easy to learn.</p>

The complete statement above is an HTML element.

Easy Definition:

Element = Opening Tag + Content + Closing Tag

Another Example

<h2>HTML Tutorials</h2>

The entire structure is the element, while <h2> and </h2> are the tags.

4. Tag vs Element

Tag	Element
A tag is an HTML instruction enclosed in angle brackets.	An element is the complete HTML structure.
Example: <p>	Example: <p>Hello</p>
Tags mark the beginning or end of an element.	Elements represent the complete content structure.

Exam Point:

Do not use the terms tag and element interchangeably when a question specifically asks for the difference.

5. Nested HTML Elements

An HTML element can contain another HTML element. Such elements are called nested elements.

Example

<p>
    Welcome to <strong>CodeStep Academy</strong>.
</p>

Here, the <strong> element is nested inside the <p> element.

Important Rule:

HTML elements should be properly nested. The element opened last should normally be closed first.

Correct Nesting

<p>
    <strong>Important Text</strong>
</p>

Incorrect Nesting

<p>
    <strong>Important Text
</p>
</strong>

6. What is an HTML Attribute?

An attribute provides additional information about an HTML element.

Attributes are generally written inside the opening tag.

Example

<p class="intro">Welcome to CodeStep Academy.</p>

Here:

class is the attribute name.
"intro" is the attribute value.

General Syntax:

<element attribute="value">

7. Common HTML Attributes

HTML provides many attributes that can be used with different elements.

Attribute	Purpose	Example
id	Provides a unique identifier.	<p id="intro">
class	Assigns one or more elements to a class.	<p class="note">
title	Provides additional advisory information.	<p title="Information">
style	Applies inline CSS styling.	<p style="color:red;">
lang	Specifies the language of the content.	<html lang="en">

8. Global Attributes

Some attributes can be used with most HTML elements. These are commonly called global attributes.

Global Attribute	Purpose
id	Uniquely identifies an element.
class	Associates an element with one or more classes.
style	Defines inline CSS.
title	Provides additional information.
lang	Specifies the language of content.
hidden	Indicates that an element is not currently displayed.

9. Empty or Void Elements

Some HTML elements do not contain content and therefore do not require a closing tag. These are commonly known as void elements.

Examples

<br>
<hr>
<img src="photo.jpg" alt="Student">
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

Element	Purpose
<br>	Creates a line break.
<hr>	Represents a thematic break.
<img>	Embeds an image.
<input>	Creates an input control.
<meta>	Provides metadata about the document.

Important:

Do not write unnecessary closing tags for void elements such as <img>, <br> and <input>.

Real-World Example: CodeStep Academy

School / Website Example

Suppose CodeStep Academy wants to display the heading "Learn HTML" with a short introductory paragraph.

<h1>Learn HTML</h1>

<p class="intro">
    Master HTML from beginner to advanced level.
</p>

In this example:

<h1> is the heading tag.
<h1>Learn HTML</h1> is the heading element.
class is an attribute.
"intro" is the attribute value.

Interview Questions

Question 1: What is an HTML tag?

Click to View Answer

An HTML tag is a keyword enclosed within angle brackets that defines or marks the beginning or end of an HTML element.

Question 2: What is the difference between an HTML tag and an element?

Click to View Answer

A tag is an HTML instruction such as <p>, whereas an element is the complete structure such as <p>Hello</p>.

Question 3: What is an attribute in HTML?

Click to View Answer

An attribute provides additional information about an HTML element and is normally written inside the opening tag.

Question 4: Where are HTML attributes generally written?

Click to View Answer

HTML attributes are generally written inside the opening tag of an element.

Question 5: What is a void element?

Click to View Answer

A void element is an HTML element that does not contain content and does not require a closing tag, such as <br> or <img>.

Exam Questions

Q1. Differentiate between an HTML tag and an HTML element.

Click to View Answer

A tag is a keyword enclosed in angle brackets and is used to define an HTML instruction. An element is the complete structure consisting of tags and content.

Q2. Identify the attribute and its value in the following code:

<p class="important">HTML</p>

Click to View Answer

Attribute: class

Value: "important"

Q3. Write any two examples of void elements.

Click to View Answer

<br> and <img>.

Q4. What is meant by nested HTML elements?

Click to View Answer

When one HTML element is placed inside another HTML element, the inner element is called a nested element.

Hands-On Practice

Create a simple HTML page containing:

A heading containing your name.
A paragraph introducing yourself.
A paragraph with a class attribute.
An image using the src and alt attributes.
A horizontal line.
A line break.

Challenge

Add an id attribute to your main heading and a title attribute to your introductory paragraph.

Common Beginner Mistakes

Confusing a tag with a complete element.
Forgetting the closing tag where one is required.
Incorrectly nesting HTML elements.
Writing attributes outside the opening tag.
Forgetting quotation marks around attribute values.
Trying to add closing tags to void elements.
Using the same id for multiple unrelated elements when a unique identifier is required.

Learning & Coding Tips

Learn the purpose of an element instead of memorising only its syntax.
Always check whether an element requires a closing tag.
Keep nested elements properly organised and indented.
Use meaningful id and class names.
Use attributes only when they provide useful information or functionality.
Practise writing HTML manually instead of depending entirely on code generators.

Quick Revision

Tag: A keyword enclosed within angle brackets.
Element: The complete HTML structure.
Attribute: Provides additional information about an element.
Nested Element: An element placed inside another element.
Void Element: An element that does not require a closing tag.
Common Attributes: id, class, title, style and lang.

Memory Formula:

Tag → Defines | Element → Structures | Attribute → Describes

Can You Answer These?

What is an HTML tag?
What is an HTML element?
How is a tag different from an element?
What is an HTML attribute?
Where is an attribute written?
What are global attributes?
What is a nested element?
What is a void element?
Name five common HTML attributes.
Why is correct nesting important?

Next Topic:

HTML Headings and Paragraphs