input hidden or div with display: none in css?

Issue

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?

Solution

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>

Answered By – Michiel van Oosterhout

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0