<P> closing before the </P> tag

Asked

Viewed 106 times

2

I have the following code to generate an Owl Carousel inside a div of the site I am developing, but when I see the html tag <p> closes before the div of Carousel, leaving the layout totally wrong. Below is the code that is present in php: 

<p class="htlfndr-hotel-thumbnail">
    <div class="owl-carousel-search owl-theme htlfndr-hotel-thumbnail">
        <div class="item">
            <a href="#" data-toggle="modal" data-target="#imgModal" onclick="atualizaModal(\'thumb.php?src='.$strUrlSistema . $arrItemQuartoDisponivel['imagem'].'\');" >
              <img src="thumb.php?src=' . $strUrlSistema . $arrItemQuartoDisponivel['imagem'] . '&x=260&y=155&q=100&fill=false" alt="pic" />
            </a>
        </div>
        <div class="item">
            <img src="thumb.php?src=' . $strUrlSistema . $arrItemQuartoDisponivel['imagem'] . '&x=260&y=155&q=100&fill=false" alt="pic" />
        </div>
     </div>
</p>

And below is the code as shown on the web(Code seen by inspect element):inserir a descrição da imagem aqui

The tag <p> previously was a <a href> and I replaced it because I thought that what caused the error was that there was a similar tag and it was inside, but after its replacement the tag closing error before continued, someone would have some idea of what might be?

php html

  • Guy I don’t know how to answer you, but try deleting line by line and go testing, there will come a time when you will delete a line (keeping the html structure) that the error will disappear there you will know where the error is and you can find the solution. The one must be in these crazy stop q vc arranged ai cm php, must be some string error something like.

1 answer

5


The tag <p> does not allow <div> inside. As reported by W3C in this documentation:

The P element represents a paragraph. It cannot contain block-level Elements (including P itself).

The P element represents a paragraph. It cannot contain elements block-level (including the P itself).

To div is considered an element block-level (according to this documentation, also from W3C).

When you insert a div in one element p, the p is closed when the div opens, and the browser adds another <p></p> after. Example:

This code:

<p>
    <div>
       texto texto texto
    </div>
</p>

Will result in this:

<p>
</p>
<div>
    texto texto texto
</div>
<p>
</p>

To solve this, instead of <p>, use the tag itself div:

<div class="htlfndr-hotel-thumbnail">
    <div class="owl-carousel-search owl-theme htlfndr-hotel-thumbnail">
        <div class="item">
            <a href="#" data-toggle="modal" data-target="#imgModal" onclick="atualizaModal(\'thumb.php?src='.$strUrlSistema . $arrItemQuartoDisponivel['imagem'].'\');" >
              <img src="thumb.php?src=' . $strUrlSistema . $arrItemQuartoDisponivel['imagem'] . '&x=260&y=155&q=100&fill=false" alt="pic" />
            </a>
        </div>
        <div class="item">
            <img src="thumb.php?src=' . $strUrlSistema . $arrItemQuartoDisponivel['imagem'] . '&x=260&y=155&q=100&fill=false" alt="pic" />
        </div>
     </div>
</div>

Browser other questions tagged php html

You are not signed in. Login or sign up in order to post.