Global Attributes

Global Attributes

Along with the element-specific attributes listed with the individual HTML elements, the following global attributes can be applied to all HTML elements where applicable.

Core Attributes

The core attributes are used for specifying the characteristics or behavior of an element. When we interface with these attributes in JavaScript, they are represented as properties of the HTML element objects.

accesskey – keyboard shortcut access key that brings focus to the element.


class – bind one or more classes to an element


contenteditable – specify whether or not the content inside of the element is editable


contextmenu – bind a context menu to the element.


dir – specify the direction that content is going in the element.


draggable – specify whether or not the element can be dragged


possible values: “true”, “false” <div id="paper" draggable="true"></div>


dropzone – specify the operation and type of content that can be dropped in the element possible values: “copy”, “move”, “link”, “string:string”, “file:string” <div id="trash" dropzone="move"></div>



hidden – Set the element as hidden


possible values: value not required <a href="services.html" hidden>Services</a>


id – Unique element identifier. Only one tag in the document can have the identifier you specify possible values: “identifier that you specify” <div id="box1">Box 1 content</div>


lang – The primary language for the content in the element


possible values: “any vaild RFC language code” <html lang="en-us"> </html>


spellcheck – Specify spelling and grammar checking of the text in a content editable element possible values: “true”, “false”, “” <textarea spellcheck="false">tekt in da text area</textarea> style – specify inline CSS properties for an element


possible values: one or more CSS properties and their values <div style="background:skyblue; padding:20px;">Content</div>


tabindex – specify the tab order(when people hit their Tab key) for the element


possible values: “integer” <input tabindex="1" name="field1"> <input tabindex="3" name="field2"> <input tabindex="2" name="field3">


title – text that renders when the user is hovering over the element


possible values: “string” <a title="HTML Global Attributes" href="attributes.html">Attributes</a>


translate – specify if the element should be translated upon localization


possible values: yes, no <code translate=no> code goes here </code>

Event Attributes



The event attributes are all triggers to make JavaScript code run when certain things happen. The code gets placed directly in the value portion for the attribute. You may find it cleaner to write a custom function that can run many lines of code and perform complex operations. Calling a function also keeps your HTML markup cleaner and allows you to dynamically access the element that made the function run.



Example 1 – Code put directly into the event value parameter.


<button onclick="window.location = ''">

Renew Coder




Example 2 – Code put into a custom event handling function. <script> function doSomething(el){ = "40px"; window.location = ""; } </script> <button onclick="doSomething(this);">Renew Coder</button>


Example 3 – Adding event handling to objects using addEventListener() method. <script> window.addEventListener("load", function(){ alert("document is fully loaded into the DOM and ready"); }); </script>


Example 4 – Adding events to form components. <input onblur="alert('focus left me')">


Example 5 – Adding events to media elements. <audio src="tune.mp3" oncanplaythrough="alert('fully buffered in')"></audio>


onabort – fires when element loading is aborted by the user


onblur – fires when the element loses focus


oncanplay – fires when the user agent can process playback of media


oncanplaythrough – fires when user agent sees media is fully buffered in


onchange – fires when changes to the value of the element occurs


onclick – fires when the user clicks the element


oncontextmenu – fires when context menu is requested(right click of element)


ondblclick – fires when the user double clicks the element


ondrag – fires when user continues the drag operation


ondragend – fires when the drag operation is finished


ondragenter – fires when user mouse enters the element while dragging


ondragleave – fires when user mouse leaves the element while dragging


ondragover – fires when user is hovering over the element while dragging


ondragstart – fires when user initially begins dragging the element


ondrop – fires when user drops dragged item into the element


ondurationchange – fires when the duration attribute value changes for media(audio/video) elements


onemptied – fires when media returns to an uninitialized state


onended – fires when the end of media is reached


onerror – fires when the element has an error loading


onfocus – fires when the element gets focus


oninput – fires when the user changes the value of a form input


oninvalid – fires when form element fails to validate to specified constraints


onkeydown – fires when the user presses a keyboard key down


onkeypress – fires when the user presses a key associated with a character value


onkeyup – fires when the user releases a downpressed keyboard key


onload – fires when the element is finished loading


onloadeddata – fires when browser can render media at current playback position


onloadedmetadata – fires when browser determines media dimensions and duration


onloadstart – fires when browser starts looking for media data in a media element


onmousedown – fires when the user presses down over the element with left mouse button


onmousemove – fires when the mouse moves while over the element


onmouseout – fires when the mouse leaves the element


onmouseover – fires when the mouse goes over the element


onmouseup – fires when the user releases from a click operation while over the element


onmousewheel – fires when the user scrolls their mouse wheel while over the element


onpause – fires when user pauses media playback


onplay – fires when user agent initiates media playback


onplaying – fires when playback of media element has started


onprogress – fires when user agent is retrieving media data


onratechange – fires when playback rate attributes update for the media element


onreadystatechange – fires when the element and its subrecources are finished loading


onreset – fires when the form element is reset


onscroll – fires when the element view is scrolled


onseeked – fires when a seek operation has ended on the media element


onseeking – fires when the seeking event for the media element fires off


onselect – fires when the user selects some text in the element


onshow – fires when user requests the element be shown as a context menu


onstalled – fires when the media data transmission of a media element is choking


onsubmit – fires when the form element is submitted


onsuspend – fires when access of media data is suspended during buffering of media element


ontimeupdate – fires when playback position of the media element changes


onvolumechange – fires when the volume is changed or muted for the media element


onwaiting – fires when the media element playback stops while waiting for more data


Tip #1: JavaScript can set and adjust the values of any core attributes at any time via property settings. Using the JavaScript addEventListener() method we add events to elements in the document through code instead of adding the event attribute directly in the element’s HTML markup. JavaScript is also capable of creating HTML elements on the fly using the document.createElement() method.


Tip #2: CSS level 3 selectors allow developers to target elements for styling by these attributes and their values.


I Am Developer And Want To Share My Knowledge With The World..:) ;) . I Have Another Social Networking Website (Renewchat) And For Designing Or Developing Of Website Purpose You Can Contact Me On Renew Coder .. :) ;)

Leave a Reply

Your email address will not be published. Required fields are marked *