내부 블록 수준 요소 중첩
태그… 옳고 그름?
태그 <div>내부 에 중첩 또는 다른 블록 수준 요소 가 구문 상 및 의미 상 올바른가요? <p>HTML4 Transitional DTD에 대해 이야기하고 있습니다.
그렇지 않다면 대신 사용해도 괜찮 <span style="display: block">습니까?
구문 적으로 div내부 a p는 HTML의 모든 표준에서 유효하지 않습니다. 또한, HTML 구문 분석기를 준수하는 경우 여는 태그가 자동으로 요소를 닫기 때문에 DOM <div>내부에 요소 를 배치 할 수 없습니다 .<p><div><p>
의미 상 올바른 선택은 마크 업하는 콘텐츠에 따라 다릅니다. 올바른 의미 마크 업을 결정할 수 있도록 충분한 정보를 제공하려면 최소한 전체 단락 샘플과 해당 단락을 둘러싼 내용을 보여 주어야합니다.
그러나 <div>및 둘 다 <span>의미론이없고 CSS는 <p>태그 의 내용이 진정으로 단락을 형성하고 <span style="display: block">원하는 표현 효과를 얻을 수 있다고 확신하는 경우 CSS를 결코 변경할 수 없습니다. 유효한 HTML이며 완전히 적절한 솔루션이 될 것입니다.
아니요, 단락 요소는 다른 블록 요소를 포함 할 수 없습니다.
단락 태그는 텍스트 블록을위한 것입니다. 요소가 텍스트의 일부 (블록 요소가 아님)이면 의미 론적으로 정확하고 그렇지 않으면 그렇지 않습니다. 스팬 태그 display:block는 여전히 블록 요소입니다.
W3C 마크 업 유효성 검사기를 사용하여 직접 확인할 수 있으므로 구문 상 잘못되었습니다 .
의미 적으로나 실질적으로 a) 매우 자연스럽고 b) 모든 브라우저가 올바르게 처리한다는 점에서 "좋다"고 말할 것입니다 (실제로 이것은 매일 직면해야하는 가장 쉬운 문제 중 하나입니다).
HTML이 사용자 입력에 의해 생성되는 경우 (예 : 방문자가 댓글을 남길 수있는 HTML 편집기 위젯) "잘못된"경우에도 간단히 그대로 둡니다.
그렇지 않으면 마크 업을 약간 변경할 수 있습니다. 개인적으로 나는 함께 갈 것입니다
<div class="para">
<div>Some content</div>
</div>
.paraCSS로 적절한 여백을 제공 합니다.
FWIW : 단락 태그로 묶인 단락이 있습니다. 그 안에 div에 display : inline이있는 div를 넣었습니다. 그러나 여전히 div를 블록 요소로 취급하고 단락을 닫아 단락 간격이있는 새 줄을 만듭니다.
단락 태그 내의 모든 블록 요소는 CSS에서 블록 요소가 인라인으로 표시되는 경우에도 단락을 강제로 닫는 것으로 보입니다.
문맥이 없어도 외부 태그가 실제로 단락 인 한 괜찮아 보입니다. div가 상단 내비게이션 바와 같은 것이라면 그다지 많지는 않지만 오른쪽으로 떠 다니는 이미지 및 캡션의 컨테이너라면 문제가 없습니다.
이 게시물은 이것에 대해 보여줍니다. 표준 브라우저 동작 인 것 같습니다.
'code' 카테고리의 다른 글
| 하노이 타워 : 재귀 알고리즘 (0) | 2020.11.24 |
|---|---|
| C와 Python-모듈로 (%) 연산의 다른 동작 (0) | 2020.11.24 |
| 다른보기 내에서보기를 호출 할 수 있습니까? (0) | 2020.11.24 |
| Windows 배치 파일 : 그렇지 않은 경우 (0) | 2020.11.24 |
| 작업 및 프로세스 ID를 인쇄하지 않고 백그라운드에서 bash 명령 실행 (0) | 2020.11.24 |