HTML Attributes

HTML Attributes: Configuring Element Behavior and Metadata

HTML attributes add extra information and configuration directly inside an element's opening tag. Most attributes use a name="value" format, letting you set link destinations, image paths, tooltips, or styling hooks.

Core Attributes Every Developer Uses

While HTML defines dozens of element-specific attributes, a core set appears on nearly every page you build:

• href: Sets the target URL on anchor (a) links.
• src and alt: Supply the file path and fallback description for img, audio, or video elements.
• id and class: Label elements uniquely (id) or in reusable groups (class) for CSS and JavaScript.
• lang: Declares the page language on the root html tag for screen readers and search engines.
• title: Displays a small native hover tooltip when a pointer pauses over an element.

Attributes and Boolean Flags in Action

Some attributes are boolean flags, meaning their presence alone enables the feature without needing a value. Common examples include disabled, required, checked, and hidden.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Attributes Demo</title>
</head>
<body>
    <p>Read the <a href="/tutorials/css" title="Open CSS tutorials">CSS guide</a> next.</p>

    <div id="author-card" class="card featured">
        <img src="/images/mentor-avatar.webp" alt="Senior developer mentor" width="120" height="120">
        <button type="button" disabled>Enrollment Closed</button>
    </div>
</body>
</html>

Common Mistakes to Avoid

• Leaving attribute values unquoted: Writing class=card featured splits the value at the space, so featured gets parsed as a separate broken attribute. Always wrap values in double quotes.
• Reusing the same id on multiple elements: Every id on a page must be unique. Use class when multiple elements share styling.
• Using title for critical instructions: Keyboard and touch-screen users cannot hover to trigger title tooltips, so keep vital instructions visible in text.

Frequently Asked Questions

Should I use single or double quotes for HTML attribute values?

Double quotes are the universal convention across HTML5 codebases. Single quotes are valid only when the attribute value itself contains double quotes.

Where do HTML attributes go?

Attributes always live inside the element's opening tag, separated from the tag name and each other by spaces, never inside the closing tag.