HTML Attributes
Attributes provide extra information about an element. They live inside the start tag, usually as name="value" pairs.
Anatomy of an attribute
<a> element.Common global attributes
These attributes can be used on almost any element:
| Attribute | Purpose | Example |
|---|---|---|
id | Unique identifier for the element. | id="hero" |
class | Space-separated list of class names, used by CSS. | class="btn primary" |
style | Inline CSS for this element only. | style="color:#04AA6D" |
title | Tooltip text shown on hover. | title="Save" |
lang | Language of the element's content. | lang="en" |
hidden | Hides the element from rendering. | hidden |
data-* | Custom data attributes you define yourself. | data-user-id="42" |
Note: Always quote attribute values.
href=/about sometimes works, but href="/about" always does and is required as soon as the value contains spaces or special characters.Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Attributes</title>
</head>
<body>
<h1>HTML Attributes</h1>
<p>This is a demo page for the "HTML Attributes" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Add the attribute that gives this link its destination.
<a
="https://laravel.com">Laravel</a>
It stands for "hypertext reference".
Discussion
Loading…