HTML Attributes

HTML Attributes: Adding Properties and Metadata to Tags

HTML attributes provide extra information about HTML elements. They modify how an element behaves or appears on the web page.

Attribute Structure

Attributes are always written inside the opening tag. They usually come in name-value pairs like name="value".

<a href="https://example.com" target="_blank">Visit Web Page</a>

Essential HTML Attributes

Here are the most common attributes you will use daily:

1. href: Defines the URL destination for anchor link (<a>) tags.
2. src: Specifies the file path to an image (<img>) or script file.
3. alt: Provides fallback text for images if they fail to load or for screen readers.
4. id: Assigns a unique identifier to a single element on the page.
5. class: Assigns one or more class names to group elements for CSS styling.
6. lang: Declares the primary language of the web page inside the <html> tag.

Practical Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Attributes Example</title>
</head>
<body>

    <!-- Link attribute with secure new tab target -->
    <p>Check out <a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN Web Docs</a> for references.</p>

    <!-- Image tag with source, alt text, width, and height -->
    <img src="profile.jpg" alt="Developer portrait photo" width="150" height="150">

    <!-- Division element with id and class attributes -->
    <div id="main-card" class="card highlight">
        <p title="Hover tooltip text">Hover over this text to see the tooltip title attribute!</p>
    </div>

</body>
</html>

Best Practices

• Always quote attribute values: Write src="logo.png" instead of src=logo.png. Quoting values prevents syntax bugs when attribute values contain spaces.
• Never omit the alt attribute on images: Screen readers depend on alt text to describe images to visually impaired users. If an image is purely decorative, use an empty alt="".
• Use secure external links: When using target="_blank", always add rel="noopener noreferrer" to prevent tab-nabbing security risks on legacy browsers.
• Keep attribute names lowercase: HTML is case-insensitive, but lowercase attribute names (class="" instead of CLASS="") are the standard across modern frontend projects.

Self-Check Challenge

Create an <a> link tag that opens your favorite website in a new browser tab. Make sure to include the href, target, and rel attributes correctly!