Protected Learning Content

AICPE Gurukul content is created for learning purposes. Printing, copying and unauthorized reuse are restricted.

AICPE Learning Hub HTML with CSS
Chapter 4
Tags, Elements & Attributes
Previous HTML Document Structure Next Headings & Formatting
Chapter 4 | Core HTML Basics

Tags, Elements & Attributes

HTML is built with tags, elements and attributes. In this chapter, you will understand how HTML instructions are written, how content is wrapped, and how extra information is added to tags.

Start Learning Try Code
<h1>Welcome</h1> HTML Tag

Tags tell the browser how to treat the content.

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

Opening tag + content + closing tag create an element.

<a href="about.html">About Us</a> HTML Attribute

Attributes add extra details to a tag.

Learning Objectives

After This Chapter, You Will Understand

This chapter helps you read and write HTML code confidently.

Tags

Understand opening tags, closing tags and empty tags.

Elements

Understand how tags and content together form elements.

Attributes

Understand extra information such as href, src, alt, id and class.

Nesting

Understand parent-child structure and proper tag placement.

Basic Meaning

Tags, Elements and Attributes

These three concepts are the building blocks of HTML coding.

1 What is a Tag?

A tag is a keyword written inside angle brackets. It tells the browser what type of content is being used.

Example: <h1>, <p>, <a>, <img>

Most tags have an opening tag and a closing tag.

2 What is an Element?

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

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

The complete line above is called a paragraph element.

3 What is an Attribute?

An attribute gives extra information about an HTML tag. Attributes are usually written inside the opening tag.

Example: <a href="contact.html">Contact</a>

Here, href is an attribute that tells where the link should go.

Syntax

How HTML Code is Written

HTML follows a simple pattern that every beginner should understand clearly.

# Basic element syntax
<tagname>Content goes here</tagname>

# Element with attribute
<a href="about.html">About Us</a>

# Image tag as empty element
<img src="photo.jpg" alt="Student learning HTML">

Opening Tag

<p>

Starts an element.

Content

Hello Students

The actual text or information.

Closing Tag

</p>

Ends the element.

Golden Rule: Most HTML elements need both opening and closing tags. Some elements like image and line break are empty elements.
Attributes

Common HTML Attributes

Attributes help tags work more powerfully and meaningfully.

Attribute Use Example
href Specifies link destination <a href="about.html">About</a>
src Specifies image or media source <img src="logo.png">
alt Gives image description <img src="logo.png" alt="AICPE Logo">
id Gives unique identity to an element <section id="courses">
class Groups elements for CSS styling <div class="card">
title Shows extra tooltip information <p title="Important point">
lang Defines language of page or element <html lang="en">
Attribute Format: attribute-name="attribute-value"
Nesting

Parent and Child Elements

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

4 Correct Nesting

When one element is written inside another element, the outside element is called the parent and the inside element is called the child.

<section>
    <h2>About Us</h2>
    <p>We provide skill courses.</p>
</section>

5 Wrong Nesting

Tags must be closed in the correct order. Wrong nesting creates messy and confusing code.

# Wrong example
<p>This is <strong>important</p></strong>

# Correct example
<p>This is <strong>important</strong></p>
Practice Task: Create one section with a heading, paragraph, image and link. Use proper nesting and indentation.
Try It Yourself

Practice Tags, Elements and Attributes

Edit the code and click Run Code to see the output.

HTML Code Edit and run
Output Preview Browser result
Practice Task: Add one more paragraph, one more link and change the image alt text.
Common Mistakes

Mistakes Students Should Avoid

Correct tag writing is important for clean and professional HTML.

Wrong Habits

  • Forgetting closing tags
  • Writing attributes without quotes
  • Using the same id multiple times
  • Writing wrong image path in src
  • Using empty alt text for important images

Correct Habits

  • Close tags in proper order
  • Write attributes inside opening tag
  • Use one unique id per page section
  • Use class for repeated design groups
  • Write meaningful alt text for images
Remember: Tags define the content. Attributes add extra information. Correct nesting keeps HTML clean.
Quick Quiz

Test Your Understanding

Select the correct answers and check your score.

1. An HTML tag is written inside:

HTML tags are written inside angle brackets like <p>.

2. Which is a complete HTML element?

Opening tag + content + closing tag forms a complete element.

3. Which attribute is used to specify link destination?

href is used inside anchor tag to specify link destination.

4. Which attribute is important for image description?

alt gives a text description of an image.

5. Which attribute is best for repeated CSS styling?

class is useful for applying the same design to multiple elements.
Quick Revision

Remember These Points

Revise these before moving to Chapter 5.

Tag

A tag is written inside angle brackets and tells the browser what type of content is used.

Element

An element usually includes opening tag, content and closing tag.

Attribute

An attribute gives extra information to an HTML tag.

Empty Element

Some elements like img and br do not need closing tags.

ID

ID gives a unique identity to one element on the page.

Class

Class is used to group elements for styling and repeated design.

Previous Chapter Next Chapter: Headings & Formatting