How to declare custom attributes in HTML?-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to declare custom attributes in HTML?

王林

Aug 21, 2023 am 08:37 AM

htmlCustom propertiesstatement

How to declare custom attributes in HTML?

In this article, we will discuss how to declare a custom attribute in HTML. Custom attributes can be useful in HTML when you want to store some additional information that is not part of the standard HTML attributes. It allows for more flexibility and customization in HTML and can help make your code more maintainable and understandable.

Approaches

We have two different approaches to declaring a custom attribute in HTML including the following −

使用“ data- 前缀”
使用“自定义前缀”

让我们详细看一下每个步骤。

方法：使用“data-前缀方法”

第一种方法是在HTML中声明一个自定义属性，使用“data-”前缀。我们可以通过在属性名前加上"data-"来定义自定义属性。您可以使用自己选择的前缀来创建自定义属性的名称。这样可以将特定数据附加到HTML元素上，可以很容易地使用CSS、JavaScript或jQuery来定位。

Example

以下是使用“data-前缀”在HTML中声明自定义属性的示例。

<!DOCTYPE html>
<html>
<head>
   <title>Employee Table</title>
   <style>
      h1 {
         color: blue;
      }
      th {
         color: red;
      }
      table {
         border-collapse: collapse;
         width: 100%;
      }
      th, td {
         padding: 5px;
         text-align: left;
         border-bottom: 1px solid #ddd;
      }
      tr:nth-child(even) {
         background-color: #f2f2f2;
      }
   </style>
</head>
<body>
   <h1 id="Employee-Table">Employee Table</h1>
   <table>
      <thead>
         <tr>
            <th>Employee ID</th>
            <th>Name</th>
            <th>Department</th>
            <th>Salary</th>
         </tr>
      </thead>
      <tbody>
         <tr data-empid="001" data-dept="IT" data-salary="75000">
            <td>001</td>
            <td>Taylor</td>
            <td>IT</td>
            <td>$75,000</td>
         </tr>
         <tr data-empid="002" data-dept="HR" data-salary="60000">
            <td>002</td>
            <td>Jhon</td>
            <td>HR</td>
            <td>$60,000</td>
         </tr>
      </tbody>
   </table>
   <script>
      const rows = document.querySelectorAll("tr[data-empid]");
      rows.forEach(row => {
         const empid = row.dataset.empid;
         const dept = row.dataset.dept;
         const salary = row.dataset.salary;
         console.log(`Employee ID: ${empid}, Department: ${dept}, Salary: ${salary}`);
      });
   </script>
</body>
</html>

Note − Here, JavaScript can access the custom attributes in the example code by selecting the "tr" elements based on their custom attributes, and then logging the values of those attributes to the console.

方法：使用“自定义前缀方法”

第一种方法是在HTML中声明一个自定义属性作为“自定义前缀”。在HTML中，自定义前缀指的是在HTML元素上创建自定义属性。前缀可以是您选择的任何名称，添加在属性名称之前，它可以用于向元素添加附加数据或信息。通过使用自定义前缀，您可以创建适用于您需求的自定义属性，并可以在CSS或JavaScript中进行定位。

Example

Following is an example of declaring a custom attribute in HTML using “custom prefix”.

<!DOCTYPE html>
<html>
<head>
   <title>Custom Attribute Example</title>
   <style>
      [custom] {
         color: red;
      }
   </style>
</head>
<body>
   <h1 id="Tutorials-point">Tutorials point</h1>
   <p custom="paragraph-color">Hello World!</p>
   <script>
      const header = document.querySelector("[custom='header-color']");
      const paragraph = document.querySelector("[custom='paragraph-color']")
      console.log(`Header color: ${header.getAttribute('custom')}`);
      console.log(`Paragraph color: ${paragraph.getAttribute('custom')}`);
   </script>
</body>
</html>

It defines a custom attribute named "custom" and applies the CSS style to any element with that attribute.The JavaScript code selects the header and paragraph elements based on their custom attributes and logs the values of those attributes.

Conclusion

在本文中，我们研究了在HTML中声明自定义属性的两种不同方法。在这里，我们使用了“data-前缀”和“自定义前缀”这两种不同的方法。自定义前缀和data-前缀都用于在HTML中声明自定义属性，但是data-前缀更广泛被认可，并且被所有现代浏览器支持。自定义前缀更灵活，因为它允许您选择自己的前缀名称，但是它可能不被所有浏览器或工具认可。

The above is the detailed content of How to declare custom attributes in HTML?. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

What is the difference between an HTML tag and an HTML attribute?May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

The Future of HTML: Evolution and TrendsMay 13, 2025 am 12:01 AM

The future of HTML will develop in a more semantic, functional and modular direction. 1) Semanticization will make the tag describe the content more clearly, improving SEO and barrier-free access. 2) Functionalization will introduce new elements and attributes to meet user needs. 3) Modularity will support component development and improve code reusability.

Why are HTML attributes important for web development?May 12, 2025 am 12:01 AM

HTMLattributesarecrucialinwebdevelopmentforcontrollingbehavior,appearance,andfunctionality.Theyenhanceinteractivity,accessibility,andSEO.Forexample,thesrcattributeintagsimpactsSEO,whileonclickintagsaddsinteractivity.Touseattributeseffectively:1)Usese

What is the purpose of the alt attribute? Why is it important?May 11, 2025 am 12:01 AM

The alt attribute is an important part of the tag in HTML and is used to provide alternative text for images. 1. When the image cannot be loaded, the text in the alt attribute will be displayed to improve the user experience. 2. Screen readers use the alt attribute to help visually impaired users understand the content of the picture. 3. Search engines index text in the alt attribute to improve the SEO ranking of web pages.

HTML, CSS, and JavaScript: Examples and Practical ApplicationsMay 09, 2025 am 12:01 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML is used to build web page structure; 2. CSS is used to beautify the appearance of web pages; 3. JavaScript is used to achieve dynamic interaction. Through tags, styles and scripts, these three together build the core functions of modern web pages.

How do you set the lang attribute on the tag? Why is this important?May 08, 2025 am 12:03 AM

Setting the lang attributes of a tag is a key step in optimizing web accessibility and SEO. 1) Set the lang attribute in the tag, such as. 2) In multilingual content, set lang attributes for different language parts, such as. 3) Use language codes that comply with ISO639-1 standards, such as "en", "fr", "zh", etc. Correctly setting the lang attribute can improve the accessibility of web pages and search engine rankings.

What is the purpose of HTML attributes?May 07, 2025 am 12:01 AM

HTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform

How do you create a list in HTML?May 06, 2025 am 12:01 AM

TocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.

See all articles