In HTML, elements can have additional information called attributes. Attributes provide extra details about an element and control its behavior or appearance.
Attributes are placed inside the opening tag of an element. The general syntax is:
<element attribute="value">Content</element>
For example:
<a href="https://example.com">Visit Example</a>
In this example, href is the attribute, and "https://example.com" is its value.
| Attribute | Element | Purpose / Example |
|---|---|---|
| href | <a> | Specifies the URL of the link |
| src | <img> | Specifies the path to an image |
| alt | <img> | Provides alternative text for an image |
| id | All elements | Unique identifier for the element |
| class | All elements | Assigns one or more classes for styling with CSS |
| style | All elements | Adds inline CSS styles |
| title | All elements | Specifies extra information shown as a tooltip |
<a href="https://www.google.com" target="_blank">Visit Google</a>
<img src="logo.png" alt="Company Logo" width="150">
<div id="header" class="main-header">
<h1>Welcome</h1>
</div>
id and classalt attribute for all images for accessibilityHTML attributes enhance elements by providing additional information or controlling behavior. They are essential for creating functional, accessible, and well-structured web pages.
Learning how to use attributes effectively is a key step toward mastering HTML and web development.