HTML Attributes: Syntax, Common Attributes and Boolean Attributes

Attributes give an element extra information or change how it behaves. A link needs to know where it goes; an image needs to know which file to show. That information goes in attributes.

Syntax#

Attributes are written inside the opening tag, as name="value":

<a href="https://developer.mozilla.org">MDN Web Docs</a>

• href is the attribute name.
• "https://developer.mozilla.org" is its value.
• Separate multiple attributes with spaces. Their order does not matter.

<a href="https://developer.mozilla.org" title="Opens MDN Web Docs">MDN Web Docs</a>
<p lang="fr">Bonjour tout le monde</p>
<p title="I am a tooltip">Hover over this paragraph.</p>

Hover over the link or the last paragraph in the result: the title attribute appears as a tooltip.

Quoting values#

Always put values in double quotes. Quotes are required when a value contains spaces:

<!-- Correct -->
<p title="Hello world">...</p>

<!-- Wrong: the browser reads title="Hello" and a separate attribute named world -->
<p title=Hello world>...</p>

If the value itself contains a double quote, wrap it in single quotes, or write the quote as ":

<p title='She said "hi"'>...</p>
<p title="She said &quot;hi&quot;">...</p>

Common attributes#

Attributes that work on any element, such as id, class, title, lang, style and hidden, are called global attributes.

Boolean attributes#

Some attributes are either present or absent; they have no meaningful value. These are boolean attributes:

<p><input type="checkbox" checked> Checked by default</p>
<p><button disabled>Can't click me</button></p>
<p hidden>You will not see this paragraph.</p>

• checked ticks the checkbox.
• disabled greys out the button and stops it being clicked.
• hidden hides the element completely.

The presence of the attribute is what counts. disabled="false" still disables the button, because the attribute is present. To turn it off, remove the attribute.

Case and custom attributes#

Attribute names are case-insensitive, but always write them in lowercase. You cannot invent your own attribute names, with one exception: attributes starting with data-, which you will learn in id, class and data Attributes.

Common mistakes#

Practice#

<p><a href="https://www.wikipedia.org" title="The free encyclopedia">Wikipedia</a></p>
<button disabled>Coming soon</button>

Key takeaway#