Нет элемента p в области видимости, но тег p end.проверка w3c

мой HTML, как показано ниже. Я открыл все элементы и закрыл их. Тем не менее, когда я проверяю его на w3c, он показывает ошибку. Я не могу понять. 

<!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>
38
html html-validation w3c-validation

3 ответов

это потому, что вы вкладываете элемент уровня блока внутри p недопустимый тег. Вы можете только вложить встроенные элементы, такие как span, a и img внутри p тег. Таким образом, ваша разметка недействительна, подумайте о создании чего-то вроде

<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>

от W3C[1] :

элемент P представляет собой абзац. Он не может содержать уровень блока элементы (включая сам P).

1 - ссылка

44

так как синтаксис p элемент не дает div child и конечный тег </p> может быть опущено, валидатор (и браузер) подразумевает </p> когда он встречает <div> тега при разборе p элемент. То есть, когда p анализируется (или "открыт"), начальный тег div элемент неявно закрывает его, как если бы разметка была:

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

это означает, что есть p элемент с пробелом в нем. Этот </p> тег, который появляется позже, таким образом, не имеет соответствующего тега запуска, и сообщается как недопустимый. Браузеры игнорируют такие теги бездомных, но валидаторы должны сообщать о них.

Минимальное изменение-удалить </p> - тег. Является ли это адекватным, зависит от того, что вы хотите. Удаление <p> тег также удалит p element, и это повлияет на рендеринг. Хотя p элемент не имеет содержимого (высота содержимого равна 0), он имеет верхнюю часть по умолчанию и нижний край, возможно создание некоторого пустого вертикального пространства.

если вы не хотите такого пространства, просто удалите <p> tag (вместе с </p> конечно). Если вам нужно немного места, обычно все равно лучше удалить тег, но тогда вы дополнительно установите в CSS некоторые подходящие margin-top значение на верхнем уровне div элемент.

хотя p элементы, содержащие только пробелы, разрешены в HTML5, они не рекомендуются. Это часть общая рекомендация, связанная с так называемым пальпируется контент: "элементы, модель содержимого которых допускает любое содержимое потока или содержание фраз, должны иметь по крайней мере один узел в своем содержимом, который является осязаемым содержимым". И текст, как правило, осязаемый контент, но не если он состоит только из пробелов.

2

вы не можете семантически поместить div внутри <p> тег.

0