What is an HTML Attribute? Give Examples

Extra details about an HTML element can be found in an HTML attribute. A feature’s opening tag always contains its attributes, which are typically named/value pairs like name=”value”.

Common HTML Attributes

Common HTML Attributes are id, class, style, title, href, src, alt, type, value, placeholder and global Attributes also.

id

specifies an element’s unique id.

<div id="header">Header Content</div>

class

Gives an element one or more class names to utilize for style.

<p class="intro">This is an introductory paragraph.</p>

style

Indicates an element’s inline CSS style.

<h1 style="color: blue;">This is a blue heading</h1>

title

Offers further details about an element (shown as a tooltip).

<abbr title="World Health Organization">WHO</abbr>

href

For <a> elements, this specifies the URL of the page the link points to.

<a href="https://www.example.com">Visit Example</a>

src

For <img> elements, the src attribute contains the image’s URL.

<img src="image.jpg" alt="Description of the image">

alt

 Offers substitute text for an image in the event that it is unable to be displayed.

<img src="image.jpg" alt="Description of the image">

type

 For<input> elements, indicates the type of the input element.

<input type="text" name="username">

value

 For <input>,<button> and <option> elements, indicates the input element’s value.

<input type="text" name="username" value="JohnDoe">

placeholder

 Provides a brief explanation of the anticipated value of an input field.

<input type="text" placeholder="Enter your name">

Example

An HTML element with several attributes looks like this:

<a href="https://www.example.com" title="Visit Example" target="_blank" class="link">Example</a>

In this example,

The destination URL is provided with href=”https://www.example.com”.
When the link is hovered over, a tooltip with the title “Visit Example” appears.
The link opens in a new tab or window when target=”_blank” is used.
When a link has the class=”link” assigned to it, CSS styling can be applied to it.

Global Attributes

Global attributes are also available for usage on any HTML element:

Accesskey: Indicates a shortcut key for focusing or activating an element.
class: Gives an element one or more class names.
contenteditable: Denotes the editability of the element’s content.
data-*: Used to hold unique information that is exclusive to the website or program.
dir: Indicates the text direction of the element’s content.
draggable: Indicates if an element can be dragged.
Hidden: A sign that something is either not important yet or not at all.
id: Specifies the element’s distinct identifier.
lang: Indicates the content language of the element.
style: Specifies CSS inline styles.
tabindex: Indicates an element’s tab order.
title: Offers more details about the component.

HTML attributes are essential because they help define the characteristics of HTML elements, improve accessibility, and enhance interactivity.