HTML Attributes

HTML element attributes are used to provide additional information or behavior to an HTML element. They are added to the opening tag of an element in the form of name-value pairs. The value of the attribute is specified in the opening tag of an element, after the attribute name.

There are several types of HTML element attributes, including:

  • Global attributes: These attributes can be applied to any HTML element, and include things like the id and class attributes which can be used for styling and scripting.
  • Core attributes: These attributes are specific to certain elements, and include things like the href attribute for links and the src attribute for images.
  • Event attributes: These attributes are used to specify JavaScript code that should be run in response to a specific event, such as a mouse click or a key press. Examples include onclick, onkeyup, and onload.
  • Data attributes: These attributes are used to store custom data private to the page or application, they are not intended to be used by the browser or css, they are typically used as a storage for javascript. They are defined by using the data-* prefix.

Here is an example of an HTML element with several different types of attributes:

  
<a href="https://www.example.com" id="my-link" class="my-class" onclick="alert('clicked')" data-info='{"name": "John"}'>Link</a>
  

In this example, the href attribute is a core attribute that specifies the URL that the link should go to. The id and class attributes are global attributes that can be used for styling and scripting, onclick is an event attribute that specifies a JavaScript function to be run when the link is clicked and data-info is a data attribute which can store any json data.

Name Value Type Description
accesskey Specifies a shortcut key to activate/focus an element.
contenteditable Specifies whether the content of an element is editable or not.
onchange Specifies a script to be run when the value of an element changes.
draggable Specifies whether an element is draggable or not.
hidden Specifies that an element should be hidden.
oncontextmenu Specifies a script to be run when an element gets focus.
id Specifies a unique id for an element, used for linking, scripting, and styling.
class Specifies one or more classnames for an element, used for styling and scripting.
dir Specifies the text direction for the content in an element.
data-* Specifies a custom data attribute on an element, used for storing private data.
onfocus Specifies a script to be run when an element gets focus.
lang Specifies the language of the element's content.
spellcheck Specifies whether the element should have its spelling and grammar checked or not.
style Specifies an inline CSS style for an element.
tabindex Specifies the tab order of an element.
title Specifies extra information about an element, displayed as a tooltip when hovering over the element.
translate Specifies whether the content of an element should be translated or not.
onafterprint Specifies a script to be run after the page is printed.
onbeforeprint Specifies a script to be run before the page is printed.
onbeforeunload Specifies a script to be run when the document is about to be unloaded.
onerror Specifies a script to be run when an error occurs.
Onhashchange Specifies a script to be run when the fragment identifier part of the URL changes.
onload Specifies a script to be run when the page finishes loading.
onoffline Specifies a script to be run when the browser starts to work offline.
onmessage Specifies a script to be run when the message is triggered.
ononline Specifies a script to be run when the browser starts to work online.
onpagehide Specifies a script to be run when the user navigates away from a page.
onpageshow Specifies a script to be run when the user navigates to a page.
onpopstate Specifies a script to be run when the user navigates through the history.
onresize Specifies a script to be run when the window is resized.
onstorage Specifies a script to be run when a Web Storage area is updated.
onunload Specifies a script to be run when the user leaves the page.
onblur Specifies a script to be run when an element loses focus.