아티클, 아사드 및 DIV 사용시기
새로운 HTML5 SECTION 요소는 다소 혼란 스러울 수 있습니다. HTML5 이전에 HTML 문서 를 작성했다면 이미 요소를 사용하여 페이지에서 구조적 구분을 작성한 다음 페이지로 스타일을 지정할 가능성이 있습니다. 따라서 기존 DIV 요소를 SECTION 요소로 대체하는 것이 자연스러운 것처럼 보일 수 있습니다. 그러나 이것은 기술적으로 부정확합니다. 따라서 DIV 요소를 SECTION 요소로 바꾸지 않으면 어떻게 올바르게 사용합니까?
SECTION 요소는 시맨틱 요소입니다.
이해해야 할 첫 번째 사항은 SECTION 요소가 의미 요소라는 것입니다. 이는 사용자 에이전트와 사용자 모두에게 밀폐 된 컨텐츠가 무엇인지, 특히 문서의 한 부분에 대한 의미를 제공한다는 것을 의미합니다.
이것은 매우 일반적인 의미 론적 설명처럼 보일 수 있습니다. 왜냐하면 그것이 그렇기 때문입니다. SECTION 요소를 사용하기 전에 먼저 사용해야하는 콘텐츠에 대한 의미 론적 구분을 제공하는 다른 HTML5 요소 가 있습니다.
- 조
- 곁에
- NAV
SECTION 요소를 사용하는 경우
콘텐츠가 독창적이고 기사 또는 블로그 게시물처럼 신디케이트 될 수있는 사이트의 독립적 인 부분 인 경우 ARTICLE 요소를 사용하십시오. 콘텐츠가 페이지의 콘텐츠 또는 사이드 바, 주석, 각주 또는 관련 사이트 정보와 같이 사이트 자체에 접하게 관련된 경우 ASIDE 요소를 사용합니다. 네비게이션 인 콘텐츠에 NAV 요소를 사용합니다.
SECTION 요소는 일반적인 의미 요소입니다. 다른 의미 컨테이너 요소가 적절하지 않은 경우이를 사용합니다. 이를 사용하여 문서의 일부를 함께 결합하여 어떤 방식 으로든 관계형으로 설명 할 수 있습니다. 섹션의 요소를 한두 문장으로 설명 할 수 없다면 요소를 사용해서는 안됩니다.
대신 DIV 요소를 사용해야합니다. HTML5의 DIV 요소는 의미없는 컨테이너 요소입니다. 결합하려는 콘텐츠가 의미 론적 의미가 없지만 스타일링을 위해 결합해야하는 경우 DIV 요소가 적절한 요소입니다.
SECTION 요소의 작동 방식
문서의 섹션은 기사 및 ASIDE 요소의 외부 컨테이너로 나타날 수 있습니다. 또한 ARTICLE 또는 ASIDE의 일부가 아닌 콘텐츠를 포함 할 수 있습니다. SECTION 요소는 ARTICLE, NAV 또는 ASIDE 내부에서도 찾을 수 있습니다. 하나의 콘텐츠 그룹이 기사 또는 페이지 전체의 섹션 인 다른 콘텐츠 그룹의 섹션임을 나타 내기 위해 섹션을 중첩 할 수도 있습니다.
SECTION 요소는 문서의 윤곽선 안에 항목을 만듭니다. 따라서 섹션의 일부로 항상 헤더 요소 (H1에서 H6까지)가 있어야합니다. 섹션의 제목을 찾을 수 없다면 DIV 요소가 아마도 더 적절할 것입니다. 페이지에 섹션 제목을 표시하지 않으려면 CSS를 사용하여 섹션 제목을 항상 마스킹 할 수 있습니다.
SECTION 요소를 사용하지 않을 때
보다 구체적인 의미 론적 요소를 먼저 사용하기위한 조언 이외에, SECTION 요소를 사용해서는 안되는 한 가지 확실한 영역이 있습니다.
즉, 그 장소에 요소를 추가하는 유일한 이유는 CSS 스타일 속성을 첨부하는 것이므로 SECTION 요소를 사용하면 안됩니다. 의미 론적 요소를 찾거나 대신 DIV 요소를 사용하십시오.
궁극적으로 그것은 중요하지 않을 수 있음
의미 론적 HTML을 작성하는 데있어서의 어려움은 저에게 의미 론적 의미가 당신에게 완전히 터무니없는 것일 수 있다는 것입니다. 문서에서 SECTION 요소를 사용하여 정당화 할 수 있다고 생각되면 사용해야합니다. 대부분의 사용자 에이전트는 DIV 또는 SECTION을 스타일 지정할지 여부를 예상 할 수 있으므로 페이지를 신경 쓰지 않고 표시합니다.
의미 론적으로 정확하기를 원하는 디자이너에게는 SECTION 요소를 의미 론적으로 유효한 방식으로 사용하는 것이 중요합니다. 자신의 페이지가 작동하기를 원하는 디자이너에게는 그다지 중요하지 않습니다. 나는 의미 론적으로 유효한 HTML을 작성하는 것이 좋은 습관이고 페이지를보다 미래 지향적으로 유지한다고 믿습니다. 그러나 결국 그것은 당신에게 달려 있습니다.