not being recognized by IE F12 developer tool

Question

i have run my web site using F12 Developer Tools on IE, and i check the console for error. and the console mentioned Unmatched end tag for the last </p> . although this

has a starting tag <p id="uppersearch">, as follow:

Home.aspx, line 447 character 1

<p id="currentdate"></p>
<p id="currenttime" ></p>
<p id="uppersearch">
    <div id="DeltaPlaceHolderSearchArea" class="ms-mpSearchBox ms-floatRight">
        <div id="searchInputBox">
            <div class="ms-webpart-chrome ms-webpart-chrome-fullWidth ">
                <div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPartWPQ1" width="100%" class="ms-WPBody noindex " OnlyForMePart="true" allowDelete="false" style="" >
                    <div componentid="ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr" id="ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr">
                        <div id="SearchBox" name="Control">
                            <div class="ms-srch-sb ms-srch-sb-border" id="ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_sboxdiv">
                                <input type="text" value="Search this site" maxlength="2048" accessKey="S" title="Search this site" id="ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_sbox" autocomplete="off" autocorrect="off" onkeypress="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {if (Srch.U.isEnterKey(String.fromCharCode(event.keyCode))) {$find('ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr').search($get('ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_sbox').value);return Srch.U.cancelEvent(event);}})" onkeydown="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr');ctl.activateDefaultQuerySuggestionBehavior();})" onfocus="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr');ctl.hidePrompt();ctl.setBorder(true);})" onblur="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr'); if (ctl){ ctl.showPrompt(); ctl.setBorder(false);}})" class="ms-textSmall ms-srch-sb-prompt ms-helperText"/>
                                <a title="Search" class="ms-srch-sb-searchLink" id="ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_SearchLink" onclick="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {$find('ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr').search($get('ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_sbox').value);})" href="javascript: {}" >
                                    <img src="/_layouts/15/images/searchresultui.png?rev=23" class="ms-srch-sb-searchImg" id="searchImg" alt="Search" />
                                </a>
                                <div class="ms-qSuggest-container ms-shadow" id="AutoCompContainer">
                                    <div id="ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_AutoCompList"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <noscript>
                        <div id="ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_noscript">It looks like your browser does not have JavaScript enabled. Please turn on JavaScript and try again.</div>
                    </noscript>
                    <div id="ctl00_PlaceHolderSearchArea_SmallSearchInputBox1"></div>
                    <div class="ms-clear"></div>
                </div>
            </div>
        </div>
    </div>
</p>

Is it just me or should `
` be inside a `
`? Then again, this looks like Microsoft HTML. — Kermit, Sep 13 '13 at 13:36
I think it's not valide HTML : http://stackoverflow.com/questions/10763780/putting-div-inside-p-is-adding-an-extra-p — BENARD Patrick, Sep 13 '13 at 13:38
Indeed, not valid for a `p` to contain block level element like a `div`: http://stackoverflow.com/a/8696078/368406 — Brendan Bullen, Sep 13 '13 at 13:40

score 8 · Accepted Answer · edited Mar 07 '15 at 14:42

8

The end tag for a <p> is optional
A <p> cannot contain a <div>

When you open the <div> you end the <p> implicitly. Then when you try to close it with </p>, it is already closed.

edited Mar 07 '15 at 14:42

answered Sep 13 '13 at 13:40

Quentin

914,110
126
1,211
1,335

score 1 · Answer 2 · answered Sep 13 '13 at 13:42

1

According to X HTML every tag of html that is open must be close , firstly install the fire bug and check either you p tag have the content or its getting over flow? Secondly why don't you use the div instead of p ?

answered Sep 13 '13 at 13:42

geekdev786

33
1
6

i did not use Div as the content for separate Divs will be too close to each other vertically, while adding them inside
will free some space between
tags .
– John John Sep 13 '13 at 13:46
@john G well first thing is if you know that now the trend is for the X HTML and its the combination of XML and HTML rules so according to that you can not use the div as child of p . – geekdev786 Sep 13 '13 at 13:48
so what approaches i can follow to have my
reacts as a
– John John Sep 13 '13 at 13:54
@geekdev786 — The trend for XHTML is largely over. Browsers never game it much love and developers are going back to HTML. – Quentin Sep 13 '13 at 13:57
@johnG — There aren't any. divs aren't paragraphs. They mean different things. They act in different ways. Use appropriate markup. – Quentin Sep 13 '13 at 13:58
@john G - just use CSS to add margin to the divs. Then they will have space between them. – andi Sep 13 '13 at 14:14
i changed the
to be
and it worked fine. seems that the previous
will add space at the end of it.
– John John Sep 13 '13 at 14:35

not being recognized by IE F12 developer tool

2 Answers2