P closing before the / P tag

2

I have the following code to generate an owl carousel inside a div of the site I'm developing, but I'll see in the html the <p> tag closes before the carousel div, 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):

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

    
asked by anonymous 01.01.2018 / 18:04

1 answer

5

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

  

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

     

The element P represents a paragraph. Can not contain elements    block-level (including P itself).

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

When you insert a div into a p element, p is closed when div is opened, and the browser still adds another <p></p> after. Example:

This code:

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

It will result in this:

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

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

<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>
    
01.01.2018 / 19:27