Which html elements should be wrapped with div? (<img>,<input>,<textarea>,<form>, <ul>, etc..)

Question

Hi,

A lot of times when I design I thinking about the question:

Which html elements should be wrapped with div and in which cases? (<img>,<input>,<textarea>,<form>, <ul>, etc..)

---

Example A- input text:

---

option1 without div:

<input class="input-wrapper" type="text" />

option2 with div around input:

<div class="input-wrapper"><input type="text" /></div>

---

Example B- img:

---

option1 without div:

<img class="image-wrapper" src="MyPic.jpg" alt="my pic" />

option2 with div around input:

<div class="image-wrapper"><img src="MyPic.jpg" alt="my pic" /></div>

---

---

Edit:

I talking about cases that as designer and programmer we have time to do best way with use of position: relative absolute, float and without <br/> etc..

Thanks

Answer 1

This question is far too vague for just one answer. It all comes down to what your design requirements are. For your example A, you would probably wrap your input fields in a tag so an additional div for each input seems overkill IMO. Again, you might have some requirements that require special styling.

It also comes down to preference. Some people would rather wrap an additional div to wrap one image instead of adding the proper CSS to make that image a block element.

Answer 2

Lot of times, you use the div to wrap around other elements mostly for layout purposes. There is no rule which says you should not wrap div's around elements or not. Echoing wb's answer over here may be most of the time you can achieve the same result with applying the styles to the particular elements itself.

Me when started with css, used a lot of div's as a wrapper, although they where not useful. But it took some time to get used to get the proper layout with appropriate tags and styles.

Some links might be useful reads

http://www.apaddedcell.com/div-itis#

http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/