HTML Attributes Reference

Complete list of HTML attributes with examples

About HTML Attributes

HTML attributes provide additional information about HTML elements. They are always specified in the start tag and usually come in name/value pairs. This reference covers standard HTML5 attributes with examples and usage information.

Global Attributes

Form Attributes

Media Attributes

Event Attributes

Global Attributes

Attribute	Description	Example	Applies To
class	Specifies one or more class names for an element	<div class="container main">	All HTML elements
id	Specifies a unique id for an element	<section id="main-content">	All HTML elements
style	Specifies inline CSS styles for an element	<p style="color: red;">	All HTML elements
title	Specifies extra information about an element (shown as tooltip)	<a href="#" title="More info">	All HTML elements
data-*	Used to store custom data private to the page	<div data-user-id="1234">	All HTML elements
hidden	Specifies that an element is not yet relevant	<div hidden>Content</div>	All HTML elements
lang	Specifies the language of the element's content	<p lang="fr">Bonjour</p>	All HTML elements
dir	Specifies the text direction (ltr/rtl)	<p dir="rtl">Text right-to-left</p>	All HTML elements
contenteditable	Specifies whether the content is editable	<div contenteditable="true">	All HTML elements
draggable	Specifies whether an element is draggable	<div draggable="true">	All HTML elements
spellcheck	Specifies whether the element is to have its spelling checked	<textarea spellcheck="true">	Editable elements
tabindex	Specifies the tabbing order of an element	<button tabindex="1">	All HTML elements

Form Attributes

Attribute	Description	Example	Applies To
action	Specifies where to send the form-data when a form is submitted	<form action="/submit.php">	<form>
method	Specifies the HTTP method to use when sending form-data	<form method="post">	<form>
name	Specifies the name of an input element	<input name="username">	Form elements
value	Specifies the value of an input element	<input value="default">	Form elements
placeholder	Specifies a short hint that describes the expected value	<input placeholder="Enter email">	<input>, <textarea>
required	Specifies that an input field must be filled out	<input required>	Form elements
disabled	Specifies that an input element should be disabled	<input disabled>	Form elements
readonly	Specifies that an input field is read-only	<input readonly>	Form elements
autocomplete	Specifies whether a form should have autocomplete on or off	<form autocomplete="off">	<form>, <input>
autofocus	Specifies that an input element should automatically get focus	<input autofocus>	Form elements
form	Specifies the form the element belongs to	<input form="form1">	Form elements
novalidate	Specifies that the form should not be validated	<form novalidate>	<form>
pattern	Specifies a regular expression to validate input	<input pattern="[A-Za-z]{3}">	<input>
min/max	Specifies the minimum/maximum value for an input	<input type="number" min="1" max="10">	<input>
step	Specifies the legal number intervals for an input	<input type="number" step="2">	<input>
multiple	Specifies that multiple values can be entered	<input type="file" multiple>	<input>, <select>
selected	Specifies that an option should be pre-selected	<option selected>Option</option>	<option>
checked	Specifies that an input element should be pre-selected	<input type="checkbox" checked>	<input>

Media Attributes

Attribute	Description	Example	Applies To
src	Specifies the URL of the media file	<img src="image.jpg">	<img>, <audio>, <video>, <script>, <iframe>
alt	Specifies an alternate text for images	<img src="logo.jpg" alt="Company Logo">	<img>, <area>
width/height	Specifies the width/height of an element	<img width="200" height="100">	<img>, <canvas>, <iframe>, <svg>
poster	Specifies an image to show while video is downloading	<video poster="preview.jpg">	<video>
controls	Specifies that media controls should be displayed	<video controls>	<audio>, <video>
autoplay	Specifies that media will start playing automatically	<video autoplay>	<audio>, <video>
loop	Specifies that media will start over when finished	<audio loop>	<audio>, <video>
muted	Specifies that audio output should be muted	<video muted>	<audio>, <video>
preload	Specifies how media should be loaded	<video preload="auto">	<audio>, <video>
playsinline	Specifies video should play inline on mobile	<video playsinline>	<video>
srcset	Specifies multiple image resources for different scenarios	<img srcset="small.jpg 500w, large.jpg 1000w">	<img>, <source>
sizes	Specifies image sizes for different page layouts	<img sizes="(max-width: 600px) 200px, 50vw">	<img>

