HTML Attributes

Table of Contents

HTML attribute defines the characterstics of any HTML element. These attributes provide additional information to the browser about the element like, its size, color, behaviour, etc.

Some important points regarding HTML Attributes:

  • Attributes provide additional information about an element.
  • Attributes are always specified in the start tag.
  • Attributes usually come in name/value pairs like: name=”value”.
  • Ex.- 'src' in <img> tag OR 'href' in <a> tag,etc..

HTML Lang Attribute

The 'lang' attribute is declared in the opening <HTML> tag. It gives information to the browser about the main language used in the html document. Although it is not necessary to use but using it is a good practice.

Example

<!DOCTYPE html>
<HTML lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> HTML Lang Attribute </title>
</head>
<body>
<p> This page is using Codelivly. </p>
</body>
</html>

Output

This page is using Codelivly.

HTML Title Attribute

The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute −

The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading.


<!DOCTYPE html>
<HTML lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> The Title Attribute </title>
</head>
<body>
<h5 title= “Hello HTML”> The Example of Title Attribute </h5>
</body>
</html>


Output

The Example Of Title Attribute 

HTML Src Attribute

The src or (source) attribute is used with <img> tag. This attribute allows us to provide the path for the image to be included on the webpage. it is also used with <audio> tag, <video> tag, <embed> tag, etc. to add the source path of the file to be included.


<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> HTML Image Alt Attribute </title>
<body>
<img src=”HTML-Image.png” alt=”HTML5 Image” style=”width:400px; height:250px;”>
</body>
</html>


HTML alt Attribute

An image’s alt attribute specifies an alternative text. If the browser is unable to display an image, the alternate text, which provides information about the image, will be displayed. Additionally, screen readers may read the value of the alt attribute, allowing visually impaired people to “hear” information about the image.

If a browser cannot find an image, it will display the value of the alt attribute :


<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> HTML Image Alt Attribute </title>
<body>
<img src=”HTML-Image.png” alt=”HTML5 Image” style=”width:400px; height:250px;”>
</body>
</html>

Output

HTML5 Image

HTML style Attribute

The style attribute is used to specify the inline style of an element, i.e., it defines the CSS styling of element like color, font, size, shadow etc.


<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> Inline Styles </title>
</head>
<body>
<h4 style=”color:green”> This is Green Color </h4>
<h4 style=”color:blue”> This is Blue Color </h4>
</body>
</html>

Output

This is Green Color

This is Blue Color

List of HTML Attributes

