What’s the different between <div>, <p>, and <span> ?
One question always make me confused when I use HTML to set layout…..
“How to use the appropriate HTML element ?”
Therefore, I decide to make integration for similar elements that we can review if needed.
First, you can check the element below:
<p>: block level elements
<div>: block level elements
<span>: inline elements
As described above, it can’t work if you wanna to do margin on <span>. Alternatively, you probably can transfer inline elements into block by using display:bock or display:inline-block. Generally speaking, <div> is better for dividing the content in your website, <p> is used for paragraph.
But what’s the different point between <div> and <span>?
First, div should be used to wrap sections of the document, and span should used to wrap small portions of text, image, etc. Simply, I think to use div to divide the section first (follow the structure which you design), then to use span to write your content.
Additionally, HTML classfiies the elements as flow content and phrasing content. As all phrasing content is flow content, it means phrasing element can be used in all of flow content. The phrasing elements can only contain other phrasing elements, for example, you can’t put div inside span. But most flow content can contain all type of flow content includong phrasing content.
Most means something special case exist, there’re a few exception: <p>, <pre> and <th> are examples of block elements which are non-phrasing flow content only can contain phrasing content. While both of p and div are non-phrasing flow content, the div can contain other flow content including div, but p can only contain phrasing content. It means you can’t put a div inside a p.
Finanlly, there’s somthing error happened if you put a div inside a span, even though you do adjustment like span
Семантика, разметка, наименование. Как выглядит идеальная разметка?
Есть ли какие нибудь примеры разметки близкой к эталону? От чего вы будете плеваться или как делать ни за что не нужно?
К более конкретным вопросам:
— Есть ли разница между p и span?
С точки зрения СЕО, с точки зрения восприятия и поддерживаемости?
Например, что выглядит лучше:
Как вы относитесь к классам в теге p?
Или вы бы их вообще в div завернули?)
— Как именовать классы?
Нормально ли использовать название white-section__header или white-section__header-box или может это должно выглядеть так? — white-section-header-box ? — Где-то я встречал такое оформление.
Или всё строго по БЭМ? Например: news__top, news__top-box.
А если нужно общее название для часто повторяющегося блока, должно ли оно быть максимально информативным, как например white-section__header-box?
Плохо ли использовать такие длинные названия класса или всё же допустимо?
— div, как не перебарщивать?
Например такая разметка:
Если бы я просто для form написал «display: flex«? Насколько это плохо?
— flexbox
Везде пишут — не злоупотреблять. Это до сих пор актуально? Например есть div c текстом и ссылка в блоке, нужно раскидать по краям. Так и хочется написать «justify-content: space-between«. Это плохой вариант?
— Perfect pixel
Стоит заморачиваться на начальных этапах?
Что делать, если шаблон кривой, а ты центрируешь и распределяешь ровно? — Т.е. реально не симметричное расстояние)
Что делать с текстом? — Текстовые блоки иногда не ограничены визуальными границами в шаблоне и даже если я подобрал ширину идеально, текст всё равно может вести себя немного по другому в браузере.
Есть ли какое-то допустимое расхождение? Или перфект как у перфекциониста?
При выполнение тестового задания, ругали бы за небольшое двоение?
— Когда margin, а когда padding?
Собственно какие правила? padding блоку или margin? Если не имеет значения область события или визуальное растягивание, например кнопки с фоном или рамкой.
А как бы вы отталкивали элементы один за другим вниз? Слева и справа, я полагаю, почти всегда margin? Если идут карточки с товаром или информационные блоки по несколько позиций в строке.
Поля — padding.
Что ещё?
Читал старую статью на хабре, там говорилось о том, что элементы сами себя не отталкивают, это верно? Например:
Чем span отличается от p
Ряд элементов предназначен для группировки контента на веб-странице.
Элемент div
Элемент div служит для структуризации контента на веб-странице, для заключения содержимого в отдельные блоки. Div создает блок, который по умолчанию растягивается по всей ширине браузера, а следующий после div элемент переносится на новую строку. Например:
Параграфы
Параграфы создаются с помощью тегов <p> и </p> , которые заключают некоторое содержимое. Каждый новый параграф располагается на новой строке. Применим параграфы:
Если в рамках одного параграфа нам надо перенести текст на другую строку, то мы можем воспользоваться элементом <br> :
Элемент pre
Элемент pre выводит предварительно отформатированный текст так, как он определен:
Элемент span
Элемент span обтекает некоторый текст по всей его длине и служит преимущественно для стилизации заключенного в него текстового содержимого. В отличие от блоков div или параграфов span не переносит содержимое на следующую строку:
При этом стоит отметить, что сам по себе span ничего не делает. Так, во втором параграфе span никак не повлиял на внутренне текстовое содержимое. А в первом параграфе элемент span содержит атрибут стиля: style=»color:red;» , который устанавливает для вложенного текста красный цвет фона.
При этом стоит отметить, что элементы div и p являются блочными, элемент div может содержать любые другие элементы, а элемент p — только строчные элементы. В отличие от них элемент span является строчным, то есть как бы встраивает свое содержимое во внешний контейнер — тот же div или параграф. Но при этом не следует помещать блочные элементы в строчный элемент span.
В чем разница между <p>, <div> и <span> в HTML и XHTML?
В чем разница между <p> , <div> и <span> ?
Можно ли их использовать взаимозаменяемо?
Потому что я столкнулся с проблемой, что для поля <span> не работает, но для <div> и <p> он работает.
7 ответов
p и div являются элементами уровня блока, где span является встроенным элементом и, следовательно, маржа на пробел не работает. В качестве альтернативы вы можете сделать span элемент уровня блока с помощью CSS display: block; или для span Я бы предпочел display: inline-block;
Кроме того, эти элементы имеют специфический смысловой смысл, div лучше всего ссылается на блок контента, имеющий разные вложенные элементы, p , который используется для абзацев, а span — не что иное, как пустой элемент, поэтому, сохраняя SEO в виду, вам нужно использовать правильный тег для правильной вещи, так что, например, обтекание текста внутри элемента div будет менее семантическим, чем обертывание его внутри p
A <p> должен содержать параграфы текста, a <div> — это размещение вашей страницы с помощью разделов, а <span> позволяет разметку разметки немного отличаться, например, в пределах <p>
Вот как они должны использоваться семантически, их стиль, однако использование CSS зависит от вас.
Как и другие ответили. div и p являются «блочными элементами» (теперь переопределены как Flow Content) и span являются «встроенным элементом» (Разъяснение содержимого). Да, вы можете изменить представление этих элементов по умолчанию, но есть разница между «потоком» и «блоком» и «фразировкой» по сравнению с «встроенным».
Элемент, классифицированный как поток, может использоваться только там, где ожидается текущее содержимое потока, и элемент, классифицированный как фразинг-контент, может использоваться там, где ожидается выражение фразирования. Так как все словосочетание представляет собой содержимое потока, фрикционный элемент также может использоваться в любом поточном содержимом. Спецификации предоставляют более подробную информацию.
Все фразировочные элементы, такие как strong и em , могут содержать только другие элементы фразирования: например, вы можете поставить table внутри cite . Большинство потоков данных, таких как div и li , могут содержать все типы содержимого потока (а также содержание фраз), но есть несколько исключений: p , pre и th являются примерами не- -фазное содержимое потока ( «элементы блока» ), которое может содержать только фраз-контент ( «встроенные элементы» ). И, конечно же, существуют нормальные ограничения элементов, такие как dl и table , только позволяющие содержать определенные элементы.
Хотя div и p являются нефрагментированным содержимым потока, div может содержать другие дочерние потоки потока (в том числе больше div и p s). С другой стороны, p может содержать только содержание содержимого содержимого. Это означает, что вы не можете поставить div внутри p , хотя оба являются нефрагментированными элементами потока.
Теперь вот кикер. Эти семантические спецификации не связаны с тем, как элемент отображается. Таким образом, если у вас есть div внутри span , вы получите ошибку проверки, даже если в вашем CSS есть span
Как веб-разработчик, я не могу не чувствовать, что все эти рекомендации невероятно вводят в заблуждение в 2015 году.
Конечно, тег «p» был в какой-то момент предназначен для использования абзаца. но в 100% моих приложений, дизайнов и просто повседневной общей разработки мы ничего не видели, кроме ограничений, налагаемых тег «p» . он не предлагает никакой пользы в сегодняшнем Интернете.
Я бы сказал «да», «p» — описательный элемент, и по этой причине, если все это произошло; «описать что-нибудь», я буду всем для этого. но он НЕ просто описывает контент, он прямо подставляет ALTERS контент, который, будучи уже ограниченным само по себе, не все, что он делает, он также ОГРАНИЧИВАЕТ контент. Почему кто-то в здравом уме целенаправленно охватывает предельный строительный блок, когда дело доходит до веб-разработки, находится вне меня. С точки зрения дизайна это не имеет смысла. С структурной точки зрения это не имеет смысла. Из любого из DOM-манипуляций PERIOD это не имеет смысла.
Мы все вместе перестали использовать тег «p» , за исключением тех случаев, когда мы абсолютно вынуждены (например, клиентские словарные пресса, такие глупые вещи). Нет никакого оправдания, почему мы не можем описать почти все с хорошо названными классами и идентификаторами, поэтому мы видим нулевую причину, чтобы склониться перед «стандартами», которые не приносят никакой пользы, и на самом деле СЧИТАЮТ каждый кусочек головоломки, Тег «p» не помогает разработчику, конечному пользователю или современным поисковым системам. В двух словах. «p» тег почти не рекомендуется в даже отдаленно сложных реализациях (и с очень веской причиной), не позволяйте комментариям этих стандартных нацистских элементов управления отображать ваш контент!
Даже на этом самом сайте, ориентированном на разработчиков на нем, у ОЧЕНЬ ТОП его собственной страницы есть небольшая поп-часть, которая могла бы использовать тег «p» , поскольку он содержит достаточно текста для запуска ко второй строке, но полностью захвачен в DIV (и только div, а не div → p) для почти бесконечного числа причин. прежде всего, что сегодня «p» SUCKS по сравнению с любым хорошо описанным блоком созданный из DIV, который так же хорошо описывается (moreso. я говорю) как абзац «p» с очень описательным .
И да, я ценю наши нынешние веб-стандарты, и такие вещи, как все еще, имеют место, даже предлагая возможности делать что-то с некоторыми современными браузерами, которых вы не можете выполнить с помощью контейнера, но это только то, что это, в частности, сломанный элемент «p» , как часть реструктурированного и модернизированного HTML. должен был быть оставлен в могиле, где он принадлежит. это поколение веб-сайтов, где абзацы уже не абзацы навсегда. блоки буквально меняются. он просто устарел и непрактичен.