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
Чем 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 и 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.
Что ещё?
Читал старую статью на хабре, там говорилось о том, что элементы сами себя не отталкивают, это верно? Например:
When to use <span> instead <p>?
As the question indicates, if I have some text that I want to add in the HTML then when should I use <p> and when should I use <span> ?
12 Answers 12
You should keep in mind, that HTML is intended to DESCRIBE the content it contains.
So, if you wish to convey a paragraph, then do so.
Your comparison isn’t exactly right, though. The more direct comparison would be
as both are block level elements.
A <span> is inline, much like an anchor ( <a> ), <strong> , emphasis ( <em> ), etc., so bear in mind that by it’s default nature in both html and in natural writing, that a paragraph will cause a break before and after itself, like a <div> .
Sometimes, when styling things — inline things — a <span> is great to give you something to «hook» the css to, but it is otherwise an empty tag devoid of semantic or stylistic meaning.