HTML attributes: The HTML attributes can be defined as the special words which provide special information about the elements (or) modifiers known attributes of HTML element.
- Each element or tag can have attributes, which defines the behavior of the element.
- And all the HTML attributes should be applied with a start tag.
- All HTML attributes should always be applied with its name and value pair.
Syntax: <element attribute_name=“value”>content</element>
HTML Attributes
Example:
<!DOCTYPE html> <html> <head><h1> This is Style attribute</h1></head> <body> <p style="height: 50px; color: blue">It will add style property inelement</p> <p style="color: red">It will change the color of content</p> </body> </html>
HTML Core Attributes
The HTML core attributes are used in the majority of the HTML elements. And there ate totally 4 different types. They are as follows:
- Id
- Title
- Class
- Style
HTML Id attribute
The HTML id attribute of an HTML tag can be used to uniquely identify an element with the HTML page. If you are using this tag, there are two main reasons available which have been listed here as follows:
- If an element carries an attribute as a unique identifier, then it is possible to identify just that element and its content.
- In case if you are having two elements of the same name with a webpage, you can use the id attribute to distinguish between elements that have the same name.
HTML Title Attribute
The HTML title attribute gives a suggested title for the element. While the behavior of the attribute depends upon the element that carries it.
Example:
<!DOCTYPE html> <html> <head> <title>The title Attribute Example</title> </head> <body> <h3 title = "Hello Freshersnow!">Titled Heading Tag Example</h3> </body ></html>
HTML Class Attribute
An HTML class attribute is used to associate an element with a style sheet, and also it specifies the class of that element. And the value fo the attribute is a space-separated list of class.
Example:
class = "className1 className2 className3"
HTML Style Attribute
In HTML style attribute it allows you to specify CSS (Cascading style sheets) rules within the statement. In detail regarding CSS, we will be learning in coming topics.
Example:
<!DOCTYPE html> <html> <head> <title>The style Attribute</title></head> <body> <p style = "font-family:arial; color:#FF0000;">Some text...</p> </body> </html>
Attributes list
Here, we are displaying the list of HTML attributes.
| Attributes | Description | Belongs to |
|---|---|---|
| accept | It describes the type of files that a server accepts | input |
| accept-charset | It describes the character encodings which are used for summiting the form | form |
| accesskey | It’s a shortcut key for activating/focusing an element | Global Attributes |
| action | It describes where to send the form data while a form is submitted | form |
| align | It specifies the alignment according to the surrounding elements. For this use the CSS instead | It was not supported in HTML5 |
| alt | <area>, <img>,<input> | It shows the alternative text when the original element fails to display |
| async | It shows that the script is executed asynchronously | <script> |
| autocomplete | It specifies whether the <form> (or) the<input> element have to autocomplete enabled or not. | <form>, <input> |
| autofocus | It describes that the element should automatically get focused when a page is loaded | <button>, <input>,<select>,<textarea> |
| autoplay | the audio/video will be playing automatically when it starts | <audio>, <video> |
| bgcolor | helps us to choose the background color of an element. And also use CSS instead | Not supported in HTML5 |
| border | displays the width of the border of an element | Not supported in HTML5 |
| charset | defines the character encoding | <meta>, <script> |
| checked | It describes that the input element should be pre-selected when the page loads | <input> |
| cite | describes the URL which explains the quote/deleted/inserted text | <blockquote>, <del>, <ins>,<q> |
| class | Defines one (or) more classnames for an element | global attributes |
| color | It displays the text color of an element. And use CSS instead | Not supported in HTML 5 |
| cols | visibles the width of a text area</td. | <textarea> |
| colspan | displays the number of columns a table cell should span | <td>,<th> |
| content | values associated with the http equiv (or) naming attribute | <meta> |
| contenteditable | describes whether the content of an element is editable (or) not | Global attributes |
| contextmenu | defines context menu for an element | All HTML elements |
| controls | displays the audio/video controls | coords |
| coords | displays the coordinates of the area | <area> |
| data | describes the URL of a resource which was used by an object | <object> |
| data-* | used for storing the custom data private to a page (or) application | Global attributes |
| datetime | defines the date and time | <del>, <ins>, <time> |
| default | describes the track to be enabled. And if the user’s preference does not indicate then another track will be more appropriate | <track> |
| defer | define that the script has been executed when a page has finished parsing | <script> |
| dir | It describes the text direction for the content of an element | Global attributes |
| dirname | defines the text direction submission | <input>, <textarea> |
| disabled | defines that the group/element of elements should be disabled | <button>,<fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> |
| download | The target will be downloaded when the user clicks the hyperlink | <a>,<area> |
| draggable | displays whether an element is draggable or not | Global Attributes |
| dropzone | It describes whether the dragged data is copied, moved, (or) linked when dropped | Global attributes |
| encytype | It describes how the form-data should be encoded when submitting it to a server. | <form> |
| for | It specifies which form elements a lable/ calculation is bound to | <label>,<output> |
| form | display the name of the form an element belongs to | <button>, <fieldset>, <object>, <textarea>, <input>, <label>, <output>, <select>, <textarea> |
| formaction | sends the form data when a form is submitted | <button>, <input> |
| headers | describes one (or) more header cells a cell is releated | <td>, <th> |
| height | defines the height of the element | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> |
| high | describes the range when it is considered to a high value | <meter> |
| href | describes the URL of the page link will be going | <a>, <area>, <base>, <link> |
| hreflang | defines the language of the linked document | <a>, <area>, <link> |
| http-equiv | It provdes the HTTP header of value for the content attribute | <meta> |
| id | defines the height of the element | Describes the unique id for an element |
| ismap | Describes the image as a server-side image-map | <img> |
| kind | describes the kind track | <track> |
| lang | defines the language of the element content | Global attribute |
| lsit | It refers to <datalist> an element which contains pre-defined options for <input> the element | <input> |
| loop | It specifies the audio/ video for starting again and again, after finishing | <audio>, <video> |
| low | describes the range that is considered to a low value | <meter> |
| max | defines the maximum value | <input>, <meter>, <progress> |
| max length | describes the maximum no.of characters allowed for an element | <input>, <textarea> |
| media | describes media/ device linked document is optimized | <a>, <link>, <area>, <source>, <style> |
| method | describes the HTTP method to use while sending the form data | <form> |
| min | defines the minimum value | <input>, <meter> |
| multiple | describes the user can enter more than one value | <input>, <select> |
| muted | describes the audio output of the video should be muted | <video>, <audio> |
| name | describes the name of the element | <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea> |
| novalidate | describes that the form should not be validated | <form> |
| onabort | Script should run on abort | <audio>, <embed>, <img>, <object>, <video> |
| onafterprint | For the Script to be run after the document is printed | <body> |
| onbeforeunload | The script should run the document is about to be unloaded | <body> |
| onblur | the script should run when an element loses focus | all visible elements |
| oncanplay | the script should run when a file is ready for playing | <audio>, <embed>, <object>, <video> |
| onchange | Script should run when the value of the element is changed | All visible elements. |
| onclick | Script should run when the element is being clicked | All visible elements. |
| oncopy | Script to be run when a context is being copied | All visible elements |
| oncuechange | Script to be run when cue changes in the element | <track> |
| oncut | Script to be run when a context of an element is cut | All visible elements |
| ondblclick | Script to be run when an element is being double clicked | All visible elements |
| ondrag | Script to be run when the element is being dragged | All visible elements |
| ondragned | Script to be run at end of the drag operation | All visible elements |
| ondragneter | Script to be run when the element has been dragged to a valid target | All visible elements |
| ondragleave | Script to be run when element leaves a valid target | All visible elements |
| ondragover | Script to be run when the element is being dragged over a valid drop | All visible elements |
| ondragstart | Script to be run when the element is being dragged over a valid drop target | All visible elements |
| ondrop | Script to be run when the dragged element is dropped | All visible elements |
| ondurationchange | Script should run when the length of the media changes | <audio>,<video> |
| onemptied | Script should run when a file is suddenly unavailiable | <audio>, <video> |
| onended | Script should run when media has reached to end | <audio>, <video> |
| onerror | Script should run when an error occurs | <audio>, <body>, <embed>, <img>, <object>, <script>, <style>, <video> |
| onfocus | Script should run when an element gets focused | All visible elements |
| onhashchange | Script to run when an element gets focused | All visible elements |
| oninput | Script should run when an element gets focused | All visible elements |
| oninvalid | Script should run when the element is invalid | All visible elements |
| onkeydown | Script should run when a user is presing a key | All visible elements |
| onkeypress | Script should run when a user presses a key | All visible elements |
| onkeyup | Script to be run when a user presses a key | All visible elements |
| onload | Script to be run when element finished loading | <body>, <iframe>, <img>, <input>, <link>, <script>, <style> |
| onloadeddata | Script to be run when a context menu is triggered | <audio>, <video> |
| onloadedmetadata | Script should run when metadata is loaded | <audio>,<video> |
| onloadstart | Script should run a file begins to load before anything is actually loaded | <audio>,<video> |
| onmousedown | Script should run when a mosue button is pressed down on an element | All visible elements |
| onmousemove | Script should run as long as the mouse pointer is moving over an element | All visible elements |
| onmouseout | Script should run when the mouse pointer moves out of an element | All visible elements |
| onmouseover | Script should run when the mouse pointer moves over an element | All visible elements |
| onmouseup | Script should run when a mouse button is released over an element | All visible elements |
| onmousewheel | Script should run when a mouse wheel is being scrolled over an element | All visible elements |
| onoffline | Script should run when the browser starts to work offline | <body> |
| ononline | Script should run when the browser starts to work online | <body> |
| onpagehide | Script should run when a user navigates away from a page | <body> |
| onpageshow | Script should run when a user navigates to a page | <body> |
| onpaste | Script should run when the user pastes the same content in an element | all visible elements |
| onpause | Script should run when media is paused either by the user (or) programmatically | <audio>,<video> |
| onplay | Script should run when media has started playing | <audio>,<video> |
| onplaying | Script should run when media started playing | <audio>,<video> |
| onpopstate | Script should run when the window’s history is changed | <body> |
| onprogress | Script should run every time when process media getting data | <audio>,<video> |
| onratechange | Script should run when playback time changes | <audio>,<video> |
| onreset | Script should run when reset button in the form clicks | <form> |
| onresize | Script should run when the browser window is being resized | <body> |
| onscroll | Script should run when the element scroll bar is being controlled | All visible elements |
| onsearch | Script should run when a user writes anything in the search field | <input> |
| onseekeing | Script should run when seeking sttribute is set to true and active | <audio>,<video> |
| onselect | Script should run when an element gets selected | All visible elements |
| onstalled | Script should run when user unable to fetch the media data for some reason | <audio>,<video> |
| onstorage | Script should run when a web storage data is updated | <body> |
| onsubmit | Script should run when a form is submitted | <form> |
| onsuspend | Script should run when fetching media data is stopped before it completely loaded | <audio>,<video> |
| ontime update | The script should run when playing position has changed | <audio>,<video> |
| ontoggle | Script should run when the user opens or closes the element | <details> |
| onunload | The script should run when a page is unloaded | <body> |
| onvolumechange | The script should run each time when the volume of video/audio has been changed | <audio>, <video> |
| onwaiting | The script should run when media has paused but is expected to resume | <audio>,<video> |
| onwheel | The script should run when the mosue wheel rolls up or down over an element | All visible elements |
| open | describes that the details should be visible | <details> |
| optimum | defines what value should be the optimal value for the series | <meter> |
| pattern | specifies a regular expression that an element’s value is checked | <input> |
| placeholder | defines a shot hint that describes the expected value of the element | <input>,<textarea> |
| poster | defines an image to show while the video is downloading (or) user hits the play button | <video> |
| preload | describes how the author thinks the audio/video should be loaded when the page loads | <audio>,<video> |
| readonly | defines the element is read-only | <input>,<textarea> |
| rel | describes the relationship between the current document and the linked document | <a>,<area>,<link> |
| required | describes the element must be filled out before submitting the form | <input>, <select>, <textarea> |
| reversed | defines the list order should be descending order | <ol> |
| rows | displays visible no.of lines in a textarea | <textarea> |
| rowspan | defines the rows a table cell should span | <td>,<th> |
| sandbox | Enables an extra set of restrictions for content in | <iframe> |
| scope | describes whether a header cell is a header for column, row, or group of columns or rows | <th> |
| selected | defines the option should be pre-selected when page loads | <option> |
| shape | describes the shape of the area | <area> |
| size | Describes the width in characters (or) specifies the no.of visible options | <input>, <select> |
| sizes | defines the size of the linked resources | <img>, <link>, <source> |
| span | describes the no.of columns to span | <col>, <colgroup> |
| spellcheck | describes whether the element have its spelling and grammar checked or not | Global attribute |
| src | describes the URL of media file | <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> |
| srcdoc | describes the HTML content of the page to show in | <iframe> |
| srclang | describes the HTML Content of the page to show in | <track> |
| srcset | describes the URL of the image to use in different situations | <img>,<source> |
| start | describes the start value of an ordered list | <ol> |
| step | describes the legal number of intervals for the input field | <input> |
| style | defines an inline CSS style for an element | Global attributes |
| tabindex | describes the tabbing order of an element | Global attributes |
| target | defines the target for where to open the linked document (or) where to submit the form | <a>, <area>, <base>, <form> |
| title | describes extra information about an element | Global attributes |
| translate | describes whether the content of an element is translated (or) not | Global attributes |
| type | describes the type of element | <a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style> |
| usemap | describes image for client-side images | <img>,<object> |
| value | describes the value of the element | <button>, <input>, <li>, <option>, <meter>, <progress>, <param> |
| width | describes the width of an element | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> |
| wrap | describes how the text in the text area is to be wrapped when submitted in a form | <textarea> |