Most developers know a handful of HTML attributes by heart. Few know all of them. The full list runs into the hundreds, scattered across global, form-specific, media, and event categories. This guide collects the attributes worth knowing, organised by what they do, with a focus on the ones that trip people up. Treat it as a reference, not a tutorial. Pin the tab, look up what you forgot, move on.
Key facts
- Global attributes like id, class, style, and hidden apply to most HTML elements.
- Form attributes such as action, method, and enctype control how a form submits data.
- Media attributes like controls, autoplay, and loop belong to audio and video tags.
- Table attributes including colspan and rowspan shape how data is laid out.
- Several attributes like align and bgcolor are deprecated and should be avoided.
Global attributes: the ones you reach for daily
Global attributes apply to nearly any HTML element. The basics are id for unique identification, class for styling hooks, style for inline CSS, and title for tooltips. Less obvious ones include contenteditable, which lets users edit element text in place, and spellcheck, which turns the browser's red squiggles on or off.
Accessibility and scripting attributes live here too. Tabindex controls the keyboard focus order. Lang sets the language for screen readers. Draggable and hidden round out the list.
Form attributes: where most bugs hide
Forms have their own vocabulary. Action is the URL the form posts to. Method is almost always get or post. Enctype matters whenever you upload files, and the wrong value silently breaks the upload.
On the input side, type, name, value, placeholder, and required are the core. Autocomplete, autofocus, and readonly are quality-of-life flags. Disabled, maxlength, min, max, and pattern add validation. For select menus, the multiple and size attributes change how the picker behaves.
Quick attribute decoder:
| Situation | Attribute | Example |
|---|---|---|
| Override form action per button | formaction | `<button formaction="/special">` |
| Skip browser validation | novalidate | `<form novalidate>` |
| Autofill hints | autocomplete | `<input autocomplete="email">` |
| Upload files | enctype="multipart/form-data" | `<form enctype="multipart/form-data">` |
| Restrict input length | maxlength | `<input maxlength="50">` |
| Date/time input | datetime | `<time datetime="2024-01-15">` |
Media and table attributes
Audio and video tags share a common set. Controls, autoplay, loop, muted, preload, and poster (for video) cover most needs. Src and type are the only must-haves. Buffered exposes timing data, though it is rarely used directly.
Tables use a tighter set. Colspan and rowspan merge cells. Scope defines whether a header cell applies to a column, row, or group.
Deprecated and obscure ones to skip
The reference list includes attributes no longer supported in modern HTML. Applet, marquee, and presentational attributes (align, bgcolor, color, valign) are gone or going. Using them produces inconsistent rendering and may break screen readers.
The exception is maintaining legacy code. Leave deprecated attributes alone unless doing a deliberate refactor. New code should rely on CSS for layout and styling.
Our analysis
Knowing the full list is less useful than knowing where to look. The real value of a reference is speed: when you cannot remember whether the input attribute is formnovalidate or novalidate, a search-friendly page saves minutes per fix.
The bigger lesson is that HTML is bigger than most people think. Even experienced developers routinely reinvent attributes that already exist. Autocomplete, for instance, is poorly used. Formaction and formmethod, which override a form's action and method for a specific submit button, are widely missed.
The trade-off is cognitive load versus capability. You can master the top twenty attributes and handle eighty percent of work. The remaining attributes exist for edge cases: special media controls, complex table layouts, accessibility patches. Prioritise according to what you actually build.
Who should care:
- Frontend developers:** Master global and form attributes first. These cover most daily work.
- Backend developers working with forms:** Pay special attention to enctype, method, and validation attributes. Getting these wrong causes silent failures.
- Accessibility-focused builders:** Prioritise lang, tabindex, and role-related attributes. These directly affect screen reader behaviour.
- Legacy code maintainers:** Learn what is deprecated, but do not rush to remove it without a plan.
Bottom line
HTML has more attributes than any one person can memorise, and that is fine. Keep a reference handy, learn the global and form sets first, and avoid the deprecated ones. The rest you can look up when you need it.
Key takeaways
- Memorise the global attributes first; they cover most use cases.
- Use any solid reference as a lookup, not a study guide.
- Avoid deprecated presentational attributes; rely on CSS.
- Pay attention to form-specific attributes like enctype, formaction, and pattern.
- Accessibility-related attributes (lang, tabindex, aria-*) are evolving fastest.
Frequently asked questions
What are HTML global attributes?
These are attributes like id, class, style, hidden, and tabindex that can be used on most HTML elements.
Which form attributes matter for file uploads?
Method should be post, and enctype should be multipart/form-data, otherwise the file will not be transmitted correctly.
Are attributes like align and bgcolor still valid?
No, they are deprecated. Use CSS for layout and styling in modern HTML.
What is the difference between colspan and rowspan?
Colspan merges a cell across multiple columns, rowspan merges it across multiple rows.
What does the formaction attribute do?
It lets a single form contain multiple submit buttons that send data to different URLs, overriding the form's action attribute.