Jaka jest różnica między <p> a <div>?

Jaka jest różnica między <p> a <div>?

Czy można ich używać zamiennie? Jakie są aplikacje?

Poprzedni kod był

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

Więc muszę to zmienić na

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

To była łatwa naprawa. A CSS dla powyższego kodu to

.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;
}

Tag div może zawierać inne elementy. P nie powinien być do tego zmuszany.

Mają różnicę semantyczną - <div>element służy do opisywania kontenera danych, podczas gdy <p>element służy do opisywania akapitu treści.

Semantyka robi różnicę. HTML to język znaczników, co oznacza, że ​​został zaprojektowany do „oznaczania” treści w sposób znaczący dla konsumenta znaczników. Większość programistów uważa, że ​​semantyka dokumentu to domyślne style i rendering, które przeglądarki stosują do tych elementów, ale tak nie jest.

Elementy, które wybierzesz do oznaczenia treści, powinny ją opisać . Nie oznaczaj dokumentu na podstawie tego, jak powinien wyglądać - zaznacz go na podstawie tego, co to jest.

Jeśli potrzebujesz ogólny pojemnik wyłącznie do celów układunastępnie użyj <div>. Jeśli potrzebujesz elementu do opisania akapitu treści, użyj <p>.

Uwaga: Ważne jest, aby zrozumieć, że zarówno <div>i <p>są elementy blokowe co oznacza, że większość przeglądarek będzie traktować je w podobny sposób.

Wszystkie dobre odpowiedzi, ale jest jedna różnica, o której jeszcze nie wspomniałem, i tak domyślnie renderują je przeglądarki. Główne przeglądarki internetowe wyświetlają <p>znacznik z marginesem powyżej i poniżej akapitu. <div>Tag będą świadczone bez marginesu w ogóle.

<p> wskazuje akapit i ma znaczenie semantyczne.

<div> jest po prostu blokowym kontenerem na inne treści.

Wszystko, co może pójść za jednym razem, <p>może pójść za <div>drugim, ale nie jest to prawdą. <div>tagi mogą mieć elementy blokowe jako dzieci. <p>elementy nie mogą.

Rzuć okiem na DTD HTML .

<!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 -->

Jedyną różnicą między tymi dwoma elementami jest semantyka. Oba elementy domyślnie mają wyświetlaną regułę CSS: blok (stąd poziom bloków) zastosowany do nich; nic więcej (z wyjątkiem dodatkowego marginesu w niektórych przypadkach). Jednak, jak wspomniano powyżej, oba różnią się znacznie pod względem semantyki.

The <p>Elementem, jak sama nazwa nieco wskazuje, jest dla ust. A zatem,<p> powinien być używany, gdy chcesz tworzyć bloki tekstu akapitowego.

The <div>Elementem ma jednak niewiele wspólnego ma sensu semantycznie i dlatego może być stosowany jako ogólny elementu block-level - najczęściej ludzie używają go w układach, ponieważ nie ma sensu semantycznie i mogą być wykorzystane do ogólnie cokolwiek można wymagać blokowych element poziomu dla.

Link po więcej szczegółów

DIV to ogólny kontener na poziomie bloku, który może zawierać dowolny inny blok lub element wbudowany, w tym inne elementy DIV, natomiast P ma zawijać akapity (tekst).

Lepiej byłoby zobaczyć standard zaprojektowany przez W3.org. Oto adres: http://www.w3.org/

Znacznik „DIV” może zawijać znacznik „P”, natomiast znacznik „P” nie może zawijać znacznika „DIV” - jak dotąd znam tę różnicę. Może być więcej innych różnic.

Pomyśl o tym DIVjako o elementach grupujących. Umieszczasz elementy w elemencie DIV, abyś mógł ustawić ich wyrównanie

Podczas gdy "p"jest po prostu stworzyć nowy akapit.

<p> reprezentuje akapit, a <div> reprezentuje „podział”, przypuszczam, że główna różnica polega na tym, że div są semantycznie „bez znaczenia”, gdzie jako <p> ma reprezentować coś związanego z samym tekstem.

Nie chciałbyś na przykład zagnieżdżać <p>, ponieważ nie miałoby to większego sensu semantycznego (z wyjątkiem cytatów), podczas gdy ludzie używają zagnieżdżonych <div> dla układu strony.

Według Wikipedii

W HTML elementy span i div są używane tam, gdzie części dokumentu nie można opisać semantycznie innymi elementami HTML.

pZnacznik jest do ust, powszechnie stosowanych dla tekstu. divZnacznik jest do rozdzielenia, i na ogół stosuje się do tworzenia części tekstu.

<p> jest semantycznie używany w tekście, zwykle akapity.

<div>służy do bloku lub obszaru na stronie internetowej. Na przykład można go użyć do utworzenia obszaru nagłówka.

Mogą one prawdopodobnie być stosowane zamiennie, ale nie należy.