Attributes · HTML · CodeMIRAI

Attributes

2 min read 3 runnable examples Quiz included

Attributes give an element extra information. They go in the opening tag as name="value" pairs.

HTML

<a href="https://www.python.org" title="The official Python site">Visit python.org</a>

href tells the link where to go.
title shows a tooltip when you hover.

Common attributes

Attribute	Used on	Does
`href`	`<a>`	the link's destination
`src`	`<img>`, `<script>`, `<video>`	the file to load
`alt`	`<img>`	text description of an image
`id`	any element	a unique name for one element
`class`	any element	one or more group names, for styling
`style`	any element	inline CSS
`title`	any element	extra info shown as a tooltip
`lang`	any element	the language of the content

id and class

id must be unique on the page; class can be shared by many elements, and one element can have several classes separated by spaces:

HTML

<style>
  .note { padding: 8px 12px; border-radius: 6px; background: #eef0ff; }
  .warning { background: #fff4dc; }
  #main-title { color: #5a48f5; }
</style>

<h1 id="main-title">Attributes</h1>
<p class="note">A note.</p>
<p class="note warning">A note that is also a warning.</p>

CSS and JavaScript use id and class to find elements.

Boolean attributes

Some attributes don't need a value; their presence is enough:

HTML

<input type="text" placeholder="You can't type here" disabled>
<input type="checkbox" checked> Subscribed

Quotes

Always wrap attribute values in quotes. Double quotes are the convention. Values with spaces must be quoted.

Finished this lesson?Mark it complete to earn +20 XP and move your progress on.