Previous

HTML Global Attributes

HTML Global Attributes are universal attributes that can be applied to all HTML elements. They allow developers to add custom behaviors, styles, or properties to HTML elements, making them more interactive and functional.

Syntax

Global attributes are written within the opening tag of an HTML element:

<element globalAttribute="value">Content</element>

Common HTML Global Attributes

Below are some commonly used HTML global attributes along with examples:

1. class

Defines one or more class names for an element, used for applying CSS or targeting with JavaScript.

Example: Using the class Attribute

<!DOCTYPE html>
<html>
<head>
  <title>Class Attribute</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p class="highlight">This paragraph is highlighted.</p>
</body>
</html>

2. id

Specifies a unique identifier for an element.

Example: Using the id Attribute

<!DOCTYPE html>
<html>
<head>
  <title>ID Attribute</title>
</head>
<body>
  <p id="unique">This paragraph has a unique ID.</p>
</body>
</html>

3. style

Adds inline CSS directly to an element.

Example: Using the style Attribute

<!DOCTYPE html>
<html>
<head>
  <title>Style Attribute</title>
</head>
<body>
  <p style="color: blue; font-size: 18px;">This text is styled inline.</p>
</body>
</html>

4. title

Provides additional information about the element, shown as a tooltip when hovered.

Example: Using the title Attribute

<!DOCTYPE html>
<html>
<head>
  <title>Title Attribute</title>
</head>
<body>
  <p title="This is a tooltip">Hover over this text to see the tooltip.</p>
</body>
</html>

5. data-*

Custom attributes used to store extra information or metadata.

Example: Using data-* Attribute

<!DOCTYPE html>
<html>
<head>
  <title>Data Attribute</title>
</head>
<body>
  <div data-user-id="101" data-role="admin">User Information</div>
  <script>
    const div = document.querySelector('div');
    console.log(div.dataset.userId); // Output: 101
    console.log(div.dataset.role); // Output: admin
  </script>
</body>
</html>

6. contenteditable

Indicates whether the element's content is editable.

Example: Using contenteditable Attribute

<!DOCTYPE html>
<html>
<head>
  <title>Contenteditable Attribute</title>
</head>
<body>
  <p contenteditable="true">You can edit this text.</p>
</body>
</html>

7. hidden

Hides an element from the webpage.

Example: Using hidden Attribute

<!DOCTYPE html>
<html>
<head>
  <title>Hidden Attribute</title>
</head>
<body>
  <p hidden>This text is hidden and won't appear on the page.</p>
</body>
</html>

8. draggable

Specifies whether an element is draggable.

Example: Using draggable Attribute

<!DOCTYPE html>
<html>
<head>
  <title>Draggable Attribute</title>
</head>
<body>
  <div draggable="true" style="width: 100px; height: 100px; background: lightblue;">
    Drag me!
  </div>
</body>
</html>

9. spellcheck

Indicates whether spell checking is enabled for the element.

Example: Using spellcheck Attribute

<!DOCTYPE html>
<html>
<head>
  <title>Spellcheck Attribute</title>
</head>
<body>
  <textarea spellcheck="true">Type here...</textarea>
</body>
</html>

10. tabindex

Defines the tab order of an element for keyboard navigation.

Example: Using tabindex Attribute

<!DOCTYPE html>
<html>
<head>
  <title>Tabindex Attribute</title>
</head>
<body>
  <button tabindex="2">Second</button>
  <button tabindex="1">First</button>
  <button tabindex="3">Third</button>
</body>
</html>

 

Summary

HTML Global Attributes are versatile and applicable to all HTML elements, enhancing functionality and interactivity. Key attributes include class, id, style, title, data-*, contenteditable, hidden, draggable, spellcheck, and tabindex. Proper use of these attributes allows for better user experience and ease of element management in HTML documents.

Previous