<p> 태그에 <div> 태그를 포함 할 수없는 이유는 무엇입니까?

169

내가 아는 한 이것은 옳습니다.

<div>
  <p>some words</p>
</div>

그러나 이것은 잘못되었습니다.

<p>
  <div>some words</div>
</p>

첫 번째 는 W3C 유효성 검사기 (XHTML 1.0)를 통과 할 수 있지만 두 번째는 통과 할 수 없습니다. 아무도 두 번째 코드와 같은 코드를 작성하지 않습니다. 이유를 알고 싶어요

그리고 다른 태그의 격리 관계는 어떻습니까?

html xhtml

— 헨리 H 미아오
소스

9

<p>블록 레벨 요소이고 텍스트를 표시하는 데 사용 되기 때문에 텍스트 안에 다른 블록 레벨 요소를 허용하지 않고 <span>and와 같은 인라인 요소 만 허용 <strong>합니다.

— Bojangles

22

JamWaffles : 그것은 p블록 레벨 요소와 관련이 없습니다. div또한 하나이며 다른 블록을 허용합니다.

— Joey

가능한 중복 : stackoverflow.com/questions/4967976/… (플래그되지 않음) : 이에 대한 적절한 대답은 HTML 사양을 읽는 방법에 대한 답변이므로 이에 대한 답변도 제공합니다.

— Ciro Santilli 郝海东冠状病六四事件法轮功

div의 스타일을 인라인으로 선언해도 작동하지 않습니다.

— Triynko

198

허용 된 격리 관계를 찾을 수있는 권위있는 장소는 HTML 사양입니다. 예를 들어 http://www.w3.org/TR/html4/sgml/dtd.html을 참조하십시오 . 어떤 요소가 블록 요소이고 어떤 요소가 인라인인지 지정합니다. 해당 목록을 보려면 "HTML 컨텐츠 모델"로 표시된 섹션을 검색하십시오.

P 요소의 경우 P 요소에 인라인 요소 만 포함 할 수 있음을 나타내는 다음을 지정합니다.

<!ELEMENT P - O (%inline;)*            -- paragraph -->

이것은 http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 과 일치 합니다. P 요소는 "블록 자체 요소 (P 자체 포함)"를 포함 할 수 없습니다.

— 콜린 캠벨
소스

74

나는 읽는 것이 재미 있지 않기 때문에 이와 같은 것들에 대한 가장 권위있는 문서 인 사양을 피하는 습관이 있습니다. 실제로 읽고, 이해하고, 질문에 답변하는 데 +1합니다.

— Stoutie

3

이것은 여전히 HTML 5에 유효합니까? 링크 된 사양은 특히 HTML 4를 참조하며 HTML 5에는 문서 유형 정의가 없습니다 .

— Ajedi32

2

@ Ajedi32 예, 여기 . HTML5는 많은 용어의 이름을 변경했지만 "허용 된 컨텐츠 : 문구 컨텐츠"는 %inline위 의 비트 와 동일 함을 의미합니다 . Oriol의 답변도 참조하십시오.

— Mr Lister

@Stoutie Ya와 함께 스택 오버플로가 존재합니다.

— Captain Hypertext

69

즉, 여는 태그가 자동으로 요소를 닫으 므로 DOM에서 <div>요소 를 배치 할 수 없습니다 .<p><div><p>

— defau1t
소스

2

아, 이것은 p 안에 실제로 div 바로 전에 끝나기 때문에 ap 안에 div 앞에 큰 공간이있는 이유를 설명합니다.

— AaronLS

2

예를 들어 DOM 안에 요소 를 배치 할 수 있습니다 . 그러나 HTML 파서는 그렇게하지 않습니다. divp myP.appendChild(myDiv)

— Oriol

1

하지마 당신은 그것이 미래의 브라우저에서 어떻게 반응 할 것인지 전혀 모른다. 기술은 끊임없이 변화하고 있습니다. 언젠가는 무효가되는 동적 HTML 파서가있을 수 있습니다. 웹 개발자의 목표는 원하고 다소 호환 가능한 기능을 가진 것을 만드는 것입니다. 브라우저가 허용하는 것을 우회 할 수 있으면 브라우저가 영원히 작동한다고 보장 할 수 없습니다. span guys 만 사용하십시오 ... div가 필요한 경우 p 태그 사용을 중지하십시오.

39

HTML5에 따르면, 콘텐츠 모델 의 div요소는 유동 콘텐츠

문서 및 응용 프로그램 본문에 사용되는 대부분의 요소는 흐름 내용으로 분류됩니다.

여기에는 흐름 내용 이 예상 되는 경우 에만 사용할 수 p 있는 요소 가 포함됩니다.

따라서 div요소에는 요소가 포함될 수 있습니다 p.

그러나 요소 의 컨텐츠 모델 은 컨텐츠 컨텐츠 p

문구 내용은 문서의 텍스트 및 단락 내 수준에서 해당 텍스트를 표시하는 요소입니다. 의 실행 내용 같이 분석 형태의 단락을 .

여기에는 흐름 내용 이 예상 되는 경우 에만 사용할 수 div 있는 요소 가 포함되지 않습니다 .

따라서 p요소는 요소를 포함 할 수 없습니다 div.

요소 바로 뒤에 요소가 있을 때 요소 의 끝 태그 를 p생략 할 수 있으므로 다음과 같습니다.pdiv

<p>
  <div>some words</div>
</p>

로 파싱

<p></p>
<div>some words</div>
</p>

마지막 </p>은 오류입니다.

— 오리올
소스

그러나 CSS에서 div를 인라인으로 설정하면 왜 그것을 존중하지 않습니까?

— Sanjay

CSS 값은 dom Parsing 후에 적용되기 때문에 우리가 그것을 div as inline in CSS사용하지 않더라도 새로운 구문 분석 된 구조 <p>Text</p> <div>some words</div> <p></p> 가 내 이해가 정확하기 때문에?

— Sanjay

@Sanjay 네, 당신이 옳은 것 같습니다. 또한 내 관찰 중에 <span>을 <p> 안에 넣고 span의 표시를 "block"으로 설정하면 이러한 효과가없는 일반적인 블록 요소로 렌더링됩니다.

— Andrii Naumovych

-1

X HTML 이후에 규칙이 변경되었으며 이제는 XML과 HTML의 규칙이 혼합되어 있으므로 두 번째 접근 방식이 잘못되고 W3C 유효성 검사기가 표준 및 규칙에 따라 올바른 것을 수락합니다.

— geekdev786
소스

XHTML은 크게 변하지 않았습니다. p 요소는 div 요소를 포함 할 수 없습니다 .

— Quentin

-7

때문에 div태그는보다 우선 순위가 p태그를. p반면 태그 단락 태그를 나타내는 div태그는 문서의 태그를 나타낸다.

문서 태그에 여러 단락을 쓸 수 있지만 단락에 문서를 쓸 수는 없습니다. DOC 파일과 동일합니다.

— 가우 라브 아그라 왈
소스

2

실제로, 그것은 부서입니다. 그렇지 않으면 <doc>: D

— Kyle

6

우선 순위는 html 요소에 적용되는 개념이 아니며, @KyleSevenoaks가 말합니다 :)

— SimplGy

DOC 파일이란 무엇입니까? 마이크로 소프트 워드 파일?

— Peter Mortensen