Menu
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.
956
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.
147
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