There are around 170 HTML Attributes that we use. List of all HTML Attributes is given below. (orginally Published : howtocodeschool )

  1. accept attribute

    It is used for input tag (only for type=”file”), it tells about the type of files that the website server accepts or user can upload.

  2. accept-charset attribute

    It is used for form tag, It specifies the character encoding that is to be used for the submission of form.

  3. accesskey attribute

    It defines a shortcut key to activate or focus an element.

  4. action attribute

    It is used for form tag, It tells where to send the submitted form data.

  5. align attribute

    It is not supported in HTML5, It was used to specify the alignment with respect to surrounding elements but we use CSS for that now.

  6. alt attribute

    It is used for img tagarea tag and input tag. It defines the alternative text if the element doesn’t display.

  7. async attribute

    It is used for script tag, It tells that script is executed asynchronously.

  8. autocomplete attribute

    It is used for form taginput tag. It’s value is on. It enables the browser to display previously typed text, so you don’t have to write it again and again.

  9. autofocus attribute

    It is used for button taginput tagselect tag and textarea tag. It enables element to automatically get focused when the page loads.

  10. autoplay attribute

    It is used for audio tagvideo tag, It specifies that the audio or video should automatically play after the page is loaded.

  11. border attribute

    It is not supported in HTML 5, It is used to set width of border, we use CSS instead now.

  12. bgcolor attribute

    It is not supported in HTML 5, It is used to set background color of element, we use CSS instead now.

  13. charset attribute

    It is used for meta tag and script tag. It defines the character encoding.

  14. checked attribute

    It is used for input tag (for type=”radio” or type=”checkbox”), It specifies the element to be pre-selected.

  15. cite attribute

    It is used for blockquote tagdel tagins tag and q tag. It gives the URL of document which explains the quote, text or data.

  16. class attribute

    It is a Global Attribute. It defines one or more class names for an element that can be used to style it or can be used to refer to it by JavaScript for various interactive functions.

  17. color attribute

    It is not supported in HTML 5. It sets the text color of element, but we use CSS for that now.

  18. cols attribute

    It is used for textarea tag. It defines the width of text area.

  19. colspan attribute

    It is used for th tag and td tag. It defines the number of columns table cell must have.

  20. content attribute

    It is used for meta tag. It defines the content type of meta data.

  21. contenteditable attribute

    It is also a Global Attribute. It defines if the content of Html element is editable or not.

  22. controls attribute

    It is used for audio tag and video tag. It allows the browser to display the control buttons (like play and pause etc) for the audio or video file.

  23. coords attribute

    It is used for area tag. It defines the coordinates of the area element.

  24. data attribute

    It is used for object tag. It defines the URL of the resource that is linked with object.

  25. data-* attribute

    It is also a Global Attribute. It enables us to embed or store the custom data attributes on all our HTML elements.

  26. datetime attribute

    It is used for del tagtime tag and ins tag. It sets the date and time on web page.

  27. default attribute

    It is used for track tag. It is a Boolean attribute, It defines which track is to be enabled if the user doesn’t specify the appropriate track.

  28. defer attribute

    It is used for script tag. It is only used for external script files. It makes sure that the script is only executed after the page parsing is complete.

  29. dir attribute

    It is used to set the base direction of text for display.

  30. dirname attribute

    It is used for input tagtextarea tag. It enables that the direction of text will be submitted.

  31. disabled attribute

    It is used for button tagfieldset taginput tagoptgroup tagoption tagselect tag and textarea tag. It disables the element or group of elements.

  32. draggable attribute

    It is a Global Attribute. It defines if element is draggable or not.

  33. dropzone attribute

    It is a Global Attribute. It defines if dragged data is copied, linked or moved when dropped.

  34. enctype attribute

    It is used for form tag. It specifies the encoding method of form data when the form is submitted.

  35. face attribute

    It defines default font for text but it is not supported in HTML5.

  36. for attribute

    It is used for label tag and output tag. It defines the link of label or calculation with the element.

  37. form attribute

    It is used for button tagfieldset taglabel taginput tagmeter tagobject tagoutput tagselect tag and textarea tag. It specifies which form belongs to the particular element using form name.

  38. formaction attribute

    It is used for button tag and input tag. It tells where to send the form data when form is submitted. It is only for type=”submit”.

  39. headers attribute

    It is used for td tag and th tag. It defines one or more header cells connected to a cell.

  40. height attribute

    It is used for canvas tagembed tagiframe tagimg taginput tagobject tag and video tag. It sets the height of element.

  41. hidden attribute

    It is a Global Attribute. It is Boolean attribute, it hides the element.

  42. high attribute

    It is used for meter tag. It sets the value for meter tag which is considered high.

  43. href attribute

    It is used for a tagarea tagbase tag and link tag. It sets the URL of web page or document.

  44. hreflang attribute

    It is used for a tagarea tag and link tag. It defines the Language of web page or document.

  45. http-equiv attribute

    It is used for meta tag. It defines HTTP response header for the value of the content attribute.

  46. id attribute

    It is a Global Attribute. It defines a specific id for element. Element id must be unique.

  47. ismap attribute

    It is used for img tag. It defines an image to be image-map.

  48. kind attribute

    It is used for track tag. It defines the type of text track.

  49. label attribute

    It is used for track tagoption tag and optgroup tag. It defines the title of text track.

  50. lang attribute

    It is a Global Attribute. It defines the language of element’s content.

  51. list attribute

    It is used for input tag. It is used for the datalist element that have pre defined listed options for input element.

  52. loop attribute

    It is used for audio tag and video tag. It specifies that audio or video file will repeat every time after it’s finished.

  53. low attribute

    It is used for meter tag. It defines the range for meter element that sets the value which is considered low.

  54. max attribute

    It is used for input tagmeter tag and progress tag. It defines the maximum value.

  55. maxlength attribute

    It is used for input tag and textarea tag. It specifies the maximum number of characters that are allowed for input tag or textarea tag.

  56. media attribute

    It is used for a tagarea taglink tagsource tag and style tag. It explains that which device is optimal for the linked web page or document.

  57. method attribute

    It is used for form tag. It defines which method to use while submitting the form data. Two main methods are Post and Get.

  58. min attribute

    It is used for input tag and meter tag. It defines the minimum value.

  59. multiple attribute

    It is used for input tag and select tag. It enables the user to enter more than one values for input type elements.

  60. muted attribute

    It is used for audio tag and video tag. It makes the audio and video file silent, the sound will be muted.

  61. name attribute

    It is used for button tagfieldset tagform tagiframe taginput tagmap tagmeta tagobject tagoutput tagparam tagselect tag and textarea tag. It defines the name of the element.

  62. novalidate attribute

    It is used for form tag. It specifies that the form should be submitted without validation.

  63. onabort attribute

    It is used for audio tagvideo tagembed tagimg tag and object tag. It specifies that the script must always run on abort.

  64. onafterprint attribute

    It is used for body tag. It specifies that the script must always run after the desired document is printed.

  65. onbeforeprint attribute

    It is used for body tag. It specifies that the script must always run before the desired document is printed.

  66. onbeforeunload attribute

    It is used for body tag. It specifies that the script must always run before the time when document is unloaded.

  67. onblur attribute

    It is used for All Visible Elements. It specifies that script will run once the element is out of focus.

  68. oncanplay attribute

    It is used for audio tagvideo tagembed tag and object tag. It specifies that script will run once the file has buffered to the limit that it can start playing.

  69. oncanplaythrough attribute

    It is used for audio tag and video tag. It specifies that script will run once the file has buffered completely.

  70. oncanplaythrough attribute

    It is used for audio tag and video tag. It specifies that script will run once the file has buffered completely so that file can play without any pause.

  71. onchange attribute

    It is used for All Visible Elements. It specifies that script will run if the value of element is changed.

  72. onclick attribute

    It is used for All Visible Elements. It specifies that script will run when the element is clicked.

  73. oncontextmenu attribute

    It is used for All Visible Elements. It specifies that script will run when the context menu is triggered or initiated.

  74. oncopy attribute

    It is used for All Visible Elements. It specifies that script will run when the content of element is copied.

  75. oncuechange attribute

    It is used for track tag. It specifies that script will run when the cue is changed.

  76. oncut attribute

    It is used for All Visible Elements. It specifies that script will run when the content of element is being cut.

  77. ondblclick attribute

    It is used for All Visible Elements. It specifies that script will run when the element is double clicked.

  78. ondrag attribute

    It is used for All Visible Elements. It specifies that script will run when the element is dragged.

  79. ondragend attribute

    It is used for All Visible Elements. It specifies that script will run when the element is dragged till the end.

  80. ondragenter attribute

    It is used for All Visible Elements. It specifies that script will run when the element is dragged till a particular target or point.

  81. ondragleave attribute

    It is used for All Visible Elements. It specifies that script will run when the element leaves a particular target or point while being dragged.

  82. ondragover attribute

    It is used for All Visible Elements. It specifies that script will run when the element is dragged over a particular target or point.

  83. ondragstart attribute

    It is used for All Visible Elements. It specifies that script will run when the dragging process of element has just started.

  84. ondrop attribute

    It is used for All Visible Elements. It specifies that script will run when the element is being dropped.

  85. ondurationchange attribute

    It is used for audio tag and video tag. It specifies that script will run when the length of media file changes.

  86. onemptied attribute

    It is used for audio tag and video tag. It specifies that script will run when the file is suddenly not available due to the disconnection or something.

  87. onended attribute

    It is used for audio tag and video tag. It specifies that script will run when the file has reached the end, usually a greeting message.

  88. onerror attribute

    It is used for audio tagbody tagembed tagimg tagobject tagscript tagstyle tag and video tag. It specifies that script will run if the error occurs.

  89. onfocus attribute

    It is used for All Visible Elements. It specifies that script will run when the element gets focused.

  90. onhashchange attribute

    It is used for body tags. It specifies that script will run when the anchor part of URL is changed.

  91. oninput attribute

    It is used for All Visible Elements. It specifies that script will run when user will enter some input for element.

  92. oninvalid attribute

    It is used for All Visible Elements. It specifies that script will run when the element is invalid.

  93. onkeydown attribute

    It is used for All Visible Elements. It specifies that script will run when the user is pressing a key.

  94. onkeypress attribute

    It is used for All Visible Elements. It specifies that script will run when the user presses a key.

  95. onkeyup attribute

    It is used for All Visible Elements. It specifies that script will run when the user releases a key.

  96. onload attribute

    It is used for body tagimg tagiframe taginput taglink tagscript tag and style tag. It specifies that script will run when the element is loaded completely.

  97. onloadeddata attribute

    It is used for audio tag and video tag. It defines that script will run when the file is loaded.

  98. onloadedmetadata attribute

    It is used for audio tag and video tag. It defines that script will run when the meta data of file is loaded.

  99. onloadstart attribute

    It is used for audio tag and video tag. It defines that script will run as soon as the file has started loading.

  100. onmousedown attribute

    It is used for All Visible Elements. It defines that script will run when the mouse button is pressed.

  101. onmousemove attribute

    It is used for All Visible Elements. It defines that script will run when the pointer of mouse is moving over element.

  102. onmouseout attribute

    It is used for All Visible Elements. It defines that script will run when the pointer of mouse is moving out of element.

  103. onmouseover attribute

    It is used for All Visible Elements. It defines that script will run when the pointer of mouse moves over an element.

  104. onmouseup attribute

    It is used for All Visible Elements. It defines that script will run when the pointer of mouse is released over an element.

  105. onmousewheel attribute

    It is used for All Visible Elements. It defines that script will run when the mouse wheel is scrolled over any element.

  106. onoffline attribute

    It is used for body tag. It defines that script will run when the browser works offline or there is no connection.

  107. ononline attribute

    It is used for body tag. It defines that script will run when the browser works online or the connection is reestablished.

  108. onpagehide attribute

    It is used for body tag. It defines that script will run when the user navigates away from the page.

  109. onpageshow attribute

    It is used for body tag. It defines that script will run when the user navigates to the page.

  110. onpaste attribute

    It is used for All Visible Elements. It defines that script will run when the user paste something to the element.

  111. onpause attribute

    It is used for audio tag and video tag. It defines that script will run when the media pauses due to any other reason.

  112. onplay attribute

    It is used for audio tag and video tag. It defines that script will run when the media starts playing.

  113. onplaying attribute

    It is used for audio tag and video tag. It defines that script will run when the media is playing.

  114. onpopstate attribute

    It is used for body tag. It defines that script will run when the window’s history is changed.

  115. onprogress attribute

    It is used for audio tag and video tag. It defines that script will run when the browser is getting the media data.

  116. onratechange attribute

    It is used for audio tag and video tag. It defines that script will run when the user changes the speed of media i.e slow motion and fast motion.

  117. onreset attribute

    It is used for form tag. It defines that script will run when the reset button of the form is clicked.

  118. onresize attribute

    It is used for body tag. It defines that script will run when the browser size is changed.

  119. onscroll attribute

    It is used for All Visible Elements. It defines that script will run when the scroll bar of element is scrolled.

  120. onsearch attribute

    It is used for input tag (for input=”search”). It specifies that script will run when the user writes something in the search field.

  121. onseeked attribute

    It is used for audio tag and video tag. It specifies that script will run when the process of seeking is ended.

  122. onseeking attribute

    It is used for audio tag and video tag. It specifies that script will run when the process of seeking is still going on.

  123. onselect attribute

    It is used for All Visible Elements. It specifies that script will run when the element gets selected.

  124. onstalled attribute

    It is used for audio tag and video tag. It specifies that script will run when the media data is stuck and browser is unable to fetch it.

  125. onstorage attribute

    It is used for body tag. It specifies that script will run whenever the Web storage area is updated.

  126. onsubmit attribute

    It is used for form tag. It specifies that script will run when the form is submitted.

  127. onsuspend attribute

    It is used for audio tag and video tag. It specifies that script will run when the process of fetching the media is stopped due to any reason.

  128. ontimeupdate attribute

    It is used for audio tag and video tag. It specifies that script will run when the playing position is changed by the user i.e forwards the media to specific point or reverse it.

  129. ontoggle attribute

    It is used for details tag. It specifies that script will run when the user opens or closes the details element.

  130. onunload attribute

    It is used for body tag. It specifies that script will run when the page is unloaded.

  131. onvolumechange attribute

    It is used for audio tag and video tag. It specifies that script will run when the volume of audio or video media file is changed.

  132. onwaiting attribute

    It is used for audio tag and video tag. It specifies that script will run when media file is paused due to buffering or due to any other reason.

  133. onwheel attribute

    It is used for All Visible Elements. It specifies that script will run when the mouse wheel rolls up or down.

  134. open attribute

    It is used for details tag. It specifies that details element should not be hidden.

  135. optimum attribute

    It is used for meter tag. It defines the value which is optimum for the gauge.

  136. pattern attribute

    It is used for input tag. It defines expression or pattern for input tag and is checked against it.

  137. placeholder attribute

    It is used for input tag and textarea tag. It displays the short hint or text for the user to tell what to enter as input.

  138. poster attribute

    It is used for video tag. It defines the image that will be displayed when the video is not played yet or it’s downloading.

  139. preload attribute

    It is used for audio tag and video tag. It defines how the video or file should load when the page is loaded.

  140. readonly attribute

    It is used for input tag and textarea tag. It defines that element is read-only element.

  141. rel attribute

    It is used for link taga tag and area tag. It defines the relationship of linked document or file with the current file.

  142. required attribute

    It is used for input tagselect tag and textarea tag. It specifies that the form cannot be submitted without entering the value.

  143. reversed attribute

    It is used for ol tag. It specifies that the list items must be in descending order.

  144. rows attribute

    It is used for textarea tag. It defines the number of lines in textarea element.

  145. rowspan attribute

    It is used for td tag and th tag. It defines the number rows of the cell of table.

  146. sandbox attribute

    It is used for iframe tag. It defines the restriction for the iframe content.

  147. scope attribute

    It is used for th tag. It specifies if the header cell is header for rows, column or group of row or columns.

  148. selected attribute

    It is used for option tag. It specifies that the particular option must be selected when the page loads.

  149. shape attribute

    It is used for area tag. It defines the shape of area.

  150. size attribute

    It is used for input tag and select tag. It defines the size of input for the input tag (in characters) and the number of visible options for select tag.

  151. sizes attribute

    It is used for img taglink tag and source tag. It defines the size of the linked document file or resource.

  152. span attribute

    It is used for col tag and colgroup tag. It defines the number of columns element should span.

  153. spellcheck attribute

    It is used for Global Attributes. It enables the element to be able to check the grammar and spelling of it’s content.

  154. src attribute

    It is used for audio tagembed tagiframe tagimg taginput tagscript tagsource tagtrack tag and video tag. It defines the url of the file.

  155. srcdoc attribute

    It is used for iframe tag. It defines the HTML content of page which is to be shown in iframe tag.

  156. srclang attribute

    It is used for track tag. It defines the language of the text track data if kind is set to subtitles.

  157. srcset attribute

    It is used for img tag and source tag. It defines the url of image to be used in different situations.

  158. start attribute

    It is used for ol tag. It defines the start value of an ordered list.

  159. step attribute

    It is used for input tag. It defines the allowed number of intervals for an input tag.

  160. style attribute

    It is used for Global Attributes. It defines the inline styles of all HTML elements to change their style.

  161. tabindex attribute

    It is used for Global Attributes. It defines the tabbing order of element.

  162. target attribute

    It is used for a tagarea tagbase tag and form tag. It defines the target of where to open the linked document or page or file and also where to submit the form.

  163. title attribute

    It is used for Global Attributes. It defines the extra information about element.

  164. translate attribute

    It is used for Global Attributes. It defines if the content of an element should be translated or not.

  165. type attribute

    It is used for a tagembed tagbutton taglink tagmenu tagobject tagsource tagscript taginput tag and style tag. It defines the type of element.

  166. usemap attribute

    It is used for img tag and object tag. It defines the image as image map.

  167. value attribute

    It is used for li tagmeter tagbutton tag progress tagoption taginput tag and param tag. It defines the value of element.

  168. width attribute

    It is used for canvas tagembed tagiframe tagimg tagobject taginput tag and video tag. It defines the width of element.

  169. wrap attribute

    It is used for textarea tag. It defines how to wrap the text when form is submitted in textarea tag.

Leave a Comment

Your email address will not be published.