HTML 내에서 사용되는 Section 요소에 대해서 한번 알아보겠습니다. Section 요소는 문서 내에서 의미가 같은 내용들을 묶어주는 그룹 요소이며 제목 요소로 시작합니다. 묶어 주는 요소라고 하며 기존의 div 요소처럼 생각하면 안됩니다. 레이아웃을 잡거나 스타일을 적용하는 경우나 자바스크립트의 편의성이 목적이라면 div 요소를 사용해야 합니다. 조금 더 자세하게 알아보도록 하겠습니다.
HTML Section 요소 및 Article 요소
Section 요소
의미가 같은 내용들을 Section 요소로 그룹화했습니다. 전체적으로 볼 때는 아이콕스에 대해 주제별 3개의 섹션으로 나누어져있습니다. 다시 말해서 의미가 같은 콘텐츠로 그룹하여 영역을 나눈 것인지 레이라웃으로 위해 그룹화한 것은 아닙니다. 특히, section 요소에 제목 요소를 포함하지 않고 의미가 다른 내용들을 그룹화했다고 하더라도 틀린 부분은 아닙니다.중요한 것은 하나의 section 요소를 만들 때 의미상 내용들을 그룹으로 묶는 것이 가능하며 그 그룹에 제목을 명료하게 명시한다면 사용함에 전혀 문제가 없을 것으로 보입니다.
Article 요소
신문 기사 또는 블로그의 글을 확인하면 문서 내에서도 하나의 자립적인 컨텐츠가 있습니다. 이러한 콘텐츠들은 수정 또는 가공없이 다른 사이트로 배포 또는 재사용할 수 있다는 특징을 가지고 있습니다. 독립적으로 배포 또는 재사용이 가능한 모든 내용들을 article 요소에 포함할 수 있습니다. 예를 들어서 자립적이고 배포 또는 재사용이 가능한 내용들이 의미를 가졌다면 이것은 section 요소들을 그룹화할 수 있습니다. articel 요소 안에서 의미가 같은 내용들을 그룹화한다면 article 요소 내에 section 요소를 포함할 수 있습니다.