Chapter 3 — Tags, Elements & Attributes

Learning Outcome

Understand the difference between tags, elements, and attributes — and write structured HTML using them correctly.

← 02 - Document Structure & Syntax | Next → 04 - Text Formatting & Content

3.1 Tags vs Elements

These two words are often confused — they mean different things.

<!-- <p> is the opening TAG -->
<!-- </p> is the closing TAG -->
<!-- <p>Hello World</p> is the ELEMENT -->

<p>Hello World</p>

3.2 Paired vs Self-Closing Tags

Paired (normal) elements — have both opening and closing tags:

<h1>This is a heading</h1>
<p>This is a paragraph</p>
<a href="#">This is a link</a>

Self-closing / Void elements — no closing tag, no content:

<br>       <!-- line break -->
<hr>       <!-- horizontal rule / divider -->
<img src="photo.jpg" alt="A photo">
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

HTML5 vs XHTML

In HTML5 you write <br>. In XHTML you write <br />. Both are accepted in HTML5, but <br> is more common today.

3.3 Attributes — Syntax & Rules

Attributes provide extra information about an element. They sit inside the opening tag only.

Syntax:

attribute="value"
<img src="cat.jpg" alt="A tabby cat" width="300" height="200">
     ^^^            ^^^               ^^^^^         ^^^^^^
     attr           attr              attr           attr

Attribute Rules

Always written in the opening tag
Values go in double quotes
Multiple attributes separated by spaces
Attribute names are case-insensitive (lowercase is best practice)
Some attributes are boolean — just their name is enough: required, disabled, checked

3.4 Common Attributes

Universal Attributes (work on any tag)

<p id="intro" class="highlight" title="Welcome text">
  Hello, welcome!
</p>

<!-- data-* attribute example -->
<button data-user-id="42" data-role="admin">Edit</button>

Element-Specific Attributes

3.5 id vs class — Key Differences

<!-- id — unique landmark -->
<section id="about">...</section>

<!-- class — reusable style group -->
<p class="card-text">First card</p>
<p class="card-text">Second card</p>
<p class="card-text">Third card</p>

🚀 Recommended Projects

Project 1 — Personal Profile Card

Build an HTML profile card using <div>, <img>, <p>, <h2>, and <a>. Use id and class attributes to label each section. No CSS — just structure.

Project 2 — Attribute Showcase Page

Create a page demonstrating at least 8 different attributes: title, style, id, class, src, alt, href, placeholder. Add a comment above each element explaining which attribute you're demonstrating.

📌 Quick Recall

Tag = just <p> | Element = <p>content</p>
Void elements have no closing tag: <br>, <img>, <input>, <hr>, <meta>
id = unique (one per page) | class = reusable (many elements)
Attributes always go in the opening tag with attribute="value" syntax
Boolean attributes: required, disabled, checked — no value needed