HTML Tags and Attributes – Complete Guide with Examples

HTML is the foundation of every website.
To build webpages, HTML uses tags to define elements and attributes to give those elements extra information.

Understanding HTML tags and attributes is essential because they:

Define the structure of a webpage
Control how content behaves
Help browsers understand your content
Improve accessibility and SEO

This guide explains everything in a clear, teacher-style tone, perfect for students and beginners learning HTML for the first time.

What Are HTML Tags?

HTML tags are keywords enclosed in angle brackets (< >) that tell the browser how to display or structure content.

Example

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

<p> → Opening tag
</p> → Closing tag
Content goes between the tags

Types of HTML Tags

1. Paired (Container) Tags

These tags have opening and closing tags.

Examples:

<p></p>
<h1></h1>
<div></div>
<a></a>

2. Empty (Self-Closing) Tags

These tags do not need a closing tag.

Examples:

<br>
<hr>
<img>
<input>

Commonly Used HTML Tags (Beginner List)

Tag	Purpose
`<html>`	Root of HTML document
`<head>`	Metadata section
`<title>`	Page title
`<body>`	Visible content
`<h1>`–`<h6>`	Headings
`<p>`	Paragraph
`<a>`	Link
`<img>`	Image
`<div>`	Block container
`<span>`	Inline container

What Are HTML Attributes?

HTML attributes provide additional information about HTML elements.

Attributes are written:

Inside the opening tag
As name="value"

Example

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

href → attribute name
URL → attribute value

Basic Structure of an Attribute

<tag attribute="value">Content</tag>

Common HTML Attributes (Beginner-Friendly)

Attribute	Used With	Purpose
`href`	`<a>`	Link destination
`src`	`<img>`	Image source
`alt`	`<img>`	Image description
`id`	Any	Unique identifier
`class`	Any	Group styling
`style`	Any	Inline CSS
`title`	Any	Tooltip text

Example: Tag with Multiple Attributes

👉 One tag can have multiple attributes.

Global Attributes (Work with All Tags)

Some attributes can be used with any HTML element.

Attribute	Purpose
`id`	Unique identification
`class`	Styling/grouping
`style`	Inline CSS
`title`	Tooltip
`hidden`	Hide element

Real-World Example: HTML Page Using Tags & Attributes

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

<h1>Welcome</h1>
<p>This is my first webpage.</p>

<a href="https://google.com" target="_blank">Go to Google</a>

<img src="photo.jpg" alt="Profile Photo">

</body>
</html>

HTML Tags vs HTML Attributes (Key Difference)

Feature	HTML Tags	HTML Attributes
Purpose	Define elements	Add extra info
Location	Angle brackets	Inside opening tag
Example	`<p>`	`href`, `src`
Mandatory	Yes	Optional (mostly)

Common Beginner Mistakes

Forgetting closing tags
Writing attributes outside tags
Missing quotes around values
Using invalid attribute names
Using inline styles instead of CSS

Best Practices for HTML Tags and Attributes

Use lowercase tags and attributes
Always use quotes for attribute values
Use semantic tags where possible
Avoid inline styles
Write clean, readable HTML

FAQs: HTML Tags and Attributes

What are HTML tags?

Tags define elements and structure content on a webpage.

What are HTML attributes?

Attributes provide extra information about HTML elements.

Can one tag have multiple attributes?

Yes, separated by spaces.

Are attributes mandatory?

Some are optional; some (like src for <img>) are required.

Should attribute names be lowercase?

Yes, it’s a best practice.