HTML Attributes
Attributes add extra information to elements.
Syntax
<a href="https://example.com">Link</a>Attributes provide additional information about an element. They are always specified in the start tag.
Attribute syntax
- An attribute comes as a name/value pair:
name="value". - Values should be wrapped in quotes.
For example, the href attribute of a link tells the browser where to go.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer adds href to an <a> element to specify which URL the link points to.
- A designer sets class attributes on multiple elements to apply the same CSS styles to all of them.
- A developer uses the disabled attribute on a <button> to prevent form submission while data is loading.
More examples
Attribute on an anchor element
href, target, and rel are attributes that configure the link destination and open behavior.
<a href="https://soundscode.io" target="_blank" rel="noopener">
Visit SoundsCode
</a>Multiple attributes on an input
Each attribute on <input> adds a distinct behavior: type, placeholder, validation, and autocomplete hint.
<input
type="email"
name="email"
placeholder="[email protected]"
required
autocomplete="email"
>Boolean and enumerated attributes
Boolean attributes need no value; enumerated attributes accept a fixed set of valid values.
<!-- Boolean: presence means true -->
<input type="checkbox" checked>
<button disabled>Processing...</button>
<!-- Enumerated: specific allowed values -->
<div contenteditable="true">Click to edit.</div>
Discussion