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.
| 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"> |
| 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"> |
| 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"> |
| 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"> |
| Attribute | Purpose | Example |
|---|
controls | Shows playback controls | <video controls> |
autoplay | Automatic playback | <audio autoplay> |
loop | Looping | <video loop> |
muted | No sound | <video muted> |
| 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.