HTML – ATTRIBUTES
HTML Attributes provide additional information about HTML elements, helping to define their properties, behavior, or appearance. Attributes are always included in the opening tag of an element and consist of a name-value pair. Some attributes are optional, while others are required depending on the element.
Syntax of an Attribute
<tagname attribute="value"<Content</tagname<
* Attribute name: Specifies what property is being defined.
* Attribute value: Provides the specific value for that property.
*Multiple attributes can be added to a single element, separated by spaces
An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value:
* The name is the property you want to set. For example, the paragraph <p>element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.
* The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned One 1</p>
<p align="center">This is center aligned Two 2</p>
<p align="right">This is right aligned Three 3</p>
</body>
</html>
This will produce the following result:
Global Attributes
| Attribute | Description |
|---|---|
| id | Specifies a unique identifier. |
| class | Assigns one or more class names. |
| style | Adds inline CSS. |
| title | Adds a tooltip on hover. |
| lang | Specifies the language of the element's content. |
| data-* | Custom data attributes for scripting or data storage. |
Core Attributes in HTML are a set of attributes that can be used with most HTML elements. These attributes provide additional functionality or metadata for the element, making them versatile across different tags.
Core Attributes List
1.id
*Specifies a unique identifier for an element.
*SUseful for CSS styling, JavaScript manipulation, or linking via anchors
Example:
<div id="header">This is the header.</div>
This will produce the following result:
2.class
*Assigns one or more class names to an element.
*Used to apply CSS styles or target elements in JavaScript.
Example:
<p class="intro highlight">This paragraph has two classes.</p>
This will produce the following result:
3.style
* Specifies inline CSS styles directly on an element.
*Use sparingly, as it's better to use external stylesheets.
Example:
<h1 style="color: blue; text-align: center;">Styled Heading</h1>
This will produce the following result:
4.title
*Provides additional information (tooltip) about an element.
*Displayed when the user hovers over the element.
Example:
<button title="Click me for more info!">Hover over me</button>
This will produce the following result:
Core Attributes in Action
Here’s an example that combines several core attributes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Core Attributes Example</title>
<style>
.highlight {
color: red;
}
</style>
</head>
<body>
<div id="container" class="highlight" style="border: 2px solid black;" title="This is a tooltip for the div.">
<p>This is a paragraph inside a styled div.</p>
</div>
</body>
</html>
This will produce the following result:
The xml:lang Attribute
The xml:lang attribute is the XHTML replacement for the lang attribute. The value of thexml:lang attribute should be an ISO-639 country code as mentioned in previous section.
Generic Attributes
Here’s a table of commonly used attributes in XML that are readily usable with many XML tags. These attributes help define properties of elements, aid in namespace management, and enhance the functionality of XML documents.
| Attribute | Description | Example Use Cases |
|---|---|---|
| id | Specifies a unique identifier for an element. It should be unique within the XML document. | <book id="123"&tg;XML for Beginners</book> |
| lang | Specifies the language of the content in an element. Often used for internationalization. | <title lang="en">Introduction to XML</title> |
| style | Adds inline CSS. | |
| xml:lang | Specifies the language for an element in XML documents (often used in XHTML or SVG). | <description xml:lang="fr">Ceci est une description en français.</description> |
| xmlns | Defines the default namespace for an XML document. Helps avoid naming conflicts in XML vocabularies. | <book xmlns="http://www.example.com/book">XML Basics </book> |
| xmlns:prefix | Defines a specific namespace with a prefix for XML elements. | <book xmlns:book="http://www.example.com/book">XML Basics</book> |
| type | Specifies the data type of an element. Often used in XML Schema or other XML-based documents. | <price type="currency">100.00 </price> |
| ref | Specifies a reference to another element or resource in XML. | <order ref="order123"/> |
| src | Specifies the source URL or location of an external resource, like an image or file. | <image src="image.jpg"/> |
| href | Defines a hyperlink or the URL to another resource. | <link href="https://www.example.com">Visit Example</link> |
| target | Specifies where to display the linked resource (e.g., new window, same frame). | <link href="https://www.example.com" target="_blank">Click Here</link> |
| value | Specifies the value of an element, often used for form inputs or options. | <input type="text" value="default text"/> |
| title | Provides additional information (tooltip) about an element. | <description title="Book Details">XML for Beginners</description> |
| xml:space | Specifies whether the whitespace inside an element is preserved (preserve) or collapsed (default). | <text xml:space="preserve">This text has extra spaces.</text> |
| space | Specifies whether the spaces inside the element should be preserved or collapsed, commonly used in XML Schema. | <description space="preserve"> Text with spaces </description> |
| action | Specifies the action or destination (URL) for a form or request. | <form action="submit.php" method="post"> |
| checked | Specifies that a checkbox or radio button is pre-selected. | <input type="checkbox" checked="checked"/> |
| method | Specifies the HTTP method (GET or POST) to be used for form submissions. | <<form method="post"> Submit </form> |
| disabled | Specifies that an element is disabled and cannot be interacted with. | <button disabled="disabled">Submit≶/button> |
| placeholder | Provides a short hint inside an input field, describing its expected value. | <input type="text" placeholder="Enter your name"//> |
| ref | Specifies a reference to another element or resource in XML. | <order ref="order123"/> |
| required | Specifies that an input field must be filled out before submitting a form. | <input type="text" required="required"/> |
| min | Specifies the minimum value allowed for an element (like a number or date). | <order ref="order123"/> |
| max | Specifies the maximum value allowed for an element (like a number or date). | <input type="number" max="100"> |
| cols | Defines the visible width of a <textarea> element in terms of character count. | <textarea rows="5">Text here</textarea>/> |
| for | Specifies the form element that a <label> is associated with. | <order ref="order123"/> |
| ref | Specifies a reference to another element or resource in XML. | <label for="username">Username</label> |
| accept | Specifies the types of files that are accepted in a file upload form. | <input type="file" accept=".jpg,.png,.gif"/> |
| disabled | Disables a form element, preventing user interaction. | <input type="text" disabled="disabled"/> |
| multiple | Allows multiple values in a form control (e.g., select or file input). | <input type="file" multiple="multiple"/> |
| step | Defines the interval steps allowed for input values (e.g., number or date). | <input type="number" step="5"/> |
| autofocus | Specifies that an element should automatically gain focus when the page loads. | <input type="text" autofocus="autofocus"/> |