input hidden or div with display:none css? [closed]

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>

Answer 2

There are many factors involved in performance. But unless you are storing a ton of data the performance differences are likely indistinguishable.

What's best for code integrity and semantics is dependent upon the data and how you are using it.

There are many options for storing data:

• Storing data in a hidden input which is great for use with forms:

  <input name="mydata" type="hidden" value="some data" />

• Storing data in a hidden html tags which is often frowned upon by search engines because of it's abuse in trying to improve SEO ranking:

  <div id="mydata" style="display:none"> some data </div>

• Storing data in javascript which is great for quick easy access:

  <script type="text/javascript"> var data.id = 123; var data.list = ["Yes","No","Maybe"]; </script>

• Storing data in a META Tag which I've used on a rare occasion: http://code.lancepollard.com/complete-list-of-html-meta-tags#create-custom-meta-tags

  <meta name="mydata" content="some data"/>

• Storing data in a cookie which as long as cookies haven't been disabled this option allows for the data to expire: http://www.w3schools.com/js/js_cookies.asp

• HTML5 has an SQLite database:

  http://html5doctor.com/introducing-web-sql-databases/

• HTML5 specs allows for custom data attributes

  http://html5doctor.com/html5-custom-data-attributes/