How does the data-* attribute work in HTML-5

The data-* attribute in HTML5 allows you to store custom data attributes directly in your HTML elements. These attributes provide a way to store extra information that can be used by JavaScript, CSS, or for any other custom data storage purpose.

For example, you might have an element like this:

        
            <div id="user" data-userid="123" data-username="JohnDoe" data-email="[email protected]"></div>
        
    

In this case, data-userid, data-username, and data-email are custom data attributes. You can access and manipulate these attributes using JavaScript:

        
            // Accessing the data attributes using JavaScript
            const userDiv = document.getElementById('user');
            
            const userId = userDiv.dataset.userid; // Accessing data-userid attribute
            const username = userDiv.dataset.username; // Accessing data-username attribute
            const email = userDiv.dataset.email; // Accessing data-email attribute
            
            // Changing the value of a data attribute
            userDiv.dataset.username = 'JaneDoe';            
        
    

These attributes are particularly useful when you want to associate additional data with HTML elements without cluttering the structure with non-standard attributes or data. They are accessible via the dataset property in JavaScript and can be manipulated or read dynamically.

For styling purposes, you can also use these attributes in CSS:

        
            /* CSS utilizing data attributes */
            div[data-userid="123"] {
              /* Styles for elements with data-userid="123" */
            }            
        
    

This feature provides a convenient way to store information that might be useful for scripting, styling, or other custom functionalities associated with HTML elements.

How To Open a Port on Linux

Opening a port on Linux involves configuring the firewall to allow traffic through the specified port. Here's a step-by-step guide to achieve this, assuming you are using ufw (Uncomplicated Firewall) or iptables for managing your firewall settings. u …

read more

How To Set Up a Multi-Node Kafka Cluster using KRaft

Setting up a multi-node Kafka cluster using KRaft (Kafka Raft) mode involves several steps. KRaft mode enables Kafka to operate without the need for Apache ZooKeeper, streamlining the architecture and improving management. Here’s a comprehensiv …

read more