HTML Attributes Summary
HTML attributes add extra information or settings to an element. They go inside the opening tag and tell the browser things like where a link goes, which image to load, or which CSS styles to use.
<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 followed by 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.
<a href="https://example.com" title="Visit Example">Visit Example</a>Attributes do not use commas between them.
The Href Attribute
The href attribute tells a link where to go.
<a href="about.html">About Me</a>Without an href value, an anchor element does not work like a normal link. You will use this attribute whenever you create links between pages or sections.
The HTML links lesson explains link destinations in more detail.
Image Attributes
Images commonly use the src and alt attributes.
<img src="cat.jpg" alt="A gray cat sitting on a chair">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 image files and alternative text in more detail.
Class 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>Several elements can use the same class. One element can also have several classes, separated by spaces.
<div class="card featured">
Featured card content
</div>The CSS selectors lesson explains how CSS uses class names.
ID Attributes
The id attribute gives an 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.
Data Attributes
A data attribute stores custom information on an HTML element. Its name always begins with data-.
<button data-topic="html">HTML Help</button>Data attributes do not usually change how an element looks by themselves. JavaScript can read them later to decide what an element should do.
Attributes Depend On The Element
Not every attribute belongs on every element. The href attribute is used on links, while src and alt are commonly used on images.
Attributes such as class, id, and title can be used on many different HTML elements.
Writing Attributes Correctly
Put attributes inside the opening tag. Use spaces between attributes, quotation marks around values, and clear names that describe the element’s purpose.
<button class="contact-button" type="button" data-action="open-form">
Contact Us
</button>You do not need to memorize every attribute. Learn the common ones as you use links, images, buttons, forms, CSS, and JavaScript.