Hosting Solutions
mobile_logo Table of Contents

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 = ''">DevelopPHP</button> Example 2 - Code put into a custom event handling function. <script> function doSomething(el){ = "40px"; window.location = ""; } </script> <button onclick="doSomething(this);">DevelopPHP</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 inpu 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.



IntroductionFile CreationBrowser CompatibilityElementsGlobal AttributesNesting and IndentingDoctypeComments