Chrome and Firefox repair my Html tag?

Question

I have the following .html

<p>
    <input class="inputName" />
    <ul>
         <li>One value</li>
    </ul>
</p>

In google chrome, firefox and safari i got (in the source explorer)

<p>
    <input class="inputName" />
</p>
<ul>
     <li>One value</li>
</ul>

I can't reproduce the issue, it come from my smarty template .... somewhere but i have no idea where.

I don't know where to look. Every tags are closed. Have you ever seen that problem ?

You can´t write ul element into p! **http://stackoverflow.com/a/5681796/1623198** — Rubén Guerrero, Jun 27 '14 at 14:37

score 2 · Accepted Answer · answered Jun 27 '14 at 14:38

2

This is because the <p> tag cannot contain other block elements. You most-likely want to use <div> instead of <p>:

<div>
    <input class="inputName" />
    <ul>
         <li>One value</li>
    </ul>
</div>

answered Jun 27 '14 at 14:38

Robert Messerle

score 2 · Answer 2 · edited May 23 '17 at 12:29

2

Chrome and Firefox are modifying the DOM in an attempt to comply with HTML standards, as ul/ol elements can't reside within a p node.

p cannot contain block-level elements (div, ul, ol), only inline elements (span).

edited May 23 '17 at 12:29

Community

answered Jun 27 '14 at 14:39

esqew

2 Answers2