Consider the following html. We have a p tag. Inside this paragraph, we have some child elements. In this case, we have span, select, div and input elements. But while the browser will render this, it will not be able to render it correctly. Because html p tag does not support a div tag inside it. It can contain span, select, input or others, but cannot contain div.
<p id=”PFS_regimen”>
<span style=”width: 250px;“>Select Product/Form/Strength:</span>
<select name=”ddl_pfs” id=”ddl_pfs” style=”width: 300px”>
<option value=”">select from list</option>
</select>
<div style=”height: 2px; width: 300px;“> </div>
<span style=”width: 250px;“>Enter Regimen Name:</span>
<input type=”text” name=”txt_regimen_name” id=”txt_regimen_name” value=”untitled” />
<div style=”height: 2px; width: 300px;“> </div>
</p>
The above screenshot is taken from Developer Tools of internet explorer. The DOM object is created which is shown in the screenshot. This shows that the div is at the same level with p, which in fact should be a child of p similar to other child tags. So this is in fact a wrong HTML hierarchy. While creating DOM object, browser considered that div as the end of p tag and made a sibling.
If we remove the divs inside the p tag, everything will be fine. So the elements inside p tag are appearing as child elements.
<p id=”PFS_regimen”>
<span style=”width: 250px;“>Select Product/Form/Strength:</span>
<select name=”ddl_pfs” id=”ddl_pfs” style=”width: 300px”>
<option value=”">select from list</option>
</select>
<span style=”width: 250px;“>Enter Regimen Name:</span>
<input type=”text” name=”txt_regimen_name” id=”txt_regimen_name” value=”untitled” />
</p>
Even if we can replace the div with span and it will work.
<p id=”PFS_regimen”>
<span style=”width: 250px;“>Select Product/Form/Strength:</span>
<select name=”ddl_pfs” id=”ddl_pfs” style=”width: 300px”>
<option value=”">select from list</option>
</select>
<span style=”height: 2px; width: 300px;“> </span>
<span style=”width: 250px;“>Enter Regimen Name:</span>
<input type=”text” name=”txt_regimen_name” id=”txt_regimen_name” value=”untitled” />
<span style=”height: 2px; width: 300px;“> </span>
</p>