HTML5 - Attributes

HTML5 - Global Attributes

HTML attributes provide additional information about HTML elements. They are always specified in the start tag and usually come in name/value pairs like name="value".

HTML5 defines a set of global attributes that are common to and can be used on all HTML elements (though they may not have an effect on some elements).

Attribute names and values are generally case-insensitive, but lowercase is the recommended convention for consistency and compatibility with stricter formats like XHTML.

<!-- Example: 'id' and 'class' are global attributes -->
<div id="main-content" class="container featured">
  <p>This div uses global attributes.</p>
</div>

Common Global Attributes

Here are some of the most frequently used HTML5 global attributes:

Attribute	Description
accesskey	Specifies a keyboard shortcut (often combined with Alt, Ctrl, or other modifier keys depending on the browser/OS) to activate or focus an element. Value is usually a single character.
class	Specifies one or more class names for an element, separated by spaces. Used primarily for CSS styling and JavaScript selection.
contenteditable	Specifies whether the content of an element is editable by the user. Values: true or false.
data-*	Used to store custom data private to the page or application (custom data attributes). The attribute name must start with data- and contain no uppercase letters. Useful for attaching data to elements for use by JavaScript without misusing other attributes. Example: data-user-id="123".
dir	Specifies the text directionality of the element’s content. Values: ltr (left-to-right), rtl (right-to-left), auto.
draggable	Specifies whether an element is draggable using the Drag and Drop API. Values: true, false, auto (default browser behavior).
hidden	A boolean attribute indicating that the element is not yet, or is no longer, relevant. Browsers typically do not render elements with the hidden attribute (similar to CSS display: none;).
id	Specifies a unique identifier for an element within the document. Used for CSS targeting, JavaScript selection, and linking (fragment identifiers in URLs).
lang	Specifies the primary language of the element’s content. Uses standard language codes (e.g., en, es, fr-CA).
spellcheck	Specifies whether the element should have its spelling and grammar checked. Values: true or false. Applicable to editable content.
style	Specifies inline CSS style(s) for an element. Generally recommended to use external stylesheets (<link>) or embedded styles (<style>) instead for better maintainability.
tabindex	Specifies the tabbing order of an element. Values: a negative integer (removes from tab order but still focusable via script), 0 (includes in tab order based on source order), a positive integer (defines explicit tab order - use with caution as it can harm accessibility).
title	Specifies extra information about an element. Browsers often display the value as a tooltip when the mouse hovers over the element.
translate	Specifies whether the element’s content should be translated when the page is localized. Values: yes or no.

Deprecated Presentation Attributes

Attributes like align, bgcolor, background, height, width (on non-replaced elements like div), valign are deprecated in HTML5. Their functionality should be achieved using CSS for better separation of concerns.

For example, instead of <p align="center">, use CSS: p { text-align: center; }.

Custom Data Attributes (data-*)

HTML5 formally introduced custom data attributes as a way to embed custom data directly within HTML elements without violating standards.

Rules for custom data attributes:

• Must start with the prefix data-.
• Must contain only lowercase letters, numbers, hyphens (-), dots (.), colons (:), or underscores (_) after the prefix.
• Should not contain any uppercase ASCII letters.

Example Usage

<article
  id="post-42"
  class="blog-entry"
  data-post-id="42"
  data-author-username="jane_doe"
  data-tags='["html5", "webdev", "tutorial"]' >

  <h2>Understanding data-* Attributes</h2>
  <p>...</p>
</article>

<script>
  const articleElement = document.getElementById('post-42');

  // Accessing data attributes via the dataset property
  console.log(articleElement.dataset.postId); // Output: "42"
  console.log(articleElement.dataset.authorUsername); // Output: "jane_doe"

  // Attribute names are camelCased in the dataset object
  const tags = JSON.parse(articleElement.dataset.tags);
  console.log(tags); // Output: ["html5", "webdev", "tutorial"]

  // You can also use getAttribute
  console.log(articleElement.getAttribute('data-post-id')); // Output: "42"
</script>

JavaScript provides easy access to these attributes via the element.dataset property, where attribute names like data-author-username become dataset.authorUsername.

For a complete list and detailed descriptions of all global attributes, refer to the MDN Web Docs: (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes)