요소 중첩 - by. UXKM

요약 설명

요소 중첩(Nesting Elements)은 HTML 문서에서 한 요소 안에 다른 요소를 포함하여 구조적 관계를 형성하는 것을 의미합니다.
HTML은 트리 구조(DOM)로 구성되기 때문에, 요소 간의 중첩은 콘텐츠의 계층과 의미를 정의하는 데 필수적입니다. 중첩 시에는 올바른 열고 닫기 순서를 지켜야 하며, 특정 요소는 어떤 요소 안에 들어갈 수 있는지에 대한 규칙(허용된 자식 요소)이 정해져 있습니다.
잘못된 중첩은 브라우저 렌더링 오류나 접근성 문제로 이어질 수 있으므로 주의가 필요합니다.

요소 중첩의 기본 규칙

  1. 올바른 계층 구조
    • 블록 요소는 다른 블록 요소나 인라인 요소를 포함할 수 있습니다.
      단, <p> 요소는 블록 요소이지만 다른 블록 요소가 포함될 수 없고, 인라인 요소만 포함될 수 있습니다.
    • 인라인 요소는 다른 인라인 요소를 포함할 수 있지만, 블록 요소를 포함할 수는 없습니다.
  2. 닫는(폐쇄) 태그
    • 모든 HTML 요소는 올바르게 닫혀야 합니다. 중첩된 요소가 있는 경우, 닫는 태그는 열리는 태그의 반대 순서로 닫아야 합니다.
    • 단, <meta>, <a>, <img>, <br>, <hr> 같은 단일 요소는 닫는 태그 없이 사용 가능합니다.

부모 요소와 자식 요소

HTML 요소 중첩에서 부모와 자식 관계는 HTML 문서의 구조를 이해하는 데 중요한 개념입니다.
부모와 자식 관계를 통해 문서의 계층 구조를 정의하고, 요소 간의 관계를 명확하게 할 수 있습니다.

  1. 부모 요소 (Parent Element)
    • 다른 요소를 포함하는 요소를 부모 요소라고 합니다.
    • 부모 요소는 자식 요소를 감싸고 있으며, 자식 요소의 바로 상위 계층에 위치합니다.
  2. 자식 요소 (Child Element)
    • 다른 요소 안에 포함된 요소를 자식 요소라고 합니다.
    • 자식 요소는 부모 요소에 포함되며, 부모 요소의 바로 하위 계층에 위치합니다.
  3. 부모와 자식 관계의 시각화
    • 위 예제에서 <div class="nesting">는 최상위 부모 요소입니다.
    • <h1>, <div class="el">, <p> 모두 <div class="nesting">의 자식 요소입니다.
    • <div class="el">은 <div class="nesting">의 자식 요소이자, 동시에 <p> 요소의 부모 요소입니다.

요소 중첩의 잘못된 예와 올바른 예

요소의 중첩이 잘못되면 레이아웃 전체가 망가질 수 있으므로, 마크업 시 요소가 적절히 중첩되었는지 확인해야 합니다.
아래는 요소 중첩의 잘못된 예와 올바른 예입니다.

문단과 강조

  • 잘못된 예

    첫 번째 예제는 열린 태그의 반대 순서로 닫아야 하는 규칙을 지키지 않았고,
    두 번째 예제는 인라인 요소 안에 블록 요소가 들어갈 수 없는 규칙을 지키지 않았습니다.

  • 올바른 예

리스트와 링크

  • 잘못된 예

    첫 번째 예제는 필수 요소가 누락되었습니다. <ul> 요소의 직계 자식(한 단계 밑)으로 <li> 요소가 반드시 있어야 합니다.
    두 번째 예제는 <a>요소를 단지 않았습니다.

  • 올바른 예

표 데이터

  • 잘못된 예
  • 올바른 예

시멘틱 레이아웃

  • 잘못된 예

    제목 요소 안에 블록 요소를 포함하는 것은 권장되지 않습니다.
    제목 요소(<h1>, <h2>, <h3>, 등)는 인라인 텍스트 콘텐츠를 포함하도록 설계되었기 때문에, 블록 요소를 포함하면 시맨틱 구조가 어긋나고, 브라우저의 기본 동작을 방해할 수 있습니다.

  • 올바른 예