HTML pages are built using elements — the building blocks of a web page.
Each element defines a specific part of the content such as headings, paragraphs, images, or links.
Elements often include attributes that provide extra information about that element.
What Is an HTML Element?
An HTML element is everything between a start tag and an end tag.
<p>This is a paragraph.</p>In this example:
<p>→ Start tag</p>→ End tag- This is a paragraph → Content
- The entire line → HTML element
So, an element = start tag + content + end tag
HTML Element Syntax
Each HTML element usually follows this pattern:
<opening-tag>Content goes here</closing-tag><h1>Hello World!</h1>Here <h1> is the start tag, and </h1> is the closing tag.
Some elements don’t have content and don’t require a closing tag — these are called empty (void) elements.
<br>
<img src="image.jpg" alt="My Image">
<hr>Types of HTML Elements
- Block-level elements — Start on a new line and take up full width.
Examples:<div>,<h1>,<p>,<table>,<form> - Inline elements — Do not start on a new line and only take up as much width as needed.
Examples:<span>,<a>,<strong>,<em>,<img>
What Are HTML Attributes?
Attributes provide extra details about an element — such as its behavior, appearance, or linked data.
They always appear inside the opening tag and are written as name="value" pairs.
<a href="https://html5andcss3.org">Visit Our Site</a>Example Explained:
a→ Elementhref→ Attribute namehttps://html5andcss3.org→ Attribute value
Common HTML Attributes
| Attribute | Description | Example |
|---|---|---|
| id | Specifies a unique identifier for an element | <p id="intro">Welcome</p> |
| class | Groups elements for styling or scripting | <div class="box"></div> |
| style | Adds inline CSS styling | <p style="color:blue;">Hello</p> |
| title | Adds tooltip text | <abbr title="HyperText Markup Language">HTML</abbr> |
| src | Specifies the source of an image or media | <img src="logo.png"> |
| href | Defines link destination | <a href="https://example.com">Link</a> |
| alt | Adds alternate text for images | <img src="photo.jpg" alt="Nature view"> |
Attribute Rules
- Attributes are written inside the opening tag.
- Always use lowercase names for attributes.
- Always enclose values in quotes (single or double).
- You can use multiple attributes inside one tag.
<img src="pic.jpg" alt="My Photo" width="400" height="300">Nesting HTML Elements
Elements can be placed inside other elements — this is called nesting.
<p>This is a <strong>bold</strong> word inside a paragraph.</p>Here <strong> is nested inside <p>.
Always close nested tags in the reverse order they are opened.
Conclusion
HTML elements define the structure, and attributes define the behavior and properties of those elements.
Mastering both is essential to build well-structured, accessible, and dynamic web pages.
