Elements, Tags, Attributes

HTML attributes can influence navigation, form behavior, media embedding, and JavaScript interactions. When working with user-provided content, never assume a value is safe just because it appears inside an HTML attribute.

Example: Unsafe String Construction

Suppose an application inserts user-provided text directly into an HTML attribute. If the value is not properly handled, an attacker may be able to break out of the intended attribute and inject markup.

For example, concatenating untrusted data into HTML strings can be dangerous:

// Conceptual JavaScript example — avoid this pattern:
const html = '<div title="' + userInput + '">Details</div>';

Safer approaches depend on the application. Prefer creating DOM elements and assigning text through properties such as textContent, and validate or safely handle URLs before placing them into navigation attributes. For server-rendered applications, use the framework's proper HTML escaping mechanisms.

Do not insert untrusted data into event-handler attributes such as onclick. Avoid inline JavaScript event handlers in modern application code and use event listeners where appropriate.

Remember: HTML syntax alone does not sanitize untrusted input. Security depends on how data is validated, escaped, and used in the application.

14. Real-World Example: A Course Card

Let's combine elements, attributes, and nesting rules in a simple course card suitable for a learning website.

<article class="course-card" id="html-course">
  <img
    src="html5-course.jpg"
    alt="HTML5 course illustration"
    width="320"
    height="180"
  >

  <div class="course-card__content">
    <p class="course-card__level">Beginner</p>

    <h2>HTML5 Mastery</h2>

    <p>
      Learn HTML elements, attributes, nesting,
      semantic markup and accessible page structure.
    </p>

    <a href="/courses/html5-mastery">
      View course
    </a>
  </div>
</article>

What this example demonstrates:

• <article> groups a self-contained course card.
• class attributes allow styling and reusable component patterns.
• id identifies the specific card in the document.
• src, alt, width, and height configure the image.
• The div groups the card's content.
• The heading identifies the course title.
• The anchor provides navigation to the course page.
• Every non-void element is properly nested and closed.

The image filename is an example. Replace it with a real image path when using this markup in your own project.

15. Common Mistakes and How to Fix Them

Mistake 1: Forgetting a Closing Tag

<strong>Important information

Fix:

<strong>Important information</strong>

Some omitted end tags are allowed by the standard, but do not rely on omission unless you understand the specific rule.

Mistake 2: Closing Tags in the Wrong Order

<div><p>Hello</div></p>