web-dev-qa-db-fra.com

Pas d'élément p dans la portée mais une balise de fin p vue.Validation w3c

Mon HTML est comme ci-dessous. J'ai ouvert tous les éléments et les ai fermés. Toujours quand je le vérifie sur w3c, il montre une erreur. Je ne peux pas comprendre.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>

    <body>
        <p>
            <div class="inr_content clearfix">
                 <div class="col2 first fl">
                      to provide a drive-in services.
                 </div>
                 <div class="col2 last fr">
                      to provide a drive-in services.
                 </div>
            </div>
        </p>
    </body>
</html>
htmlw3c-validationhtml-validation
42
Sam IR

En effet, vous imbriquez un élément de niveau bloc dans la balise p qui n'est pas valide. Vous ne pouvez imbriquer que des éléments en ligne tels que span, a et img dans la balise p. Donc, votre balisage n'est pas valide, pensez à faire quelque chose comme

<div class="inr_content clearfix">
   <div class="col2 first fl">
      <p>to provide a drive-in services.</p>
   </div>
   <div class="col2 last fr">
      <p>to provide a drive-in services.</p>
   </div>
</div>

Depuis le W3C[1] :

L'élément P représente un paragraphe. Il ne peut pas contenir d'éléments de niveau bloc (y compris P lui-même).

1 - Référence

50
Mr. Alien

Étant donné que la syntaxe de l'élément p ne permet pas un enfant div et la balise de fin </p> peut être omis, le validateur (et un navigateur) implique </p> lorsqu'il rencontre un <div> tag lors de l'analyse d'un élément p. Autrement dit, lorsque p est analysé (ou "est ouvert"), la balise de début d'un élément div le ferme implicitement, comme si le balisage avait:

<body>
    <p>
        </p><div class="inr_content clearfix">
             <div class="col2 first fl">

Cela signifie qu'il y a un élément p avec seulement des espaces dedans. Le </p> la balise qui apparaît plus tard n'a donc pas de balise de début correspondante et est signalée comme non valide. Les navigateurs ignorent ces balises de fin sans-abri, mais les validateurs doivent les signaler.

La modification minimale consiste à supprimer le </p> tag. Que cela soit suffisant dépend de ce que vous voulez. Suppression du <p> tag supprimerait également l'élément p, ce qui affecterait le rendu. Même si l'élément p n'a pas de contenu rendu (la hauteur du contenu est 0), il a des marges supérieure et inférieure par défaut, créant éventuellement un espace vertical vide.

Si vous ne voulez pas un tel espace, supprimez simplement le <p> tag (avec </p> bien sûr). Si vous voulez de l'espace, il est généralement préférable de supprimer la balise, mais vous devez également définir, en CSS, un margin-top valeur sur l'élément div de niveau supérieur.

Même si les éléments p contenant uniquement des espaces sont autorisés en HTML5, ils ne sont pas recommandés. Cela fait partie de la recommandation générale relative aux soi-disant contenu palpable : "les éléments dont le modèle de contenu autorise tout contenu de flux ou de phrasé doivent avoir au moins un nœud dans leur contenu qui est un contenu palpable". Et le texte est généralement un contenu palpable, mais pas s'il se compose uniquement d'espaces.

2
Jukka K. Korpela

Vous ne pouvez pas sémantiquement mettre un div à l'intérieur d'un <p> tag.

0
probablyup