html tutorial - Attributes in HTML - html5 - html code - html form



  • An attributes is used to define characteristics of an HTML element.
  • Attributes are used to provide the additional information about an element.
  • HTML attribute is specified inside the start tag.
  • The name and value attributes is the important two parts of the HTML attributes.
    • name – Name of the attribute. Eg: align.
    • value – Value of the attribute. Eg: left, right, center.

Syntax for HTML attributes :

<p align="left">Wikitechy</p>

Attributes List

Attribute Belongs to Description
accept <input> Used to specify the types of files that the server accepts (only for type="file")
accept-charset <form> Used to specify the character encodings that are to be used for the form submission
accesskey Global Attributes Used to specify a shortcut key to activate/focus an element
action <form> Used to specify where to send the form-data when a form is submitted
align Not supported in HTML 5. Used to specify the alignment according to surrounding elements. Use CSS instead
alt <area>, <img>, <input> Used to specify an alternate text when the original element fails to display
async <script> Used to specify that the script is executed asynchronously (only for external scripts)
autocomplete <form>, <input> Used to specify whether the <form> or the <input> element should have autocomplete enabled
autofocus <button>, <input>, <keygen>,
<select>, <textarea>
Used to specify that the element should automatically get focus when the page loads
autoplay <audio>, <video> Used to specify that the audio/video will start playing as soon as it is ready
bgcolor Not supported in HTML 5. Used to specify the background color of an element. Use CSS instead
border Not supported in HTML 5. Used to specify the width of the border of an element. Use CSS instead
challenge <keygen> Used to specify that the value of the <keygen> element should be challenged when submitted
charset <meta>, <script> Used to specify the character encoding
checked <input> Used to specify that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio")
cite <blockquote>, <del>, <ins>, <q> Used to specify a URL which explains the quote/deleted/inserted text
class Global Attributes Used to specify one or more classnames for an element (refers to a class in a style sheet)
color Not supported in HTML 5. Used to specify the text color of an element. Use CSS instead
cols <textarea> Used to specify the visible width of a text area
colspan <td>, <th> Used to specify the number of columns a table cell should span
content <meta> Gives the value associated with the http-equiv or name attribute
contenteditable Global Attributes Used to specify whether the content of an element is editable or not
contextmenu Global Attributes Used to specify a context menu for an element. The context menu appears when a user right-clicks on the element
controls <audio>, <video> Used to specify that audio/video controls should be displayed (such as a play/pause button etc)
coords <area> Used to specify the coordinates of the area
data <object> Used to specify the URL of the resource to be used by the object
data-* Global Attributes Used to store custom data private to the page or application
datetime <del>, <ins>, <time> Used to specify the date and time
default <track> Used to specify that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate
defer <script> Used to specify that the script is executed when the page has finished parsing (only for external scripts)
dir Global Attributes Used to specify the text direction for the content in an element
dirname <input>, <textarea> Used to specify that the text direction will be submitted
disabled <button>, <fieldset>, <input>,
<keygen>,
<optgroup>, <option>,
<select>,<textarea>
Used to specify that the specified element/group of elements should be disabled
download <a>, <area> Used to specify that the target will be downloaded when a user clicks on the hyperlink
draggable Global Attributes Used to specify whether an element is draggable or not
dropzone Global Attributes Used to specify whether the dragged data is copied, moved, or linked, when dropped
enctype <form> Used to specify how the form-data should be encoded when submitting it to the server (only for method="post")
for <label>, <output> Used to specify which form element(s) a label/calculation is bound to
form <button>, <fieldset>, <input>,
<keygen>, <label>, <meter>,
<object>, <output>,<select>,
<textarea>
Used to specify the name of the form the element belongs to
formaction <button>, <input> Used to specify where to send the form-data when a form is submitted. Only for type="submit"
headers <td>, <th> Used to specify one or more headers cells a cell is related to
height <canvas>, <embed>, <iframe>,
<img>, <input>, <object>, <video>
Used to specify the height of the element
hidden Global Attributes Used to specify that an element is not yet, or is no longer, relevant
high <meter> Used to specify the range that is considered to be a high value
href <a>, <area>, <base>, <link> Used to specify the URL of the page the link goes to
hreflang <a>, <area>, <link> Used to specify the language of the linked document
http-equiv <meta> Provides an HTTP header for the information/value of the content attribute
id Global Attributes Used to specify a unique id for an element
ismap <img> Used to specify an image as a server-side image-map
keytype <keygen> Used to specify the security algorithm of the key
kind <track> Used to specify the kind of text track
label <track>, <option>, <optgroup> Used to specify the title of the text track
lang Global Attributes Used to specify the language of the element's content
list <input> Refers to a <datalist> element that contains pre-defined options for an <input> element
loop <audio>, <video> Used to specify that the audio/video will start over again, every time it is finished
low <meter> Used to specify the range that is considered to be a low value
manifest <html> Used to specify the address of the document's cache manifest (for offline browsing)
max <input>, <meter>, <progress> Used to specify the maximum value
maxlength <input>, <textarea> Used to specify the maximum number of characters allowed in an element
media <a>, <area>, <link>, <source>,
<style>
Used to specify what media/device the linked document is optimized for
method <form> Used to specify the HTTP method to use when sending form-data
min <input>, <meter> Used to specify a minimum value
multiple <input>, <select> Used to specify that a user can enter more than one value
muted <video>, <audio> Used to specify that the audio output of the video should be muted
name <button>, <fieldset>, <form>,
<iframe>,<input>, <keygen>,
<map>, <meta>,<object>,
<output>, <param>, <select>,
<textarea>
Used to specify the name of the element
novalidate <form> Used to specify that the form should not be validated when submitted
onabort <audio>, <embed>, <img>,
<object>,<video>
Script to be run on abort
onafterprint <body> Script to be run after the document is printed
onbeforeprint <body> Script to be run before the document is printed
onbeforeunload <body> Script to be run when the document is about to be unloaded
onblur All visible elements. Script to be run when the element loses focus
oncanplay <audio>, <embed>, <object>,
<video>
Script to be run when a file is ready to start playing (when it has buffered enough to begin)
oncanplaythrough <audio>, <video> Script to be run when a file can be played all the way to the end without pausing for buffering
onchange All visible elements. Script to be run when the value of the element is changed
onclick All visible elements. Script to be run when the element is being clicked
oncontextmenu All visible elements. Script to be run when a context menu is triggered
oncopy All visible elements. Script to be run when the content of the element is being copied
oncuechange <track> Script to be run when the cue changes in a element
oncut All visible elements. Script to be run when the content of the element is being cut
ondblclick All visible elements. Script to be run when the element is being double-clicked
ondrag All visible elements. Script to be run at the end of a drag operation
ondragend All visible elements. Script to be run at the end of a drag operation
ondragenter All visible elements. Script to be run when an element has been dragged to a valid drop target
ondragleave All visible elements. Script to be run when an element leaves a valid drop target
ondragover All visible elements. Script to be run when an element is being dragged over a valid drop target
ondragstart All visible elements. Script to be run at the start of a drag operation
ondrop All visible elements. Script to be run when dragged element is being dropped
ondurationchange <audio>, <video> Script to be run when the length of the media changes
onemptied <audio>, <video> Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects)
onended <audio>, <video> Script to be run when the media has reach the end (a useful event for messages like "thanks for listening")
onerror <audio>, <body>, <embed>,
<img>,<object>, <script>,
<style>, <video>
Script to be run when an error occurs
onfocus All visible elements. Script to be run when the element gets focus
onhashchange <body> Script to be run when there has been changes to the anchor part of the a URL
oninput All visible elements. Script to be run when the element gets user input
oninvalid All visible elements. Script to be run when the element is invalid
onkeydown All visible elements. Script to be run when a user is pressing a key
onkeypress All visible elements. Script to be run when a user presses a key
onkeyup All visible elements. Script to be run when a user releases a key
onload <body>, <iframe>, <img>,
<input>,<link>, <script>,
<style>
Script to be run when the element is finished loading
onloadeddata <audio>, <video> Script to be run when media data is loaded
onloadedmetadata <audio>, <video>< Script to be run when meta data (like dimensions and duration) are loaded
onloadstart <audio>, <video>< Script to be run just as the file begins to load before anything is actually loaded
onmousedown All visible elements. Script to be run when a mouse button is pressed down on an element
onmousemove All visible elements. Script to be run as long as the mouse pointer is moving over an element
onmouseout All visible elements. Script to be run when a mouse pointer moves ot of an element
onmouseover All visible elements. Script to be run when a mouse pointer moves over an element
onmouseup All visible elements. Script to be run when a mouse button is released over an element
onmousewheel All visible elements. Script to be run when a mouse wheel is being scrolled over an element
onoffline <body> Script to be run when the browser starts to work offline
ononline <body> Script to be run when the browser starts to work online
onpagehide <body> Script to be run when a user navigates away from a page
onpageshow <body> Script to be run when a user navigates to a page
onpaste All visible elements. Script to be run when the user pastes some content in an element
onpause <audio>, <video> Script to be run when the media is paused either by the user or programmatically
onplay <audio>, <video> Script to be run when the media is ready to start playing
onplaying <audio>, <video> Script to be run when the media actually has started playing.
onpopstate <body> Script to be run when the window's history changes.
onprogress <audio>, <video> Script to be run when the browser is in the process of getting the media data
onratechange <audio>, <video> Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode).
onreset <form> Script to be run when a reset button in a form is clicked.
onresize <body> Script to be run when the browser window is being resized.
onscroll All visible elements. Script to be run when an element's scrollbar is being scrolled
onsearch <input> Script to be run when the user writes something in a search field (for <input="search">)
onseeked <audio>, <video> Script to be run when the seeking attribute is set to false indicating that seeking has ended
onseeking <audio>, <video> Script to be run when the seeking attribute is set to true indicating that seeking is active
onselect All visible elements. Script to be run when the element gets selected
onshow <menu> Script to be run when a element is shown as a context menu
onstalled <audio>, <video> Script to be run when the browser is unable to fetch the media data for whatever reason
onstorage <body> Script to be run when a Web Storage area is updated
onsubmit <form> Script to be run when a form is submitted
onsuspend <audio>, <video> Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason
ontimeupdate <audio>, <video> Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media)
ontoggle <details> Script to be run when the user opens or closes the <details> element
onunload <body> Script to be run when a page has unloaded (or the browser window has been closed)
onvolumechange <audio>, <video> Script to be run each time the volume is changed which (includes setting the volume to "mute")
onwaiting <audio>, <video> Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data)
onwheel All visible elements. Script to be run when the mouse wheel rolls up or down over an element
open <details> Used to specify that the details should be visible (open) to the user
optimum <meter> Used to specify what value is the optimal value for the gauge
pattern <input> Used to specify a regular expression that an <input> element's value is checked against
placeholder <input>, <textarea> Used to specify a short hint that describes the expected value of the element
poster <video> Used to specify an image to be shown while the video is downloading, or until the user hits the play button
preload <audio>, <video> Used to specify if and how the author thinks the audio/video should be loaded when the page loads
readonly <input>, <textarea> Used to specify that the element is read-only
rel <a>, <area>, <link> Used to specify the relationship between the current document and the linked document
required <input>, <select>, <textarea> Used to specify that the element must be filled out before submitting the form
reversed <ol> Used to specify that the list order should be descending (9,8,7...)
rows <textarea> Used to specify the visible number of lines in a text area
rowspan <td>, <th> Used to specify the number of rows a table cell should span
sandbox <iframe> Enables an extra set of restrictions for the content in an <iframe>
scope <th> Used to specify whether a header cell is a header for a column, row, or group of columns or rows
scoped <style> Used to specify that the styles only apply to this element's parent element and that element's child elements
selected <option> Used to specify that an option should be pre-selected when the page loads
shape <area> Used to specify the shape of the area
size <input>, <select>, Used to specify the width, in characters (for <input>) or specifies the number of visible options (for <select>)
sizes <link> Used to specify the size of the linked resource
span <col>, <colgroup> Used to specify the number of columns to span
spellcheck Global Attributes Used to specify whether the element is to have its spelling and grammar checked or not
src <audio>, <embed>, <iframe>,
<img>,<input>, <script>,
<source>, <track>,<video>
Used to specify the URL of the media file
srcdoc <iframe> Used to specify the HTML content of the page to show in the <iframe>
srclang <track> Used to specify the language of the track text data (required if kind="subtitles")
start <ol> Used to specify the start value of an ordered list
step <input> Used to specify the legal number intervals for an input field
style Global Attributes Used to specify an inline CSS style for an element
tabindex Global Attributes Used to specify the tabbing order of an element
target <a>, <area>, <base>,
<form>
Used to specify the target for where to open the linked document or where to submit the form
title Global Attributes Used to specify extra information about an element
translate Global Attributes Used to specify whether the content of an element should be translated or not
type <button>, <embed>, <input>,
<link>,<menu>, <object>,
<script>, <source>,<style>
Used to specify the type of element
usemap <img>, <object> Used to specify an image as a client-side image-map
value <button>, <input>, <li>,
<option>,<meter>, <progress>,
<param>
Used to specify the value of the element
width <canvas>, <embed>, <iframe>,
<img>,<input>, <object>,
<video>
Used to specify the width of the element
wrap <textarea> Used to specify how the text in a text area is to be wrapped when submitted in a form

Tips and Notes :

  • Based on the W3C standard on HTML5 we can use uppercase or lowercase to define the HTML attributes like lang or LANG or Lang.
  • They are strongly recommending to use lowercase for HTML for professional documentation like XHTML.
  • Attribute values will be declared inside the quotes. We can use either single quotes ( ‘ ) or double quotes ( “ ).

Related Searches to Attributes in html