Suggest an edit

Improve this article

Refine the answer for “Which attributes are used most often in practice?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

In a web developer's everyday work, the most commonly used are **global attributes** (which fit any tag) and **specific** ones (typical for links, images, forms). Below are the most in-demand ones, grouped by type.

---

### 1. **Global attributes**: applicable to any element

| Attribute | Purpose | Example |
|---|---|---|
| `id` | A unique identifier for the element (used in CSS, JS) | `<div id="header">` |
| `class` | A class name for grouping and styling | `<p class="text">` |
| `style` | Inline CSS styles | `<h1 style="color:red;">` |
| `title` | A tooltip on hover | `<button title="Click">` |
| `lang` | The language of the content | `<html lang="en">` |
| `hidden` | Hides the element | `<div hidden>` |
| `tabindex` | Defines the focus order during keyboard navigation | `<input tabindex="1">` |

---

### 2. **Link attributes** `<a>`

| Attribute | Purpose | Example |
|---|---|---|
| `href` | The destination address | `<a href="https://site.com">` |
| `target` | Where to open the link (`_blank`, `_self`, etc.) | `<a target="_blank">` |
| `rel` | The relationship between pages, important for SEO and security | `<a rel="noopener">` |

---

### 3. **Image attributes** `<img>`

| Attribute | Purpose | Example |
|---|---|---|
| `src` | The path to the file | `<img src="photo.jpg">` |
| `alt` | Alternative text (for accessibility and SEO) | `<img alt="Landscape">` |
| `width`, `height` | The dimensions of the image | `<img width="300" height="200">` |
| `loading` | Lazy loading (`lazy`, `eager`) | `<img loading="lazy">` |

---

### 4. **Form attributes** `<form>`, `<input>`, `<button>`

| Attribute | Purpose | Example |
|---|---|---|
| `type` | The field type (`text`, `password`, `email`, etc.) | `<input type="email">` |
| `name` | The field name for submitting data | `<input name="user">` |
| `value` | The default value | `<input value="Text">` |
| `placeholder` | A hint inside the field | `<input placeholder="Enter your name">` |
| `required` | A required field | `<input required>` |
| `checked` | A checked checkbox/radio | `<input type="checkbox" checked>` |
| `disabled` | Disables the element | `<button disabled>` |
| `action` | The URL for submitting the form | `<form action="/submit">` |

---

### 5. **Media attributes**

| Attribute | Purpose | Example |
|---|---|---|
| `controls` | Shows playback controls | `<video controls>` |
| `autoplay` | Automatic playback | `<audio autoplay>` |
| `loop` | Looping | `<video loop>` |
| `muted` | No sound | `<video muted>` |

---

### Summary:

| Category | Commonly used attributes |
|---|---|
| Global | `id`, `class`, `style`, `title` |
| Links | `href`, `target`, `rel` |
| Images | `src`, `alt`, `loading` |
| Forms | `type`, `name`, `placeholder`, `required`, `value` |
| Buttons | `disabled`, `onclick` |
| Media | `controls`, `autoplay`, `loop` |

---

**In short:**
In everyday development, `class`, `id`, `href`, `src`, `alt`, `type`, `name`, `placeholder`, `required`, `disabled`, and `style` come up the most: they control the structure, style, behavior, and accessibility of elements on the page.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts508 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.