HTML Basics

HTML Elements & Attributes

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.

Example

html

<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:

html

<opening-tag>Content goes here</closing-tag>

Example

html

<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.

Void Elements Example

html

<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.

Example

html

<a href="https://html5andcss3.org">Visit Our Site</a>

Example Explained:

a → Element
href → Attribute name
https://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.

Example

html

<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.

Example

html

<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.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

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.

PreviousHTML Structure NextHTML Headings