CODEWITHSUNDEEP
htmlcustom-data-attribute
Kurt Van den Branden
Kurt Van den Branden

Reputation: 12943

Data attributes in head and meta tags

Similar to this question, I want to dynamically change and translate the values of some head tags (title, meta description, meta keywords ...) based on a chosen language by the user. It's a node.js application where I'm using Express and ejs to inject the language. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title data-translate-key="title">Translated title</title> 
    <meta name="description" data-translate-key="description" content="Translated description">
</head>
<body>
</body>
</html>

Is this allowed, and is this valid html? This document on w3docs.com says the following:

Allows private information to be exchanged between HTML and its DOM representation. It gives the ability to embed custom data attributes on all HTML elements.

I ran the above snippet in the official w3 validator and it did not show any errors. So therefore I assumed it is valid html. However I cannot find much information about it.

Upvotes: 3

Views: 1884

Answers (1)

muratgozel
muratgozel

Reputation: 2589

Yes, it is valid.

As stated in MDN web docs:

The data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts.

data-* attributes are global attributes and global attributes as stated in MDN web docs:

Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.

can be applied to all elements.

Upvotes: 2

Related Questions