HTML Attributes

HTML attributes provide additional information about HTML elements.

HTML Attributes

An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag.

All attributes are made up of attribute name and attribute value:

Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.

Notes:

All HTML elements can have attributes
Attributes are always specified in the start tag
Attributes can be Boolean.

Example

<p style="color: red">This is a Paragraph.</p>

Try this code ❯

Core Attributes

Thre are four core attributes that can be used on the majority of HTML elements:

HTML id Attributes

The id attribute specifies a unique alphanumeric identifier to be associated with an element.

Example

<!DOCTYPE html>
<html>
<body>

<p id="myDemo">Hello World!</p>
<button onclick="myFunction()">Change text color</button>

<script>
function myFunction() {
  document.getElementById("myDemo").style.color = "red";
}
</script>

</body>
</html>

Try this code ❯

HTML title Attributes

The title attribute is used to provide advisory text about an element or its contents.

Example

<h2 title="HyperText Markup Language">HTML</h2>
<p>The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there have been many different versions of HTML. The most widely used version throughout the 2000`s was HTML 4.01, which became an official standard in December 1999.</p>

Try this code ❯

HTML class Attributes

The class attribute specifies the class or classes that a particularly belongs to element belongs.

Example

<!DOCTYPE html>
</html>
<html>
<head>
<style>
.demo {
  color: red;
}

.bg {
  background: green;
}
</style>
</head>
<body>

<h1 class="demo">Heading</h1>
<p class="demo bg">Paragraph.</p>

</body>
</html>

Try this code ❯

HTML style Attributes

The style attribute specifies an inline style associated with an element, which determines the rendering of the affected element.

Example

<p style="color: tomato;font-family: monaco">This is a paragraph</p>

Try this code ❯

HTML Attributes are Case Sensitive

W3C recommends lowercase attributes in HTML, and demands lowercase attributes for stricter document types like XHTML.

Good Practice

<p class="text">Text</p>

Bad Practice

<p CLASS="text">Text</p>

Always Quote Attribute Values

W3C recommends quotes in HTML, and demands quotes for stricter document types like XHTML.

Good Practice

<p class="text">Text</p>

Bad Practice

<p class=text>Text</p>

How to Use Single or Double Quotes?

The double quotes around attribute values are the most common in HTML, but single quotes can also be used. In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes.

Example

<p title='My Name is "John Doe".'>

<p title="My Name is 'John Doe'.">

<p title="It's not a big deal!">

Try this code ❯

Note: A complete list of all attributes for each HTML element: See HTML Attribute Reference.