HTML Attributes & Entities

HTML attributes provide additional information about elements. They are placed inside the opening tag and usually come in name/value pairs like name="value".

1. Global Attributes (id, class, title, etc.)

Global attributes can be used on any HTML element. Some of the most common include:

• id: Assigns a unique identifier to an element.
• class: Assigns one or more class names to apply CSS styles or JavaScript logic.
• title: Provides additional info shown as a tooltip on hover.
• style: Adds inline CSS styling.

<p id="intro" class="highlight" title="This is a tooltip">
  Welcome to our HTML tutorial!
</p>

In the example above:

• id="intro" gives the element a unique ID.
• class="highlight" allows styling using CSS.
• title="This is a tooltip" shows a message when hovered over.

2. data-* Attributes

The data-* attribute is used to store custom data private to the page or application. This is often used with JavaScript to read/write values for dynamic behavior.

<div id="user" data-user-id="12345" data-role="admin">
  John Doe
</div>

You can access this data in JavaScript like this:

const userDiv = document.getElementById("user");
const userId = userDiv.dataset.userId;
const userRole = userDiv.dataset.role;
console.log(userId, userRole); // Outputs: 12345, admin

3. HTML Character Entities

Some characters are reserved in HTML (like <, >, and &), and must be written using character entities.

Entities start with & and end with ;. For example:

•   – Non-breaking space
• < – Less than (<)
• > – Greater than (>)
• & – Ampersand (&)
• © – © symbol
• € – € symbol

<p>Copyright &copy; 2025 CodeElevate</p>
<p>Price: &euro;20 &nbsp;&nbsp; Discounted Price: &euro;15</p>
<p>Use &lt;h1&gt; for main headings</p>

These entities ensure that special characters are displayed properly and don't interfere with HTML syntax.

Conclusion

HTML attributes enhance elements by adding metadata, identification, and interactivity. Character entities help you safely use reserved symbols within your HTML content. Learning to use these correctly ensures cleaner and more functional web pages.

If you have any questions, feel free to ask. Thank you for reading!