HTML Elements & Tags – Explained

---

1. What is an HTML Tag?

• A tag is a keyword inside angle brackets (< >) that tells the browser how to interpret content.
• Most tags come in pairs:
  • Opening tag: <p>
  • Closing tag: </p> (note the /)

Example:

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

Here <p> is the opening tag, </p> is the closing tag, and “This is a paragraph.” is the content.

---

2. What is an HTML Element?

• An HTML element is the complete structure:
  Opening tag + Content + Closing tag
• Example:

<h1>Hello World</h1>

This <h1>Hello World</h1> is a heading element.

Formula:

Element = Opening Tag + Content + Closing Tag

Some elements have no content (self-closing).

---

3. Self-Closing (Empty) Elements

• These elements don’t need a closing tag because they don’t wrap content.
• Examples:

<img src="photo.jpg" alt="My Photo">
<br>
<hr>

---

4. Types of HTML Elements

a) Block-level elements

• Start on a new line and take full width.
• Examples: <div>, <p>, <h1>–<h6>, <section>, <article>

b) Inline elements

• Stay in the same line with other content.
• Examples: <span>, <a>, <strong>, <em>

---

5. Nesting Elements

• Elements can be placed inside other elements.
• Must be properly nested (open/close in the correct order).
  ✅ Correct:

<p>This is <strong>important</strong> text.</p>

❌ Incorrect:

<p>This is <strong>important</p></strong>

---

6. Attributes in Tags

• Attributes give extra information about an element.
• Placed inside the opening tag.
  Example:

<a href="https://example.com" target="_blank">Visit Example</a>

Here:

• href → link destination
• target="_blank" → open in new tab

---