Является ли тег <div>когда-либо нежелательной альтернативой тегу <p>? - PullRequest
16 голосов
/ 25 мая 2009

Я вижу, что тег <p> часто использовался в чужом коде, но никогда не использовал его в своей работе.

Мне интересно, какое преимущество это дает по сравнению с использованием тега <div>?

  1. Могу ли я получить какие-либо преимущества? от включения тега <p> на мои страницы?

  2. Есть ли недостаток только в используя <div> теги без <p>?

Ответы [ 7 ]

29 голосов
/ 25 мая 2009

DIV обозначает отдельный раздел на странице, который семантически не связан с остальными. С помощью P-тегов вы указываете, что этот фрагмент текста разбит на абзацы, но он все еще остается единым целым.

ДОБАВЛЕНО: с помощью "семантики" люди обычно ссылаются на возможность извлекать из HTML информацию о том, что представляют различные элементы страницы и как они связаны друг с другом, а не рассматривать весь HTML как просто разметку для быть оказанным. Например, когда вы делаете меню, рекомендуется использовать для этой цели UL (неупорядоченный список), поскольку из разметки можно будет узнать, что все LI (элементы списка), содержащиеся в определенном списке, вероятно, означают варианты выбора тот же уровень. Я знаю, что для программ чтения с экрана для людей с ограниченными возможностями полезно попытаться сделать свою разметку максимально семантической.

Если вас это не касается, то для визуализированного результата практически не имеет значения, используете ли вы DIVs или Ps. Вы можете стилизовать оба стиля с помощью CSS, чтобы добиться одинакового внешнего вида.

Семантический HTML все еще не является "абсолютным благом", к которому нужно стремиться. Для многих семантика не добавляет никакой ценности, поскольку они хотят, чтобы их страницы отображались правильно. Вот почему бесконечные дискуссии о том, использовать ли таблицы для разметки (и добавлять семантику там, где она не принадлежит) или придерживаться CSS, скоро не закончатся.

11 голосов
/ 25 мая 2009

p означает «параграф», div означает «разделение». Это так сложно, как это возможно. Это способ сообщить поисковым системам, скребкам, инструментам и т. Д., Что это абзац текста.

div нежелателен, когда вы на самом деле помечаете «абзац» текста.

5 голосов
/ 25 мая 2009

Оба тега имеют различное назначение.

  • p обозначает абзац, обычно для организация контента (текст и изображения, в основном)
  • div с другой стороны, прямоугольное пространство на холсте, обычно для макета.

Пример. Вы бы поместили панель навигации в элемент div, упрощая ее перемещение слева направо на странице или переключаясь на макет с тремя столбцами. Различные разделы в вашей навигации (сначала общая навигация по сайту, следующие конкретные горячие ссылки на самую последнюю запись в блоге или что-то еще) можно разделить, поместив их в разные абзацы.

(Я знаю, плохой пример, потому что навигация лучше представлена ​​неупорядоченными списками, но что за хей).

В прямом ответе на ваш вопрос они дают вам преимущество, заключающееся в том, что вы разграничиваете организацию вашего макета и организацию вашего контента таким образом, который становится понятным в источнике HTML.

4 голосов
/ 25 мая 2009

Если вы помечаете контент, чтобы вы могли выложить его с помощью CSS, вы, вероятно, захотите <div>; <p> должен использоваться для обозначения абзаца текста и все.

3 голосов
/ 26 мая 2009

Могу ли я получить какие-либо преимущества от включения тега

в мой страницы?

Да, при условии, что вы используете его правильно - потому что использование семантического HTML всегда полезно.

Существует ряд причин, почему это так, но основной причиной для людей, которым нужно быстрое объяснение, является SEO. Поисковые системы будут лучше понимать вашу страницу, если вы используете семантический HTML.

3 голосов
/ 25 мая 2009

Помимо его семантики (что важно), вы также захотите рассмотреть проблемы валидации. Согласно спецификации HTML4, вам не разрешено вложить другие элементы уровня блока (<div>, <ul>, другие <p> и т. Д.) В <p> без аннулирования вашего HTML.

Я видел несколько случаев, когда парсеры выбирают преждевременное закрытие <p>, чтобы разрешить запуск другого вложенного блока.

1 голос
/ 24 августа 2010

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

Лучше использовать div, если вы хотите иметь больший контроль над контентом на своей странице с программной точки зрения. Придерживаясь div для всех задач макета, вы также сможете использовать p-теги исключительно для абзацев.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...