Elements, Tags, Attributes

<div>Content</div>

16. Practical Exercises

Complete these exercises before attempting the quiz. Use a modern browser and a code editor.

Exercise 1: Identify the Parts

Examine this element:

<a href="/about" class="nav-link">About Us</a>

Identify the opening tag, closing tag, element name, attributes, attribute values, and content.

Exercise 2: Correct the Markup

Fix the errors in the following code:

<div class="card" class="featured">
  <p>Learn <strong>HTML</p></strong>
  <img src="course.jpg"></img>
</div>

Check for duplicate attributes, incorrect nesting, and invalid use of a void element.

Exercise 3: Build a Profile Card

Create an HTML profile card that includes:

• An outer <article> with a class attribute.
• An image with a meaningful alt attribute.
• A heading for the person's name.
• A paragraph describing their role.
• A link to a portfolio page.

Exercise 4: Experiment with Attributes

Create a form input that has a unique ID, a name, an email type, a placeholder, and the required attribute.

<input
  type="email"
  id="contact-email"
  name="email"
  placeholder="Enter your email"
  required
>

Try removing required and observe how the browser's built-in validation behavior changes when the form is submitted. Remember that client-side validation is not a replacement for server-side validation.

Exercise 5: Inspect the DOM

1. Save a small HTML page in your editor.
2. Open the page in a browser.
3. Open Developer Tools using the browser's Inspect option.
4. Find the Elements or Inspector panel.
5. Expand the elements and identify parent, child, and sibling relationships.
6. Compare the DOM tree with the HTML source you wrote.

Browsers may repair malformed markup while parsing it, so the DOM tree can differ from the source text.

17. Lesson Summary