HTML Attributes
Use HTML attributes to provide additional information about HTML elements. Learn how to use HTML attributes with syntax and examples with W3docs tutorial.
HTML attributes are used within the opening tag. They provide additional information about HTML elements. An attribute provides metadata for an element or modifies its behavior. The attribute has a name, followed by the equals sign (=) and a value placed inside the quotation marks ("").
A quick mental model: think of an element as a noun and its attributes as adjectives that describe it. In <a href="https://www.w3docs.com">W3Docs</a>, the <a> element is the link, and the href attribute tells the browser where the link points. Without the attribute, the element would still exist, but it would have no destination.
Syntax
HTML Attributes syntax
<tag attribute="value">Your Text</tag>The attribute always lives inside the opening tag, never in the closing tag. An element can carry several attributes at once, each separated by a space.
The href attribute
The HTML <a> tag creates a link, the address of which is defined in the href attribute. In the example below, we have used the <a> tag with href attribute. Between the quotation marks we wrote the address of the page where we will go after clicking the link.
Example of the HTML <a> tag with the href attribute:
Attribute Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com">Click here and go to the homepage.</a>
</body>
</html>Result
The id attribute
The HTML id attribute defines a unique id for each element.
Example of the HTML <div> tag with the id attribute:
Example of the div tag with "id" attribute
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#text {
font-family: sans-serif;
font-size: 20px;
line-height: 28px;
color: #777777;
}
</style>
</head>
<body>
<h2>Example of the div tag with the "id" attribute</h2>
<div id="text">Here is some text for the div tag with the "id" attribute.</div>
</body>
</html>The style attribute
The style attribute defines the styling of an element, such as color, size, font and so on.
Example of the HTML <p> tag with the style attribute:
Example of the p tag with "style" attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Example of the p tag with the style attribute</h2>
<p style="color:#666666;font-size:18px;">Here is some text for the p tag with the "style" attribute.</p>
</body>
</html>The start attribute
The start attribute defines the start value of the first list item in an ordered list. The example below shows two lists side by side: the first has no start attribute, so it numbers from 1 by default; the second uses start="30", so its items are numbered 30, 31, 32.
Example of the HTML <ol> tag with the start attribute:
Example of the ol tag with the "start" attribute
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Default ordered list (starts at 1):</h2>
<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>
<h2>Ordered list with start="30":</h2>
<ol start="30">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>
</body>
</html>Multiple Attributes
You can add more than one attribute to an HTML element. Be sure to add a space between them.
It doesn’t matter in what sequence attributes are placed.
HTML Attributes example
<tag attribute1="value" attribute2="value">Your text</tag>Example of the HTML <img> tag with the src, width, height and alt attributes:
Example of the HTML img tag with multiple attributes
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading</h1>
<p>A photo with multiple attributes:</p>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Boolean attributes
Some attributes are boolean attributes: their presence alone means "true," and their absence means "false." Examples include disabled, checked, readonly, required, selected, and multiple.
For a boolean attribute, the value you write is irrelevant — what matters is whether the attribute exists on the element at all. These three forms are all equivalent and all disable the input:
<input disabled>
<input disabled="">
<input disabled="disabled">To make a boolean attribute "false," you do not set it to false — you remove it entirely. Writing disabled="false" still disables the input, because the attribute is present.
Example of boolean attributes:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Enabled input: <input value="You can type here"></p>
<p>Disabled input: <input value="You cannot type here" disabled></p>
<p>Checked by default: <input type="checkbox" checked> Accept terms</p>
</body>
</html>Attribute value quoting
You can write attribute values with double quotes, single quotes, or, in some cases, no quotes at all.
<a href="page.html">Double quotes (recommended)</a>
<a href='page.html'>Single quotes</a>
<a href=page.html>Unquoted</a>Double quotes are recommended. They are the most common style and let the value contain single quotes such as in title="It's a link".
Single quotes are useful when the value itself contains a double quote, for example title='He said "hello"'.
Unquoted values are risky. An unquoted value cannot contain spaces, and a space ends the value early. For instance, class=btn primary is read as a class of btn plus a separate primary attribute — not as two class names. Unquoted values also cannot contain =, quotes, or other special characters. To stay safe, always quote your attribute values.
Content and IDL Attributes
In HTML, an attribute has two faces: the content attribute (what is written in the markup) and the IDL attribute (the corresponding JavaScript property on the DOM element, where IDL stands for Interface Definition Language).
The content attribute is the literal value from the HTML source. You read and write it with element.getAttribute() and element.setAttribute(). For a form field, the content attribute usually represents the initial value.
The IDL attribute is a JavaScript property such as element.value. It reflects the content attribute but represents the element's current state, which can change as the user interacts with the page.
The difference is clearest on an <input> element. Given <input id="name" value="Anna">, if a user types Maria into the field:
const el = document.getElementById("name");
el.getAttribute("value"); // "Anna" — the content attribute (initial value from HTML)
el.value; // "Maria" — the IDL property (current value in the DOM)So when you need the value the user is actually seeing, read el.value; when you need the value originally written in the HTML, read el.getAttribute("value").
Some content attributes, like readonly, disabled, and required, are boolean attributes (see the section above): their value is true when present and false when absent.
The two tables below are a reference. The first lists the attributes you will reach for most often; the second is the full catalog, with the elements each attribute belongs to.
The list of the mostly used HTML Attributes:
| Attribute | Description | Example |
|---|---|---|
| alt | Defines an alternate text when the original element is not displayed. | alt="HTML Attributes" |
| height | Defines the height of the element. | height="250" |
| href | Defines the URL for a link. | href="https://www.w3docs.com/" |
| hreflang | Defines the language of the linked document. | hreflang="en" |
| id | Defines a unique id for an HTML element. | id="example" |
| lang | Defines the language of the document (used in <html> tag). | <html lang="en-US"> |
| rel | Defines the relationship between the target and linked documents. | rel="nofollow" |
| shape | Defines the shape of the element. | shape="circle" |
| span | Defines the number of columns spanned by a <col> or <colgroup> element. | span="2" |
| src | Defines the source of the element. | src="https://example.com/image.jpg" |
| start | Sets the start value of an ordered list (used in <ol> tag). | <ol start="30"> |
| style | Sets the CSS style of an HTML element (size, font, color, etc.). | style="color:red;text-align:right" |
| target | Defines where to open the link. | target="_blank" |
| wrap | Defines whether the text must be wrapped or not. | wrap="hard" |
| width | Defines the width of the element. | width="120" |
See also a list of HTML Global Attributes that can be used with any HTML element.
The full list of HTML Attributes:
| Attribute | Belongs to | Description |
|---|---|---|
| accept | <input> | Defines the kinds of files that are accepted by the server (only for type="file"). |
| accept-charset | <form> | Defines the character encodings used for the form submission. |
| accesskey | Global Attributes | Defines a shortcut key that will activate an element. |
| action | <form> | Defines where the form-data should be sent when a form is submitted. |
| align | HTML5 doesn’t support this attribute. | Defines the alignment according to nearby elements. CSS can be used instead of this attribute. |
| alt | <area>, <img>, <input> | Defines an alternate text if the original element doesn’t display. |
| async | <script> | Defines that the script is executed asynchronously. It is used only for external scripts. |
| autocomplete | <form>, <input> | Defines whether the autocomplete of the <form> or the <input> elements should be enabled. |
| autofocus | <button>, <input>, <select>, <textarea> | Defines that the element must automatically get focus when the page loads. |
| autoplay | <audio>, <video> | Defines that the audio or video will start playing when it is ready. |
| bgcolor | HTML5 doesn’t support this attribute. | Defines the background color of an element. CSS can be used instead of this attribute. |
| border | HTML5 doesn’t support this attribute. | Defines the width of the border of an element. CSS can be used instead of this attribute. |
| charset | <meta>, <script> | Defines the character encoding. |
| checked | <input> | Defines that an <input> element must be pre-selected when the page loads (for type="checkbox" or type="radio"). |
| cite | <blockquote>, <del>, <ins>, <q> | Defines a URL explaining the quote, deleted or inserted text. |
| class | Global Attributes | Defines one or more class names for an element. |
| color | HTML5 doesn’t support this attribute. | Defines the text color of an element. CSS can be used instead of this attribute. |
| cols | <textarea> | Defines the visible width of a text area. |
| colspan | <td>, <th> | Defines the number of columns that should be spanned by a table cell. |
| content | <meta> | Gives the value related the http-equiv or name attribute. |
| contenteditable | Global Attributes | Defines whether the content of an element can be edited or not. |
| controls | <audio>, <video> | Defines that audio or video controls must be displayed (for example a play or pause button and so on). |
| coords | <area> | Defines the coordinates of the area. |
| data | <object> | Defines the URL of the resource that will be used by the object. |
| data-* | Global Attributes | Stores custom data private to the page or application. |
| datetime | <del>, <ins>, <time> | Defines the date and time. |
| default | <track> | Defines that the track will be enabled if the preferences of the user don’t point out that another track would be more proper. |
| defer | <script> | Defines that the script is executed when the page finishes parsing. This attribute is used only for external scripts. |
| dir | Global Attributes | Defines the text direction for an element’s content. |
| dirname | <textarea>, <input> | Defines that the text direction will be submitted. |
| disabled | <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> | Defines that the specified element or group of elements must be disabled. |
| download | <a>, <area> | Defines that the target will be downloaded when a user clicks on the hyperlink. |
| draggable | Global Attributes | Defines if an element is draggable or not. |
| dropzone | Global Attributes | Defines if the dragged data is copied, moved, or linked, when it is dropped. |
| enctype | <form> | Defines how the form-data should be encoded when it is submitted to the server. This attribute is used only for method="post". |
| for | <label>, <output> | Specifies which form element(s) a label or calculation is linked to. |
| form | <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea> | Defines the name of the form that the element belongs to. |
| formaction | <button>, <input> | Defines where to send the form-data when a form is submitted. This attribute is used only for type="submit". |
| headers | <th>, <th> | Defines one or more header cells a cell is connected with. |
| height | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Defines the height of the element. |
| hidden | Global Attributes | Defines that an element is not relevant. |
| high | <meter> | Defines the upper bound of the range represented by the <meter> element. |
| href | <a>, <area>, <base>, <link> | Defines the URL of the page where the link goes to. |
| hreflang | <a>, <area>, <link> | Defines the language of the linked document. |
| http-equiv | <meta> | Gives the content attribute an HTTP header for the information or value. |
| id | Global Attributes | Defines a unique id for an element. |
| ismap | <img> | Defines an image as a server-side image-map. |
| kind | <track> | Defines the kind of text track. |
| label | <track>, <option>, <optgroup> | Defines the title of the text track. |
| lang | Global Attributes | Defines the language of the content of an element. |
| list | <input> | Cites a <datalist> element containing pre-defined options for an <input> element. |
| loop | <audio>, <video> | Defines that the audio or video will start again, every time when it is finished. |
| low | <meter> | Defines the range considered to be a low value. |
| max | <input>, <meter>, <progress> | Defines the maximum value. |
| maxlength | <input>, <textarea> | Defines the maximum number of characters that an element can contain. |
| media | <a>, <area>, <link>, <source>, <style> | Defines what media or device the linked document is optimized for. |
| method | <form> | Defines the HTTP method that should be used when sending form-data. |
| min | <input>, <meter> | Defines a minimum value. |
| multiple | <input>, <select> | Defines that more than one value can be entered by the user. |
| muted | <audio>, <video> | Defines that the audio output of the video must be muted. |
| name | <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea> | Defines the name of the element. |
| novalidate | <form> | Defines that the form mustn’t be validated when it is submitted. |
| onabort | <audio>, <embed>, <img>, <object>, <video> | Script that runs on abort. |
| onafterprint | <body> | Script that runs after the document is printed. |
| onbeforeunload | <body> | Script that runs when the document is going to be unloaded. |
| onblur | All visible elements. | Script that runs when the element loses its focus. |
| oncanplay | <audio>, <embed>, <object>, <video> | Script that runs when a file is ready to start playing. |
| oncanplaythrough | <audio>, <video> | Script that runs when a file can be played till the end without pausing for buffering. |
| onchange | All visible elements. | Script that runs when the value of the element is changed. |
| onclick | All visible elements. | Script that runs when the element is clicked. |
| oncontextmenu | All visible elements. | Script that runs when a context menu is triggered. |
| oncopy | All visible elements. | Script that runs when the content of the element is copied. |
| oncuechange | <track> | Script that runs when the cue in a <track> element changes. |
| oncut | All visible elements. | Script that runs when the content of the element is cut. |
| ondblclick | All visible elements. | Script that runs when the element is double-clicked. |
| ondrag | All visible elements. | Script that runs when the element is dragged. |
| ondragend | All visible elements. | Script that runs at the end of a drag operation. |
| ondragenter | All visible elements. | Script that runs when an element has been dragged to a valid drop target. |
| ondragleave | All visible elements. | Script that runs when an element leaves a valid drop target. |
| ondragover | All visible elements. | Script that runs when an element is dragged over a valid drop target. |
| ondragstart | All visible elements. | Script that runs at the start of a drag operation. |
| ondrop | All visible elements. | Script that runs at the beginning of a drag operation. |
| ondurationchange | <audio>, <video> | Script that runs when the length of the media changes. |
| onemptied | <audio>, <video> | Script that runs when something unexpected happens and the file becomes unavailable. |
| onended | <audio>, <video> | Script that runs when the media reaches the end. |
| onerror | <audio>, <video>, <embed>, <object>, <script>, <style>, <body> | Script that runs when an error occurs. |
| onfocus | All visible elements. | Script that runs when the element gets focus. |
| onhashchange | <body> | Script that runs when the anchor changes. |
| oninput | All visible elements. | Script that runs when the element catches user input. |
| oninvalid | All visible elements. | Script that runs when the element is invalid. |
| onkeydown | All visible elements. | Script that runs when a user is pressing a key. |
| onkeypress | All visible elements. | Script that runs when a user presses a key. |
| onkeyup | All visible elements. | Script that runs when a user releases a key. |
| onload | <body>, <iframe>, <input>, <img>, <script>, <style>, <link> | Script that runs when the loading of the finishes. |
| onloadeddata | <audio>, <video> | Script that runs when media data is loaded. |
| onloadedmetadata | <audio>, <video> | Script that runs when meta data is loaded. |
| onloadstart | <audio>, <video> | Script that runs when the file starts loading, before anything is actually loaded. |
| onmousedown | All visible elements. | Script that runs when a mouse button presses down on an element. |
| onmousemove | All visible elements. | Script that runs as far as the mouse pointer is moving over an element. |
| onmouseout | All visible elements. | Script that runs when a mouse pointer leaves an element. |
| onmouseup | All visible elements. | Script that runs when a mouse button is released over an element. |
| onmouseover | All visible elements. | Script that runs when a mouse pointer moves over an element. |
| onmousewheel | All visible elements. | Script that runs when a mouse wheel scrolls over an element. |
| onoffline | <body> | Script that runs when the browser starts working offline. |
| ononline | <body> | Script that runs when the browser starts working online. |
| onpagehide | <body> | Script that runs when a user navigates away from a page. |
| onpageshow | <body> | Script that runs when a user navigates to a page. |
| onpaste | All visible elements. | Script that runs when some content is pasted in an element. |
| onpause | <audio>, <video> | Script that runs when the media is paused. |
| onplay | <audio>, <video> | Script that runs when the media starts playing. |
| onplaying | <audio>, <video> | Script that runs when the media is playing. |
| onpopstate | <body> | Script that runs when the history of the windows changes. |
| onprogress | <audio>, <video> | Script that runs when the browser is in the process of getting the media data. |
| onratechange | <audio>, <video> | Script that runs when the playback rate changes. |
| onreset | <form> | Script that runs when a reset button in a form is clicked. |
| onresize | <body> | Script that runs when the browser window is resized. |
| onscroll | All visible elements. | Script that runs when the scrollbar of an element is being scrolled. |
| onsearch | <input> | Script that runs when the user writes something in a search field. |
| onseeked | <audio>, <video> | Script that runs when the seeking attribute is set to false pointing out that seeking has ended. |
| onseeking | <audio>, <video> | Script that runs when the seeking attribute is set to true and points out that seeking is active. |
| onselect | All visible elements. | Script that runs when the element is selected. |
| onstalled | <audio>, <video> | Script that runs when the browser can’t fetch the media data for some reasons. |
| onstorage | <body> | Script that runs when a Web Storage area is updated. |
| onsubmit | <form> | Script that runs when a form is submitted. |
| onsuspend | <audio>, <video> | Script that runs when fetching the media data is stopped before it is totally loaded. |
| ontimeupdate | <audio>, <video> | Script that runs when the playing position has changed. |
| ontoggle | <details> | Script that runs when the <details> element is opened or closed. |
| onunload | <body> | Script that runs when a page has unloaded. |
| onvolumechange | <audio>, <video> | Script that runs each time when the volume of a video or audio is changed. |
| onwaiting | <audio>, <video> | Script that runs when the media is paused, but at the same time is expected to continue. |
| onwheel | All visible elements. | Script that runs when the mouse wheel rolls up or down over an element. |
| open | <details> | Defines that the details should be visible. |
| optimum | <meter> | Defines what value is the optimal value for the gauge. |
| pattern | <input> | Defines a regular expression that the value of an <input> element is checked against. |
| placeholder | <input>, <textarea> | Defines a short hint describing the element’s expected value. |
| poster | <video> | Defines an image that will be shown while the video is downloading, or until the play button is hit by the user. |
| preload | <audio>, <video> | Defines if and how the audio or video should be loaded when the page loads. |
| readonly | <input>, <textarea> | Defines that the element is read-only. |
| rel | <a>, <area>, <link> | Defines the relationship between the current and the linked documents. |
| required | <input>, <textarea>, <select> | Defines that the element should be filled out before the form is submitted. |
| reversed | <ol> | Defines that the list order should be descending. For example 5,4,3... |
| rows | <textarea> | Defines the visible number of lines in a text area. |
| rowspan | <td>, <th> | Defines the number of rows that should be spanned by a table cell. |
| sandbox | <iframe> | Enables an additional set of restrictions for the content within an <iframe> element. |
| scope | <th> | Defines if a header cell is a header for a column, row, or group of columns or rows. |
| selected | <option> | Defines that an option must be pre-selected when the page loads. |
| shape | <area> | Defines the shape of the area. |
| size | <input>, <select>, <embed>, <iframe> | Defines the width, in characters (for <input>) or the number of visible options (for <select>). |
| sizes | <link>, <img>, <source> | Defines the size of the linked resource. |
| span | <col>, <colgroup> | Defines the number of columns to span. |
| spellcheck | Global Attributes | Defines if the grammar and spelling of the element should be checked or not. |
| src | <img>, <source>, <audio>, <video>, <script>, <track>, <embed>, <iframe> | Defines the URL of the media file. |
| srcdoc | <iframe> | Defines the HTML content of the page that should be shown in the <iframe> element. |
| srclang | <track> | Defines the language of the track text data. |
| srcset | <img>, <source> | Defines the URL of the image that can be used in different situations. |
| start | <ol> | Defines the start value of an ordered list. |
| step | <input> | Defines the legal number intervals for an input field. |
| style | Global Attributes | Defines an inline CSS style for an element. |
| tabindex | Global Attributes | Defines the tabbing order of an element. |
| target | <a>, <area>, <base>, <form> | Defines the target for where the linked document should be opened or where the form should be submitted. |
| title | Global Attributes | Defines additional information about an element. |
| translate | Global Attributes | Defines whether the element’s text content should be translated by the browser or translation tools. |
| type | <embed>, <input>, <object>, <a>, <button>, <link>, <menu>, <object>, <script>, <source>, <style> | Defines the type of element. |
| usemap | <object>, <img> | Defines an image as a client-side image-map. |
| value | <button>, <input>, <li>, <option>, <meter>, <progress>, <param> | Defines the value of the element. |
| width | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Defines the width of the element. |
| wrap | <textarea> | Defines how the text in a text area should be wrapped when it is submitted within a form. |
See also a list of HTML Global Attributes that can be used with any HTML element.
Practice
Practice
Which of the following statements about HTML attributes are true?
Practice
How do you make an input disabled with a boolean attribute?
Was this page helpful?