Certified HTML5 Developer | HTML Attributes

Learning Resources
 

HTML Attributes

What are HTML Attributes?

HTML attributes provide additional information about elements. They are always included in the opening tag and follow the format:

<tagname attribute="value">Content</tagname>

For example:

<a href="https://www.example.com">Visit Example</a>

Here, href="https://www.example.com" is an attribute that defines the link destination.

Common HTML Attributes

1. The href Attribute (for Links)

Used in <a> (anchor) tags to specify the destination URL.

<a href="https://www.google.com">Google</a>

2. The src Attribute (for Images & Media)

Specifies the source (URL) of an image or media file.

<img src="image.jpg" alt="A sample image">

3. The alt Attribute (for Images)

Provides alternative text if an image fails to load.

<img src="image.jpg" alt="Descriptive text about the image">

4. The title Attribute (Tooltip Text)

Displays a tooltip when hovering over an element.

<p title="This is a tooltip">Hover over me!</p>

5. The style Attribute (Inline CSS)

Used to apply CSS styles directly to an element.

<p style="color: blue; font-size: 18px;">Styled paragraph</p>

6. The width and height Attributes (for Images & Videos)

Define the dimensions of an element.

<img src="image.jpg" width="200" height="100">

7. The target Attribute (for Links)

Defines how a link should open.

<a href="https://www.example.com" target="_blank">Open in new tab</a>
  • _self (default) → Opens in the same tab
  • _blank → Opens in a new tab
  • _parent → Opens in the parent frame
  • _top → Opens in the full body of the window

8. The id Attribute (Unique Identifier)

Gives an element a unique ID, often used with CSS or JavaScript.

<p id="intro">This is an introductory paragraph.</p>

9. The class Attribute (For Styling Multiple Elements)

Used to assign a CSS class to multiple elements.

<p class="highlight">This is highlighted text.</p>
<p class="highlight">Another highlighted text.</p>

CSS Example:

.highlight {
  color: red;
  font-weight: bold;
}

10. The lang Attribute (Language Specification)

Defines the language of a document.

<html lang="en">

11. The disabled Attribute (For Form Elements)

Disables an input field.

<input type="text" disabled>

12. The readonly Attribute (Non-Editable Fields)

Prevents users from editing the field, but allows selection.

<input type="text" value="Read-only text" readonly>

Example Code: Using Various HTML Attributes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Attributes Example</title>
    <style>
        .highlight { color: red; font-weight: bold; }
    </style>
</head>
<body>

    <h1 title="Main Heading">HTML Attributes Demo</h1>

    <p id="intro">This paragraph has an <strong>id</strong> attribute.</p>

    <a href="https://www.google.com" target="_blank">Visit Google</a>

    <img src="image.jpg" alt="A sample image" width="200">

    <p class="highlight">This text is styled using the class attribute.</p>

    <input type="text" value="Read-only field" readonly>

    <button disabled>Disabled Button</button>
 For Support