Question

In our project we both use input type=hidden elements and divs with display:none css for storing some data on html page without showing it to user.

So i wonder which way is more suitable in both performance and code integrity and html semantics?

Answer 1

The hidden input will be hidden regardless of the styling rules of the document (CSS), this may make it better performance wise but I don’t have the data to show this. Having said that, input controls are meant to be submitted as part of a form.

There are other methods as well, like the HTML5 custom data attributes or using a script tag:

<!-- Custom data attribute -->
<div id="product" data-id="42">
    <h1>Product name</h1>
</div>

<!-- JSON data embedded in a script tag -->
<script type="application/json">
    { "id": 42 }
</script>