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

Question

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

Основное расхождение в моем уме, что между

<p> 
<div> 

, но я также хотел бы мнения относительно

<span> 

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

Answer 1

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

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

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

---

UPDATE: HTML5 также добавляет ряд других смысловых элементов "контейнер", в том числе article, nav, header, section и aside.

Answer 2

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

Answer 3

Я думаю, смысл тегов есть что-то вроде этого:

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

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

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

Answer 4

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

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

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

Answer 5

Мне было трудно смотреть <span> и <div> как «тофу webdeveloppement», так как он не имеет настоящего аромата, но вы можете делать с ним что угодно.

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

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

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

Answer 6

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

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

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

Answer 7

Это звучит, как вам нужно прочитать HTML specification

The p element:

p элемент представляет собой пункт.

The div element:

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

The span element:

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

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

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

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

The HTML spec defines which elements are acceptable as descendents of each element.