HTML — Attribute Reference

What & Why: Why Attributes Matter

In HTML, a tag is just a container that tells the browser what kind of element you want.
An attribute is a piece of information that you attach to that tag to give it extra detail.
Think of a tag like a plain box and an attribute like a label on the box that says how to use it.

Attributes can:

• point the browser to files (images, links)
• set default values (form fields)
• give hints to browsers (alt text, target)
• add styles directly (style)
• store custom data for JavaScript (data-*)

Using attributes correctly lets you build richer, more accessible, and more interactive pages.

---

Attribute Syntax

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

• tagname – the element you’re using (e.g., <img>, <a>)
• attribute – the name of the property you’re setting
• value – the information the attribute holds

Rules

1. Attribute names are case‑insensitive and usually written in lower‑case.
2. Attribute values are usually wrapped in double quotes (" "). Single quotes (' ') are also valid.
3. Some attributes don’t need a value – they’re called boolean attributes. They’re either present or absent.

---

Boolean Attributes

Boolean attributes are true when they appear, false when they’re missing.

Attribute	Element	What it does
disabled	<button>	Prevents clicking
checked	<input type="checkbox">	Marks the box as checked
readonly	<input>	Makes a field read‑only
required	<input>	Forces the user to fill it

Example

<input type="checkbox" checked>
<button disabled>Can't click</button>

What the browser displays

• The checkbox appears already ticked.
• The button is greyed out and unclickable.

---

Attribute Values

Most attributes need a value that can be:

• Text (alt="Cute cat").
• URL (src="image.jpg").
• Number (width="200").
• CSS (style="color: red;").
• JSON (in data-* attributes).

Text vs. URL

Text attributes are plain words. URL attributes must be a valid address.
If you forget the quotes around a URL that contains a space, the browser will break it.

Common mistake

<a href=www.example.com>Link</a>  <!-- Wrong -->

Good to know: Always wrap attribute values in quotes to avoid parsing errors.

---

Common Attribute Categories

Category	Typical attributes	Purpose
Identification	id, class	Find elements with CSS or JavaScript
Content	src, href, alt, title	Point to resources or provide extra info
Behavior	onclick, onload, target	Add interactivity
Presentation	style, width, height	Inline styling and sizing
Data	data-*	Store custom data for scripts

---

Practical Example 1: Images

<img src="cute-cat.jpg" alt="A cute cat sleeping" width="300" height="200">

What the browser displays

A 300‑pixel wide image of a sleeping cat. If the image can’t load, the browser shows the alt text “A cute cat sleeping”.

---

Practical Example 2: Links

<a href="https://openai.com" target="_blank" rel="noopener noreferrer">
  Visit OpenAI
</a>

What the browser displays

• A clickable link that opens OpenAI’s site in a new tab. The rel attribute protects the new tab from accessing the original page.

---

Practical Example 3: Forms

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input id="name" name="name" type="text" placeholder="Your name" required>
  <button type="submit">Submit</button>
</form>

What the browser displays

A simple form with a single text field that must be filled before the Submit button works. The placeholder shows “Your name” when the field is empty.

---

Practical Example 4: Custom Data

<div data-user-id="42" data-role="admin">
  Admin panel
</div>

JavaScript can later read data-user-id and data-role to tailor the page.

---

Practical Example 5: Inline Style

<p style="font-weight: bold; color: navy;">
  This paragraph is bold and navy.
</p>

What the browser displays

*A paragraph rendered in bold navy text.

Common mistake: Mixing CSS rules inside the style attribute without proper semicolons can break the whole attribute.

---

Quick Reference Table

Attribute	Example Value	When to Use
src	"logo.png"	Images, scripts, stylesheets
href	"https://example.com"	Links
alt	"Company logo"	Images for accessibility
id	"header"	Target a single element
class	"btn primary"	Style groups of elements
style	"color:red;"	Quick, one‑off styling
data-*	"data-id='123'"	Store data for scripts

---

Common Mistakes Checklist

• Forgetting to put quotes around attribute values.
• Using the wrong attribute name (href vs src).
• Mixing uppercase and lowercase inconsistently (e.g., SRC).
• Leaving trailing spaces inside quotes.
• Using boolean attributes incorrectly (e.g., checked="false").

---

Mini Practice

1. Create an <img> tag that loads photo.jpg, has a width of 400, and an alt text of "Mountain view".
2. Write an <a> link that opens https://github.com in the same tab and has a title attribute saying "GitHub".
3. Add a <button> that is disabled and displays the text "Not available".
4. Create a <div> with a custom data attribute data-status="active" and give it a class of "badge".
5. Style a <p> with inline CSS to make the text italic and green.

---