Яка різниця між <p> і <div>?

Яка різниця між <p> і <div>?

Чи можна їх взаємозамінно використовувати? Які програми?

Попередній код був

<p class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></p>

Тож я маю це змінити

<div class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></div>

Це було легко виправити. І CSS для наведеного вище коду є

.item {
    position: relative;
    border: 1px solid green;
    height: 30px;
}

.item .name {
    position: absolute;
    top: 0px;
    left: 0px;
}

.item .price {
    position: absolute;
    right: 0px;
    bottom: 0px;
}

Так тег div може містити й інші елементи. П не варто змушувати це робити.

Вони мають смислову різницю - <div>елемент призначений для опису контейнера даних, тоді як <p>елемент призначений для опису абзацу змісту.

Семантика має все значення. HTML - це мова розмітки, що означає, що вона створена для "розмітки" вмісту таким чином, що має значення для споживача розмітки. Більшість розробників вважають, що семантика документа - це стилі за замовчуванням і візуалізація, яку браузери застосовують до цих елементів, але це не так.

Елементи, які ви вибрали для позначення вмісту, повинні описувати вміст. Не розмічайте документ на основі того, як він повинен виглядати, - позначайте його на основі того, що він є.

Якщо вам потрібен універсальний контейнер суто для цілей компонуваннятоді використовуйте a <div>. Якщо вам потрібен елемент для опису змісту, використовуйте a <p>.

Примітка: Важливо розуміти, що обидва є елементами на рівні блоку,<div> а <p>це означає, що більшість браузерів буде ставитися до них аналогічно.

Усі добрі відповіді, але є одна різниця, яку я ще не бачив, і саме тому браузери за замовчуванням надають їх. Основні веб-браузери візуалізують <p>тег із полем над абзацом та під ним. <div>Тег буде надаватися без країв взагалі.

<p> вказує абзац і має смислове значення.

<div> просто блоковий контейнер для іншого вмісту.

Все, що може входити в банк, <p>може йти в, <div>але зворотне не відповідає дійсності. <div>Теги можуть мати елементи рівня блоку як дочірні. <p>елементи не можуть.

Погляньте на HTML DTD .

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

<!ENTITY % flow "%block; | %inline;">

<!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->
<!ELEMENT P - O (%inline;)*            -- paragraph -->

Єдина відмінність двох елементів - семантика. Обидва елементи за замовчуванням мають відображення правил CSS: блок (отже, рівень блоку), застосований до них; нічого більше (крім дещо додаткової надбавки в деяких випадках). Однак, як було сказано вище, вони обидва сильно відрізняються з точки зору семантики.

<p>Елемент, так як його ім'я декілька має на увазі, для пунктів. Таким чином, його <p>слід використовувати, коли ви хочете створити блоки тексту абзацу.

<div>Елемент, однак, має мало сенсу , семантично і , отже , може бути використаний в якості універсального елемента блочного рівня - найчастіше, люди використовують його в макетах , тому що це НЕ має сенсу , семантично і може бути використано для взагалі все , що ви , може знадобитися блок- елемент рівня для.

Посилання для більш детальної інформації

DIV - це загальний контейнер рівня блоку, який може містити будь-який інший блок або вбудовані елементи, включаючи інші елементи DIV, тоді як P - для обгортання абзаців (тексту).

Можливо, краще побачити стандарт, розроблений W3.org. Ось адреса: http://www.w3.org/

Тег "DIV" може обертати тег "P", тоді як тег "P" не може містити тег "DIV" - поки я знаю цю різницю. Можуть бути й інші відмінності.

Розглядайте DIVяк елемент групування. Ви поміщаєте елементи в елемент DIV, щоб ви могли встановити їх вирівнювання

Тоді "p"як просто створити новий абзац.

<p> являє абзац, а <div> являє собою "поділ", я вважаю, що головна відмінність полягає в тому, що діви семантично "безглузді", де, як <p>, слід представляти щось, що стосується самого тексту.

Не хотілося б, наприклад, вкладати <p> s, оскільки це не мало б особливого смислового сенсу (крім сенсу цитат). В той час як люди використовують вкладені <div> s для макета сторінки.

За даними Вікіпедії

У HTML елементи span та div використовуються там, де частини документа не можуть бути семантично описані іншими елементами HTML.

pТег для абзацу, як правило , використовується для тексту. divТег для поділу, і зазвичай використовується для створення розділів тексту.

<p> семантично використовується для тексту, абзаців зазвичай.

<div>використовується для блоку або області на веб-сторінці. Наприклад, його можна використовувати для створення області заголовка.

Вони, ймовірно, можуть використовуватися взаємозамінно, але ви не повинні.