HTML Basics: Attributes

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

The opening tag of an element can have special snippets of information we can attach, called attributes.

Attributes have the key="value" syntax:

<p class="a-class">A paragraph of text</p>

You can also use single quotes, but using double quotes in HTML is a nice convention.

We can have multiple attributes:

<p class="a-class" id="an-id">A paragraph of text</p>

Some attributes are boolean, meaning you only need the key. For example, see the defer attribute on the script tag:

<script defer src="file.js"></script>

The class and id attributes are two of the most common you’ll find used.

They have a special meaning, and they are useful both in CSS and JavaScript.

The difference between the two is that an id is unique in the context of a web page; it cannot be duplicated.

Classes, on the other hand, can appear multiple times on multiple elements.

Also, an id is just one value. class can hold multiple values, separated by a space:

<p class="a-class another-class">
  A paragraph of text
</p>

It’s common to use the dash - to separate words in a class value, but it’s just a convention.

Those are just two of the possible attributes you can have.

Some attributes are only used for one tag and are highly specialized. Others have broader applications, like id and class you just saw.