ОК, чтобы иметь текст в div без тега абзаца?

Я пытаюсь понять полезность тега <p>. Я хочу писать меньше HTML и всегда для упрощения вещей в целом, но чувствую, что я слышал, как кто-то упоминал это для целей SEO или ясности или чего-то еще, весь текст должен находиться в теге абзаца? Это просто похоже на еще один набор полей /padding/border/css business. Не пропустил ли я какой-нибудь инструмент для литья?

<div>
  Cheerio, worldie!
</div>

Vs:

<div>
  <p>Hello, world!</p>
</div>

Ответ 1

Да, можно использовать элемент <div> без <p>.

A <p> сообщит, что текст внутри элемента <div> разбит на параграфы, поэтому, если у вас есть текст, разделенный на параграфы, вы должны использовать <p>; с другой стороны, <p> не может содержать элементы, отличные от так называемого фразированного контента; таким образом, вы не можете иметь <div> внутри <p>.

Ответ 2

Из семантической точки зрения, вы всегда располагаете свой контент в контейнерах значения. p >

Например, вы можете создать список элементов (например, список дел), например:

<div>
  - Buy groceries<br>
  - Clean my room<br>
  - Learn HTML
</div>

Но это только выглядит как список, но с семантической точки зрения это просто текст, поскольку элементы <div> не имеют семантического значения (они предназначены только для использования для целей макета).

Собственный семантический список выглядит следующим образом:

<ul>
  <li>Buy groceries</li>
  <li>Clean my room</li>
  <li>Learn HTML</li>
</ul>

Теперь он действительно - это список.

Итак: Почему это имеет значение?

Поисковая оптимизация: Машины, просматривающие ваш контент (например, искатель индекса поиска Google), будут знать, что это список и могут соответственно реагировать. Это лучше понять при просмотре заголовков: элемент <h1> будет обрабатываться поисковыми системами с более высоким значением, чем элемент <b> (который не имеет семантического значения).
Доступность: Вспомогательное программное обеспечение (например, устройства чтения с экрана для слепых или зрячих серферов) может сказать, что это список, и пользователи могут его соответствующим образом перемещать (например, перейти от одного элемента списка к другому).

Итак, общее правило заключается в том, что вы всегда должны думать о том, какой тип контента вы хотите представить пользователю: является ли это списком (элемент <ul> или <ol>)? Это текст (один или несколько элементов <p>)? Это заголовок (элемент <h1> to <h6>)? Это позволяет всем читателям более тщательно интерпретировать ваш контент.

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