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.

<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

1. Block-level elements - Start on a new line and take up full width.
   Examples: <div>, <h1>, <p>, <table>, <form>
2. Inline elements - Do not start on a new line and only take up as much width as needed.
   Examples: <span>, , <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 → Element
• href → Attribute name
• https://html5andcss3.org → Attribute value
  

Common HTML Attributes

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.

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.