<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 태그에는 다른 요소가 포함될 수 있습니다. P는 그렇게하도록 강요해서는 안된다.

그들은이 의미 론적 차이 - <div>소자는 반면, 데이터의 컨테이너를 묘사하도록 설계 <p>요소는 콘텐츠의 단락을 설명하기 위해 설계된다.

시맨틱은 모든 차이를 만듭니다. HTML은 마크 업 언어로, 마크 업 소비자에게 의미있는 방식으로 컨텐츠를 "마크 업"하도록 설계되었습니다. 대부분의 개발자는 문서의 의미가 기본 스타일이며 브라우저가 이러한 요소에 적용되는 렌더링이라고 생각하지만 그렇지 않습니다.

컨텐츠를 마크 업하도록 선택한 요소는 컨텐츠를 설명 해야합니다. 어떻게 보이는지에 따라 문서를 표시하지 마십시오. 문서를 기반으로 표시하십시오.

일반 컨테이너가 필요한 경우 순전히 레이아웃 목적그런 다음을 사용하십시오 <div>. 콘텐츠 단락을 설명하는 요소가 필요한 경우을 사용하십시오 <p>.

참고 : 그것은 중요 둘 것을 이해 <div>하고 <p>있는 블록 수준 요소 대부분의 브라우저가 비슷한 방식으로 그들을 치료하는 것을 의미는.

모든 좋은 대답이지만 아직 언급하지 않은 한 가지 차이점이 있습니다. 이것이 브라우저가 기본적으로 렌더링하는 방식입니다. 주요 웹 브라우저는 <p>단락 위와 아래에 여백이 있는 태그를 렌더링합니다 . <div>태그는 전혀 어떤 여백없이 렌더링됩니다.

<p> 단락을 나타내며 의미 적 의미가 있습니다.

<div> 단순히 다른 컨텐츠를위한 블록 컨테이너입니다.

안으로 들어갈 수있는 것은 <p>들어갈 수 <div>있지만 그 반대는 사실이 아닙니다. <div>태그는 블록 레벨 요소를 자식으로 가질 수 있습니다.<p>요소는 할 수 없습니다.

Tae 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 규칙을 표시합니다. block (따라서 블록 수준)이 적용됩니다. 더 이상은 없습니다 (일부 경우 약간의 추가 마진 제외). 그러나, 전술 한 바와 같이, 이들은 시맨틱 측면에서 크게 상이하다.

그만큼 <p>그 이름이 어느 정도 알 수 있듯이 요소는, 단락입니다. 그러므로,<p> 단락 텍스트 블록을 만들 때 사용해야합니다.

<div>이 의미 론적으로 의미가 그리고 당신은 블록 - 필요할 수 있습니다 일반적으로 아무것도 사용할 수 있기 때문에 가장 일반적으로 사람들은 레이아웃 내에서 사용 - 요소는, 그러나, 의미 론적 의미하기 때문에 일반적인 블록 레벨 요소로 사용할 수있는 거의있다 에 대한 레벨 요소.

자세한 내용을 보려면 링크

DIV 는 다른 DIV 요소를 포함하여 다른 블록이나 인라인 요소를 포함 할 수있는 일반 블록 수준 컨테이너이며 P 는 단락 (텍스트)을 래핑하는 것입니다.

W3.org에서 디자인 한 표준을 보는 것이 좋습니다. 주소는 다음과 같습니다. http://www.w3.org/

"DIV"태그는 "P"태그를 래핑 할 수 있지만 "P"태그는 "DIV"태그를 래핑 할 수 없습니다. 지금까지이 차이를 알고 있습니다. 다른 차이점이 더있을 수 있습니다.

DIV그룹화 요소로 생각하십시오 . 정렬을 설정할 수 있도록 DIV 요소에 요소를 넣습니다.

반면 "p"단순히 새로운 단락을 만드는 것입니다.

<p>는 단락을 나타내고 <div>는 '나눗셈'을 나타냅니다. 주된 차이점은 div가 의미 적으로 '의미가 없다'고 가정합니다. 여기서 <p>는 텍스트 자체와 관련된 것을 나타냅니다.

예를 들어 중첩 된 <p>를 원하지는 않을 것입니다. 왜냐하면 사람들은 페이지 의미를 위해 중첩 된 <div>를 사용하는 반면 따옴표 의미를 제외하고는 의미 론적 의미가별로 없기 때문입니다.

Wikipedia 에 따르면

HTML에서 span 및 div 요소는 문서의 일부를 다른 HTML 요소로 의미 론적으로 설명 할 수없는 경우에 사용됩니다.

p태그는 일반적으로 텍스트에 사용되는 단락입니다. div태그는 분할을위한 것이며, 일반적으로 텍스트 섹션을 만들기 위해 사용했다.

<p> 텍스트에는 일반적으로 단락에 의미 적으로 사용됩니다.

<div>웹 페이지의 블록 또는 영역에 사용됩니다. 예를 들어 헤더 영역을 만드는 데 사용할 수 있습니다.

그들은 수 아마도 교대로 사용할 수 있지만, 당신은해야하지.