Skip to main content

What Is an HTML Attribute?

An HTML attribute is a name-value pair that you can add to an element's opening tag.

HTML attribute is an optional property of an element used to change the element's behavior or provide extra information about it.

Syntax of an HTML Attribute​

HTML attributes typically have the form name="value". Here is the syntax:

<tagName attribute-name="value"></tagName>

Example: An Anchor Tag with Two Attributes​

The HTML snippet below defines an anchor tag (<a>) with href and target attributes.

<a href="https://codesweetly.com" target="_blank">
  Visit CodeSweetly's Homepage
</a>

Try it on CodeSandbox

Note that boolean attributes—such as required, readonly, disabled, and check—permit the omission of a value.

Example: An Input Tag with a disabled Boolean Attribute​

The HTML snippet below defines an input tag (<input>) with a disabled attribute.

<input type="color" value="#ba55d3" disabled />

Try it on StackBlitz

Buy CSS Flexbox book
note

HTML Boolean attributes do not accept the values "true" and "false". So, suppose you specify a disabled="false" attribute. In that case, browsers will read it as disabled="disabled".

When you wish to specify a false value, you need to omit the attribute altogether.

Let's now see how to create custom attributes.

How to Create Custom HTML Attributes​

You can use the HTML data attribute to create custom attributes.

note

A custom HTML data attribute is an attribute whose name starts with data-.

Example 1: An <input> element with a custom data attribute​

The HTML snippet below defines an <input> element with a custom HTML attribute.

<input type="button" value="Click Me to Buy" data-test-btn="dummy-btn" />

Try it on StackBlitz

Example 2: A <li> elements with custom HTML attributes​

The HTML snippet below defines three list elements with custom HTML attributes.

<h1>2021 U.S. News Best Countries Ranking</h1>
<ol>
  <li data-first-best-country="north-american">Canada</li>
  <li data-second-best-country="asia">Japan</li>
  <li data-third-best-country="europe">Germany</li>
</ol>

Try it on StackBlitz

Overview​

This article discussed what an HTML attribute is. We also used examples to understand how to define and use it.