HTML Attributes

What Are HTML Attributes?

Attributes provide additional information or functionality to an HTML element. They modify how the element behaves or appears. Attributes are always included in the opening tag and are written as name–value pairs, with the value enclosed in quotes.

Common uses include linking to other pages, setting image sources, defining styles, identifying elements with IDs or classes, and controlling accessibility with ARIA attributes.

Example:

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

In this example:

a is the HTML element (anchor tag)
href is the attribute name
"https://example.com" is the attribute value

Best Practices:

Always use quotes around attribute values (single or double quotes are fine)
Use lowercase for attribute names (HTML is case-insensitive but lowercase is standard)
Only use valid attributes for the element type (e.g., src for images, href for links)

More examples:

<img src="photo.jpg" alt="A scenic view">
<input type="text" placeholder="Enter your name">
<div id="main-content" class="container"></div>

Basic Syntax

The format is:

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

Common Global Attributes

id: Unique identifier
class: Used for grouping and styling
style: Inline CSS (not recommended for large projects)
title: Tooltip shown on hover

<p id="intro" class="text" title="Intro text">Hello</p>

Tag-Specific Attributes

Some attributes are specific to certain elements:

`<a>` (links)

href: Target URL
target="_blank": Open in new tab

`<img>` (images)

src: Image file path
alt: Alternative text for screen readers
width, height: Dimensions

`<input>` (form fields)

type: Text, password, checkbox, etc.
value: Default field content
placeholder: Hint shown in field

Boolean Attributes

Boolean attributes do not require a value—just their presence in the tag is enough to enable them. You can optionally assign the attribute name as the value (e.g., checked="checked"), but in HTML5, simply including the attribute is standard.

<input type="checkbox" checked>

checked – Pre-selects a checkbox or radio button when the page loads.
```
<input type="checkbox" checked>
```
disabled – Prevents the user from interacting with the element (e.g., clicking a button or typing in a field).
```
<button disabled>Submit</button>
```
readonly – Makes an input field non-editable, but still allows the user to select and copy the text.
```
<input type="text" value="Read-only text" readonly>
```
required – Marks a form input as mandatory, preventing form submission until a value is provided.
```
<input type="email" required>
```

Best Practices

Always use quotes around attribute values
Use semantic attributes for accessibility (e.g., alt on images)
Prefer class for styling, not style

Practice Prompt

Add an image with src and alt, and create a link that opens in a new tab:

<img src="logo.png" alt="Company Logo" width="200">

<a href="https://www.example.com" target="_blank">Visit our site</a>

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic

Menu