Meta & Link Attributes

Attribute	Description	Example	Applies To
charset	Specifies the character encoding	<meta charset="UTF-8">	<meta>
name	Specifies a name for metadata	<meta name="description">	<meta>
content	Specifies the value associated with http-equiv or name	<meta name="viewport" content="width=device-width">	<meta>
http-equiv	Provides an HTTP header for information	<meta http-equiv="refresh">	<meta>
rel	Specifies relationship between documents	<link rel="stylesheet">	<link>, <a>, <area>
href	Specifies the URL of the linked resource	<link href="styles.css">	<link>, <a>, <area>, <base>
target	Specifies where to open the linked document	<a target="_blank">	<a>, <area>, <base>, <form>
download	Specifies that the target will be downloaded	<a download="filename">	<a>, <area>
media	Specifies what media the resource applies to	<link media="print">	<link>, <source>, <style>
type	Specifies the media type of the linked resource	<link type="text/css">	<link>, <script>, <style>, <a>, <embed>, <object>, <source>
integrity	Allows a browser to check fetched resource	<script integrity="sha384...">	<link>, <script>
crossorigin	Configures CORS requests for the element	<img crossorigin="anonymous">	<img>, <audio>, <video>, <link>, <script>

Scripting Attributes

Attribute	Description	Example	Applies To
async	Specifies script should execute asynchronously	<script async>	<script>
defer	Specifies script should execute after page parsing	<script defer>	<script>
onload	Script to run when element is loaded	<img onload="myFunction()">	All elements
onerror	Script to run when error occurs	<img onerror="handleError()">	All elements
onabort	Script to run when loading is aborted	<img onabort="handleAbort()">	<img>, <object>

Event Attributes

Attribute	Description	Example	Applies To
onclick	Script to run on mouse click	<button onclick="myFunction()">	All elements
ondblclick	Script to run on mouse double-click	<div ondblclick="myFunction()">	All elements
onmouseover	Script to run when mouse pointer moves over element	<div onmouseover="myFunction()">	All elements
onmouseout	Script to run when mouse pointer moves out of element	<div onmouseout="myFunction()">	All elements
onkeydown	Script to run when key is pressed down	<input onkeydown="myFunction()">	All elements
onkeyup	Script to run when key is released	<input onkeyup="myFunction()">	All elements
onchange	Script to run when value changes	<input onchange="myFunction()">	Form elements
onsubmit	Script to run when form is submitted	<form onsubmit="myFunction()">	<form>
onreset	Script to run when form is reset	<form onreset="myFunction()">	<form>
onfocus	Script to run when element gets focus	<input onfocus="myFunction()">	Form elements
onblur	Script to run when element loses focus	<input onblur="myFunction()">	Form elements
onselect	Script to run when text is selected	<input onselect="myFunction()">	<input>, <textarea>

HTML Attribute Best Practices

Do's:

Always use quotes around attribute values
Use semantic attributes like alt for images
Include required attributes for form elements
Use data-* attributes for custom data storage
Specify width and height for images to prevent layout shifts
Use appropriate input types and attributes for forms
Validate your HTML attributes

Don'ts:

Don't use deprecated attributes (like align or bgcolor)
Avoid inline styles when possible (use CSS classes)
Don't skip required attributes
Avoid using the same ID for multiple elements
Don't use event attributes for complex logic (use JavaScript instead)
Avoid unnecessary attributes
Don't forget accessibility attributes (alt, aria-*)

Try Our HTML Attributes Editor

Experiment with HTML attributes in our interactive editor:

Test different HTML attributes
See how attributes affect elements in real-time
Practice form validation with attributes
Experiment with media attributes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
</head>
<body>
  <!-- Form with attributes -->
  <form action="/submit" method="post">
    <input type="text" name="username" required placeholder="Username">
    <button type="submit">Submit</button>
  </form>
  
  <!-- Image with attributes -->
  <img src="image.jpg" alt="Description" width="400" height="300">
  
  <!-- Custom data attribute -->
  <div data-user-id="1234">User content</div>
</body>
</html>

< Previous (HTML Tags Reference)Next (HTML Forms) >