HTML-теги «контейнера» - правильное использование?

Question

В течение некоторого времени я делал сайты, но никогда не видел обсуждения правильного использования тегов контейнера. Я видел любое количество различных типов контента в тегах коллекции, но обычно кажется, что создатель страницы просто выбирает стиль, который им нравится, и придерживается его.

Основное несоответствие в моем представлении заключается в том, что между

<p>
<div>

но я бы тоже хотел узнать мнение относительно

<span>

и любые другие, которые я могу забыть.

Answer 1

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

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

Однако, если нет дополнительного описания этих элементов, не имеет смысла помещать их в абзац просто как удобный контейнер; div было бы более уместным. В целом, абзац должен содержать один абзац текста и любые непосредственно связанные или описанные элементы. Ничто другое не имеет особого смысла в абзаце.

---

ОБНОВЛЕНИЕ : HTML5 также добавляет ряд других семантических «контейнерных» элементов, включая article, nav, header, section и aside.

Answer 2

Я думаю, значение тегов примерно такое:

<p>Paragraph, usually just text</p>

<div>A block, containing anything</div>

<span>Just a simple non-blocking wrapper</span>

Answer 3

Разница между этими тремя (и многими другими) тегами заключается в их семантическом значении. Стандарт HTML включает как теги с определенным семантическим значением (<p> для абзацев, <em> для выделенного текста и т. Д.), Так и теги без семантического значения.

К последним относятся <div> и <span>, которые используются для идентификации содержимого блочного или встроенного уровня, которое необходимо идентифицировать (используя, скажем, атрибут class= или id=), но для которого семантически-специфический тег не существует. Например, можно написать <p>Hi, my name is <span class="name">John Doe</span>.</p> - что означает, что это абзац (который браузер уже имеет представление о том, как его обрабатывать) и что часть его содержимого является именем (что означает абсолютно ничто для браузера если только CSS или JavaScript его не используют).

Следовательно, эти теги невероятно полезны как для добавления дополнительной информации в HTML-документ, который не вписывается в семантические теги, предоставляемые стандартом (см. спецификация hCard для отличный пример) и для применения визуальной (CSS) или функциональной (JavaScript) структуры к документу без изменения его семантики.

Answer 4

<p> - это элемент уровня блока, который должен содержать абзац, состоящий из текста, встроенных элементов, которые изменяют этот текст (<p>, <a>, <abbr> и т. Д.) И изображений.

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

<span> ... ну, честно говоря, я не часто использую этот тег. Это встроенный элемент, и я использую его обычно, когда я хочу применить стили к части текста, для которой было бы неэффективно использовать что-то с большим значением, например теги <strong> и <em>.

Answer 5

Я думаю, что создатели страниц должны использовать семантическую разметку, что означает, что разметка, которую они создают, должна передавать смысл (а не представление). <div> и <p> имеют разные значения. Первый используется для определения раздела (или раздела) HTML-страницы, второй - для определения абзаца текста.

Answer 6

Меня заставили рассматривать <span> и <div> как "тофу веб-разработки", так как он не имеет реального аромата, но вы можете сделать с ним практически все.

(X) HTML-теги определяют, какой текст они окружают. Это и адрес, это ссылка, это абзац и так далее ...

<div> и <span> - это просто способы добраться до частей вашего сайта, к которым вы обычно не можете добраться. Например, когда вы пытаетесь изменить размер | условное обозначение. Самым быстрым способом, который я когда-либо нашел, было обвести его, дать ему класс и затем реализовать CSS.

Это то, для чего они хороши, по моему мнению. Мне было бы интересно услышать больше или даже исправления о том, что я здесь написал.

Answer 7

Похоже, вам нужно прочитать HTML спецификацию

Элемент p :

Элемент p представляет абзац.

Элемент div :

Элемент div не имеет никакого особого значения вообще. Он представляет своих детей. Его можно использовать с атрибутами class, lang и title для разметки семантики, общей для группы последовательных элементов.

Элемент span :

Элемент span ничего не значит сам по себе, но может быть полезен при использовании вместе с глобальными атрибутами, например, class, lang или dir. Он представляет своих детей.

Основное различие между div и span заключается в том, что диапазон составляет flow content, phrasing content и palpable content, в то время как деление только flow content и palpable content.

По сути это сводится к:

div элементы являются элементами уровня блока и обычно могут быть размещены только внутри других элементов уровня блока, тогда как элементы span являются встроенными элементами и могут быть размещены внутри большинства других элементов.

Спецификация HTML определяет, какие элементы допустимы в качестве потомков каждого элемента .