HTML <div> Attributes
The <div> attribute is a block-level container that is used to group other HTML elements together for styling and create layout structures for specific functionalities or interactions in HTML.
Syntax Example of <div> Attribute
<div attribute_name="attribute_value">
<!-- Content goes here -->
</div>
List of <div> Attributes
- id
- class
- style
- title
- data-*
- aria-*
1. Using the id Attribute
The id attribute is used to give a unique identifier to the <div>, as well as, it is often used when want to target the specific <div> element with JavaScript or CSS.
Syntax Example
<div id="FirstDiv">
<!-- Content goes here -->
</div>
2. Using the class Attribute
The class attribute is used to assign one or more class names to the <div>, it allows to apply specific styles to the <div> using CSS or target it with JavaScript.
Syntax Example
<div class="container">
<!-- Content goes here -->
</div>
3. Using the style Attribute
The style attribute allows you to apply inline CSS styles directly to the <div>. Use this to customize the appearance of the <div>.
Syntax Example
<div style="color: blue; font-size: 16px;">
<!-- Content goes here -->
</div>
4. Using the title Attribute
The title attribute provides additional information about the <div>, and when the user hovers over the element, the value of the title attribute is displayed as a tooltip.
Syntax Example
<div title="This is a tooltip">
<!-- Content goes here -->
</div>
5. Using custom data-* Attribute
You can use custom data-* attributes to store additional data related to the <div> element. These attributes start with "data-" and can have any name you choose.
Syntax Example
<div data-info="Here some data">
<!-- Content goes here -->
</div>
6. Using ARIA Attributes (aria-*)
ARIA attributes are used to improve the accessibility of the web page for users with disabilities. It provides additional information on assistive technologies.
Syntax Example
<div aria-labelledby="header">
<!-- Content goes here -->
</div>