개념

• 태그를 다른 태그 안에 넣어 계층 구조를 만드는 규칙

특징

• 여는 태그와 닫는 태그의 순서를 반드시 지켜야 한다. (예: 먼저 연 것은 나중에 닫아야 한다.)
• 부모-자식 관계가 명확해야 하며, 특정 태그는 포함할 수 있는 자식의 종류가 제한된다.
• 시맨틱 규칙과 콘텐츠 모델에 따라 허용/금지 조합이 있다.
• 일부 태그는 빈요소로, 자식을 가질 수 없다.

핵심 중첩 규칙 요약

태그 닫기 순서

• 올바름: <b><i>텍스트</i></b>
• 잘못됨: <b><i>텍스트</b></i>

p(문단)

• p 안에는 “프레이징 콘텐츠”만 허용(인라인 중심); div, section, ul, table 같은 블록은 금지.
• 브라우저는 p 안에서 블록 요소를 만나면 p를 자동으로 닫아버림(예상치 못한 DOM).

a(앵커)

• HTML5부터 “프레이징 콘텐츠”를 대부분 포함 가능(블록 수준 요소라도 프레이징이면 가능)이나, 중첩 a는 금지(a 안에 또 a 불가).

인터랙티브 요소(button, a 등)

• button 안에 a, button 안에 button 등 인터랙티브 중첩은 피함.

빈 요소

• img, br, hr, input 등은 자식 불가. 닫는 태그를 추가하지 않음(자체 종료).

실무

• 컴포넌트 단위 개발 시 "루트 래퍼", "슬롯" 설계로 잘못된 중첩 방지