Нет элемента p в области видимости, но p end tag seen.w3c validation

Мой 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>

Ответы

Ответ 1

Это потому, что вы вложен элемент уровня блока внутри тега 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 - Ссылка

Ответ 2

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

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

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

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

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

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

Ответ 3

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