HTML Attributes Summary
HTML attributes add extra information to an element, such as where a link goes, which image file to load, or which name CSS can use for styling.
<a href="https://example.com">Visit Example</a>Attributes Go Inside The Opening Tag
Most HTML elements have an opening tag and a closing tag. Attributes are written inside the opening tag, after the element name.
<p class="introduction">Welcome to my website.</p>In this example, class is the attribute name and introduction is its value.
Attribute Names And Values
Most attributes use a name, an equals sign, and a value inside quotation marks.
attribute="value"An element can have more than one attribute. Separate each attribute with a space, not a comma.
<a href="https://example.com" title="Visit Example">Visit Example</a>Common Attributes
The href attribute tells a link where to go. The HTML links lesson explains link destinations in more detail.
<a href="about.html">About Me</a>The src attribute tells the browser which image file to load. The alt attribute describes the image when it cannot be seen or loaded. The HTML images lesson explains these attributes in more detail.
<img src="cat.jpg" alt="A gray cat sitting on a chair">Class And ID Attributes
The class attribute gives one or more elements a reusable name. CSS can use that name to select and style the elements.
<div class="card">
Card content
</div>
<div class="card featured">
Featured card content
</div>Several elements can use the same class. One element can also have several classes, separated by spaces. The CSS selectors lesson explains how CSS uses class names.
The id attribute gives one element a unique name on the page.
<section id="contact">
Contact information
</section>An ID should normally be used only once on a page. It can be used by CSS, links, and JavaScript to find one specific element.
Boolean Attributes
Some attributes do not need a separate value. Their presence turns a setting on.
<button disabled>Unavailable</button>
<input type="email" required>The disabled attribute prevents the button from being used. The required attribute tells the browser that an input must be completed before a form can be submitted.
Writing disabled="false" does not turn the setting off. The button is still disabled because the attribute is present. To turn it off, remove the attribute.
Attributes Depend On The Element
Not every attribute belongs on every element. For example, href belongs on links, while src belongs on images.
You do not need to memorize every attribute. Learn the common ones as you use links, images, buttons, forms, CSS, and JavaScript.