TOP CATEGORIES

×

How to use attributes in the Div tag?

R

Radhika

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

  1. id
  2. class
  3. style
  4. title
  5. data-*
  6. 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>

1 votes

Your Answer

Email: advertise@gdatamart.com

Donate: To Support US

© 2024 GDATAMART.COM (All Rights Reserved)