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
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 alton<img>(hurts accessibility).
- Using presentational attributes (like bgcolor) instead of CSS.
Checks for Understanding
- Name three void elements.
- What’s the difference between global and element-specific attributes?
Show answers
- img,- br,- hr,- meta,- input,- link(any three).
- Global attributes work on most elements; element-specific attributes only apply to certain elements.
Exercises
- Build a small profile card using id,class, anddata-*attributes.
- Create an accessible image with descriptive alttext and a caption (use<figure>/<figcaption>).