Global Attributes and Metadata Attributes

Global Attributes and Metadata Attributes

Some attributes can be used on almost any element. These are called global attributes. They help with styling, scripting, accessibility, language, editing, and browser behavior.

Common Global Attributes

id

Purpose:

  • gives one unique identifier to an element

Example:

<section id="about"></section>

class

Purpose:

  • groups elements for CSS or JavaScript

Example:

<p class="intro highlighted">Welcome!</p>

title

Purpose:

  • provides advisory text, often shown as a tooltip

lang

Purpose:

  • describes the language of the content

Possible values:

  • en
  • en-US
  • es
  • fr

hidden

Purpose:

  • hides content from normal rendering

tabindex

Purpose:

  • controls keyboard focus order

Common values:

  • 0
  • -1

contenteditable

Purpose:

  • allows users to edit the element's content

Possible values:

  • true
  • false

draggable

Purpose:

  • marks whether an element can be dragged

Possible values:

  • true
  • false
  • auto

dir

Purpose:

  • sets text direction

Possible values:

  • ltr
  • rtl
  • auto

Metadata Attributes in the Head

Important attributes commonly used on <meta> and <link> include:

  • charset
  • name
  • content
  • http-equiv
  • rel
  • href
  • media
  • sizes

Example:

<meta name="description" content="A beginner HTML5 course">
<link rel="icon" href="favicon.ico">

Why Global Attributes Matter

They are the glue between HTML structure and:

  • CSS styling
  • JavaScript behavior
  • accessibility support
  • localization
  • SEO
PreviousNext Chapter