HTML Attributes

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:

  1. Id
  2. Title
  3. Class
  4. 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:

  1. If an element carries an attribute as a unique identifier, then it is possible to identify just that element and its content.
  2. 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>