HTML Attributes for Styling and Accessibility

HTML Attributes & Global Attributes 

HTML attributes provide additional information about HTML elements. They define properties, behavior, and appearance of elements.

• Global attributes can be applied to almost all HTML elements, like class, id, style, title, and data-*.

• Attributes help in styling, scripting, accessibility, and data handling.

• They make HTML more meaningful, interactive, and maintainable.

Identification & Styling

These attributes are mainly used to identify elements for CSS styling or JavaScript manipulation, and to apply inline styles directly.

class

Assigns one or more class names to an element.

Classes are reusable, meaning multiple elements can share the same class for consistent styling or JS behavior.

Example:

<p class="highlight">This text will be styled using CSS.</p>

<style>
  .highlight {
    color: blue;
    font-weight: bold;
  }
</style>

Output :

id

Assigns a unique identifier to an element.

Useful for targeting a specific element with CSS, JavaScript, or internal links.

Example:

<h2 id="section1">Section 1</h2>
<a href="#section1">Go to Section 1</a>

<style>
  #section1 {
    color: green;
  }
</style>

Output :

style

Allows adding inline CSS directly to an element.

Good for quick styling, but external CSS is recommended for larger projects.

Example:

<p style="color: red; font-size: 18px;">This text is styled inline.</p>

Output :

Information & Accessibility

title

Shows additional information as a tooltip when hovering over an element.

Example:

<p title="This is a tooltip!">Hover over this text to see the tooltip.</p>

Output :

alt

Provides alternative text for images. Important for accessibility and SEO.

Example:

<img src="logo.png" alt="Company Logo">

Output : 

lang

Specifies the language of an element’s content. Helps screen readers and search engines.

Example:

<p lang="en">Hello, world!</p>
<p lang="es">¡Hola, mundo!</p>

Output : 

Global Attributes (Work with All HTML Elements)

These attributes can be used with any HTML tag.

Attribute	Description	Example
id	Unique identifier	<div id="header">...</div>
class	Assigns CSS class	<p class="note">Note here</p>
title	Tooltip text	<abbr title="World Health Organization">WHO</abbr>
style	Inline CSS	<p style="color:red;">Red text</p>
hidden	Hides element	<p hidden>This is hidden</p>
draggable	Allows drag & drop (true/false)	<img src="drag.png" draggable="true">
contenteditable	Make element editable	<p contenteditable="true">Edit me!</p>
spellcheck	Enable/disable spell checking	<p spellcheck="true">Check spelling</p>
tabindex	Control tab navigation order	<input tabindex="1">
translate	Allow translation	<p translate="no">BrandName</p>
data-*	Custom data attributes	<div data-user="123">User</div>