Elements, Tags & Attributes

🌐 HTML5 🟢 Chapter 3 of 37 📂 Phase 02: Syntax & Text 📅 2026 Edition

📌 Covered in this chapter: Opening/Closing Tags · Nested Elements · Void (Self-Closing) Elements · Attribute Syntax · Boolean Attributes · Universal Global Attributes (id, class, style)

Welcome to Phase 2 (Chapter 3): Elements, Tags & Attributes! In this lesson, we dissect HTML building blocks: opening and closing tags, nested element hierarchies, void (self-closing) elements, attribute key-value formatting, boolean flags, and universal global attributes used across all HTML tags.

1HTML Element Anatomy

An HTML element is formed by an opening tag, attributes, inner content, and a closing tag:

HTML — Element Structure Anatomy ▶ Run in HTML Editor

<!-- 
  Opening Tag:  <p class="intro" id="first-para">
  Attributes:   class="intro", id="first-para"
  Inner Text:   Welcome to HTML5 Masterclass
  Closing Tag:  </p>
-->
<p class="intro" id="first-para">Welcome to HTML5 Masterclass</p>

2Void (Self-Closing) Elements

Most HTML elements contain text or nested child nodes. However, Void Elements cannot contain inner text or child nodes, and therefore do not have closing tags:

Void Tag	Function	Example Syntax
`<img>`	Embeds an image graphic.	`<img src="logo.png" alt="Logo">`
`<input>`	Renders an interactive form input control.	`<input type="text" name="user">`
`<br>`	Inserts a visual line break inside text.	`Line 1<br>Line 2`
`<hr>`	Inserts a thematic horizontal rule divider.	`<hr>`
`<meta>`	Defines document metadata.	`<meta charset="UTF-8">`
`<link>`	Links external CSS stylesheets or icons.	`<link rel="stylesheet" href="style.css">`

3Standard & Boolean Attributes

Standard Attributes: Key-value pairs written as name="value" (e.g. href="https://example.com" or type="password").

Boolean Attributes: Attributes whose presence implies a true value. You do not need to specify attribute="true":

HTML — Boolean Attributes Syntax ▶ Run in HTML Editor

<!-- Correct Boolean Attribute Examples -->
<input type="text" required disabled>
<option value="in" selected>India</option>
<audio controls autoplay muted></audio>

4Universal Global Attributes Reference

Global attributes can be applied to ANY valid HTML5 element:

Global Attribute	Purpose	Example
`id`	Unique identifier for single element targeted by CSS or JS.	`id="header"`
`class`	Space-separated list of CSS styling classes.	`class="btn primary"`
`style`	Inline CSS style rules.	`style="color: red;"`
`title`	Advisory tooltip text shown on mouse hover.	`title="Click to submit"`
`hidden`	Hides element from visual display and screen readers.	`hidden`
`tabindex`	Controls keyboard focus tab order.	`tabindex="0"`
`lang`	Sets element content language.	`lang="en"`

❓ Frequently Asked Questions (FAQ)

Q1: Can I reuse the same id attribute on multiple elements?

No! An id must be unique within a single HTML document. If you need to target multiple elements with the same styles or JS, use class attributes instead.

Q2: Should I write trailing slashes on void tags like <img />?

In HTML5, trailing slashes like <img /> are optional and ignored by browser parsers. Writing clean <img> is standard HTML5 convention.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on HTML5 Standards · Last updated August 2026