< Previous Next >

HTML Attributes

HTML attributes provide additional information about HTML elements.

HTML attributes are additional properties or information provided to an HTML element to control its behavior, appearance, or functionality. They typically consist of name-value pairs and are placed within the opening tag of an HTML element.

HTML attributes:

Attributes provide additional information about elements.
Attributes are always specified in the start tag.
Attributes usually come in name/value pairs like: name="value"
All HTML elements can have attributes

Common HTML Attributes:

id

Uniquely identifies an element.
Example: <div id="main-content"></div>

class

Assigns one or more class names to an element, which can be used for CSS styling or JavaScript.
Example: <p class="text-center large-text"></p>

style

Specifies inline CSS styles.
Example: <h1 style="color: blue; font-size: 24px;"></h1>

href

Specifies the URL of a link.
Example: <a href="https://example.com">Visit Example</a>

src

Specifies the source of an embedded content like an image or video.
Example: <img src="image.jpg" alt="Sample Image">

alt

Provides alternative text for an image if it cannot be displayed.
Example: <img src="logo.png" alt="Company Logo">

title

Provides additional information that is displayed as a tooltip when hovered over.
Example: <button title="Click here to submit">Submit</button>

data

Allows for the creation of custom data attributes, used for storing extra information.
Example: <div data-user-id="12345"></div>

type

Specifies the type of input element (for form controls like buttons, input fields, etc.).
Example: <input type="text" placeholder="Enter name">

placeholder

Provides placeholder text for input fields.
Example: <input type="email" placeholder="Enter your email">

disabled

Disables an element, making it inactive.
Example: <button disabled>Submit</button>

value

Defines the value of input, option, or button elements.
Example: <input type="text" value="Default Text">

action

Specifies where to send form data when submitted.
Example: <form action="/submit" method="POST"></form>

method

Defines the HTTP method for form submission (e.g., GET or POST).
Example: <form method="POST"></form>

target

Specifies where to open the linked document.
Example: <a href="https://example.com" target="_blank">Open in new tab</a>

rel

Specifies the relationship between the current document and the linked one.
Example: <a href="https://example.com" rel="nofollow">Example</a>

autocomplete

Indicates if an input field should have autocomplete enabled or not.
Example: <input type="text" autocomplete="off">

required

Specifies that an input field must be filled out before submitting.
Example: <input type="email" required>

readonly

Makes an input field read-only (user can't edit it).
Example: <input type="text" value="Fixed Value" readonly>

checked

Preselects a checkbox or radio button.
Example: <input type="checkbox" checked>

Here are the key points about HTML attributes:

1. Name-Value Pairs: Attributes are written as name-value pairs. The attribute name comes first, followed by an equal sign, and the value is enclosed in quotes.
2. Global Attributes: Some attributes, like class, id, style, and title, can be applied to almost any HTML element.
3. Case Insensitivity: Attribute names are generally case-insensitive (though conventionally written in lowercase).
4. Optional Quotes (HTML5): In HTML5, quotes around attribute values are sometimes optional if the value is a single word, though it's recommended to always use quotes.
Boolean Attributes: Some attributes don’t require a value and are used to indicate a true/false state, like checked in <input>, disabled, or readonly.
Data Attributes: Custom attributes that begin with data- allow you to store extra data on HTML elements.

< Previous Next >