HTML - Elements & Attributes

Overview

Estimated time: 35–45 minutes

Elements are the building blocks of HTML; attributes configure them. In this lesson, you’ll practice authoring elements, applying attributes, and avoiding invalid nesting.

Learning Objectives

• Create common elements and nest them correctly.
• Use global attributes (id, class, title, hidden, data-*).
• Apply element-specific attributes (a[href], img[src, alt], input[type]).

Prerequisites

• HTML - Basic Page Structure

Elements and nesting

<p>A paragraph with <strong>bold</strong> text.</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Follow valid nesting: list items must be inside <ul> or <ol>, <li> cannot be direct children of <p>, etc.

Void elements

Void elements have no closing tag: img, br, hr, meta, input, link.

<img src="cat.jpg" alt="A tabby cat" width="320">
<br>
<input type="email" placeholder="[email protected]">

Global attributes

<div id="profile" class="card" title="User profile" data-user-id="42">
  <p>Ada Lovelace</p>
</div>

Element-specific attributes

<a href="/about" rel="author">About</a>
<img src="portrait.jpg" alt="Portrait of Ada" width="200">
<input type="number" min="0" max="10" step="1">

Try it

Common Pitfalls

• Invalid nesting (e.g., placing <li> directly inside <p>).
• Empty or missing alt on <img> (hurts accessibility).
• Using presentational attributes (like bgcolor) instead of CSS.

Checks for Understanding

1. Name three void elements.
2. What’s the difference between global and element-specific attributes?

Exercises

1. Build a small profile card using id, class, and data-* attributes.
2. Create an accessible image with descriptive alt text and a caption (use <figure>/<figcaption>).