<p> ve <div> arasındaki fark nedir?

<p> ve <div> arasındaki fark nedir?

Bunlar birbirinin yerine kullanılabilir mi? Uygulamalar nelerdir?

Önceki kod

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

Bu yüzden bunu

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

Kolay düzeltme yapıldı. Ve yukarıdaki kod için 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 etiketi başka öğeler içerebilir. P bunu yapmaya zorlanmamalıdır.

Bunlar sahip semantik farkı - bir <div>eleman a ise veri bir kap tanımlamak için tasarlanmış<p> element içeriği bir paragraf açıklamak için tasarlanmıştır.

Anlambilim tüm farkı yaratır. HTML bir biçimlendirme dilidir, yani içeriği biçimlendirme tüketicisi için anlamlı bir şekilde "işaretlemek" için tasarlanmıştır. Çoğu geliştirici, belgenin anlambiliminin, tarayıcıların bu öğelere uyguladığı varsayılan stiller ve oluşturma olduğuna inanır, ancak durum böyle değildir.

İçeriğinizi işaretlemek için seçtiğiniz öğelerin içeriği tanımlaması gerekir . Belgenizi nasıl görünmesi gerektiğine göre işaretlemeyin - ne olduğuna göre işaretleyin.

Genel bir konteynere ihtiyacınız varsa tamamen yerleşim amacıylasonra a <div>. Bir içerik paragrafını tanımlamak için bir öğeye ihtiyacınız varsa a öğesini kullanın <p>.

Not: Önemli olan hem anlamak <div>ve <p>olan blok seviyesinden elemanların çoğu tarayıcının benzer şekilde onları tedavi edeceği anlamına gelir.

Tüm iyi yanıtlar, ancak henüz bahsetmediğim bir fark var ve tarayıcılar bunları varsayılan olarak bu şekilde oluşturuyor. Büyük web tarayıcıları <p>paragrafın üstünde ve altında kenar boşluğu olan bir etiket oluşturur . Bir <div>etiket hiç kenar boşluğu olmadan oluşturulacaktır.

<p> bir paragrafı belirtir ve anlamsal anlamı vardır.

<div> diğer içerikler için bir blok konteynırdır.

İçine girebilecek her şey bir <p>olabilir <div>ama tersi doğru değildir. <div>etiketlerinde alt öğe olarak alt öğe öğeleri bulunabilir. <p>öğeler olamaz.

Tae bir bakış HTML DTD'ye .

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

İki unsur arasındaki tek fark anlambilimdir. Her iki öğe de varsayılan olarak CSS kuralı görüntülemeye sahiptir: blok (dolayısıyla blok düzeyi) kendilerine uygulanır; başka bir şey yok (bazı durumlarda biraz fazladan marj hariç). Ancak, daha önce de belirtildiği gibi, ikisi de anlambilim açısından büyük ölçüde farklıdır.

<p>Adından da anlaşılacağı gibi biraz elemanı, paragraf içindir. Böylece,<p> paragraf metninin bloklarını oluşturmak istediğinizde kullanılmalıdır.

<div>O anlam anlamsız ve bir blok-gerektirebilir genellikle herhangi bir şey için kullanılabilir, çünkü en yaygın, insanlar düzenleri içinde kullanmak - eleman, ancak, hiçbir anlamsal anlam ve dolayısıyla genel bir blok seviyesinden eleman olarak kullanılabilir başka bir şey geçmedi düzey öğesi.

Daha fazla ayrıntı için bağlantı

DIV , diğer DIV elemanları dahil olmak üzere başka herhangi bir blok veya satır içi eleman içerebilen genel bir blok seviyesi konteyneriyken, P paragrafları (metin) sarmaktır.

W3.org tarafından tasarlanan standardı görmek daha iyi olabilir. İşte adresi: http://www.w3.org/

Bir "DIV" etiketi "P" etiketi sarabilirken, bir "P" etiketi "DIV" etiketi sarar olamaz-şimdiye kadar bu farkı biliyorum. Başka farklılıklar da olabilir.

DIVBir gruplama öğesi olarak düşünün . Öğeleri bir DIV öğesine koyarsınız, böylece hizalamalarını ayarlayabilirsiniz

Oysa "p"sadece yeni bir paragraf oluşturmaktır.

<p> bir paragrafı temsil eder ve <div> bir 'bölünmeyi' temsil eder, asıl fark div'lerin anlamsal olarak 'anlamsız' olması, burada bir <p> olarak metnin kendisiyle ilgili bir şeyi temsil etmesi beklenir.

Örneğin iç içe geçmiş <p> ler kullanmak istemezsiniz, çünkü bu çok anlamsal anlam ifade etmez (alıntılar hariç) İnsanlar sayfa düzeni için iç içe geçmiş <div> ler kullanırlar.

Wikipedia'ya göre

HTML'de, belgenin bölümlerinin diğer HTML öğeleri tarafından anlamsal olarak tanımlanamadığı durumlarda span ve div öğeleri kullanılır.

Bir petiketi genellikle metin için kullanılan bir paragraf içindir. Bir divetiket bölme içindir ve genellikle metin bölümleri oluşturmak için kullanılır.

<p> anlamsal olarak metin, paragraflar genellikle kullanılır.

<div>bir web sayfasındaki bir blok veya alan için kullanılır. Örneğin, bir başlık alanının oluşturulması için kullanılabilir.

Yapabilirlerdi muhtemelen birbirinin yerine kullanılabilir, ancak atlatma.