w3docs logo

HTML Attributes

HTML attributes are used within the opening tag. They provide additional information about HTML elements. An attribute edits the default functionality of an element or offers functionality to specific element types that cannot function properly without them. The attribute has a name, followed by the equals sign(=) and a value placed inside the quotation marks("").

Syntax

<tag attribute="value">Your Text</tag>

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:

<!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

Click and go to the homepage

The id attribute

The HTML id attribute defines a unique id for each element.

Example of the HTML <div> tag with the 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:

<!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.

Example of the HTML <ol> tag with the start attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the ol tag with the "start" attribute:</h1>
    <ol>
      <li>List Item</li>
      <li>List Item </li>
      <li>List Item </li>
    </ol>
    <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 attributes to the HTML element. Be sure to add space between them.

It doesn’t matter in what sequence attributes are placed.

Syntax

<tag attribute1="value" attribute2="value">Your text</tag>

Example of the HTML <img> tag with the src, width, height and alt attributes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>This is Aleq's photo</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Content and IDL Attributes

In HTML, we have two groups of attributes: the content attribute and the IDL (Interface Definition Language) attribute.

The content attribute is set from the content (the HTML code) and you can set get it through the element.setAttribute() or element.getAttribute().Some content attributes, like readonly, disabled, required, are also called boolean attributes. A boolean attribute’s value is true, if it is present and false, if it is absent.

The IDL attributes are the ones that can be read or set with such JavaScript properties like element.foo. The IDL attributes reflect the content attributes. They always use the content attribute and return a value when you get it, saving something in the content attribute when setting it.

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 Groups inline-elements in a document. span="2"
src Defines the source of the element. src="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 Defines one or more classnames 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 headers 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 yet is not relevant.
high <meter> <meter>
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. /td>
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>
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.
onsuspendt <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 an element’s tabbing order.
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 additional information about an element.
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.

Practice Your Knowledge

Which of the following statements about HTML attributes are true?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?