HTML5 SECTION 요소 이해하기
HTML5가 몇 년 전 장면에 깔려서 나왔을 때, SECTION 요소를 포함하여 여러 개의 새로운 섹션 요소가 추가되었습니다. HTML5가 소개하는 대부분의 새로운 요소에는 명확한 용도가 있습니다. 예를 들어, 요소는 웹 페이지의 기사 및 주요 부분을 정의하는 데 사용되며 요소는 나머지 페이지에서 중요하지 않은 관련 내용을 정의하는 데 사용되며 header, nav 및 footer는 매우 자명합니다. 그러나 새로 추가 된 SECTION 요소는 다소 덜 명확합니다.
많은 사람들은 HTML 요소 인 SECTION을 믿고 있으며 실제로는 웹 페이지에 내용을 포함하는 데 사용되는 일반적인 컨테이너 요소와 동일합니다. 그러나 현실은이 두 요소가 둘 다 컨테이너 요소이지만 일반 요소에 불과하다는 것입니다. SECTION 요소와 DIV 요소를 모두 사용해야하는 구체적인 이유가 있습니다.이 기사에서는 이러한 차이점에 대해 설명합니다.
섹션 및 사업부
SECTION 요소는 웹 페이지 또는 사이트의 의미 론적 섹션으로 정의되며, 더 구체적인 유형 (예 : 기사 또는 옆)이 아닙니다. 나는이 요소를 사용하여 페이지의 고유 한 섹션 (다른 페이지 나 사이트의 일부에서 이동하여 사용할 수있는 섹션)을 표시 할 때이 요소를 사용하는 경향이 있습니다. 원하는 경우 콘텐츠의 고유 한 부분 또는 콘텐츠의 "섹션"입니다.
반대로, 분할하려는 페이지 부분에는 DIV 요소를 사용하지만 의미가 아닌 다른 용도로 사용합니다. 내가 순수하게 CSS에 "후크 (hook)"를주기 위해 그렇게한다면, 나는 한 부분에있는 내용의 영역을 감쌀 것이다. 의미에 기반한 컨텐트의 뚜렷한 섹션이 아닐 수도 있지만, 내 페이지에 대해 원하는 레이아웃을 얻기 위해 지시하는 것입니다.
의미에 관한 모든 것
이것은 이해하기 어려운 개념이지만 DIV 요소와 SECTION 요소의 유일한 차이점은 의미입니다. 다른 말로하면, 나누는 코드 섹션의 의미 입니다.
DIV 요소 안에 포함 된 모든 콘텐츠에는 고유 한 의미가 없습니다. 그것은 다음과 같은 것들에 가장 잘 사용됩니다 :
DIV 요소는 문서의 스타일을 지정하고 열과 멋진 레이아웃을 만들기 위해 후크를 추가하는 데 사용 된 유일한 요소였습니다. 그렇기 때문에 우리는 DIV 요소로 가득 찬 HTML로 끝났습니다. 웹 디자이너가 divitis라고 부르는 것은 무엇입니까? DIV 요소를 독점적으로 사용하는 WYSIWYG 편집기조차있었습니다. 단락 대신 DIV 요소를 사용하는 HTML을 실제로 실행했습니다!
HTML5를 사용하면 세분화 요소를 사용하여보다 의미 론적으로 설명이 가능한 문서를 만들 수 있습니다 (네비게이션 및 설명 형 등을 사용하여). 또한 요소에 스타일을 정의 할 수 있습니다.
SPAN 요소는 무엇입니까?
DIV 요소를 생각할 때 대부분의 사람들이 생각하는 다른 요소가 요소입니다. 이 요소는 DIV와 마찬가지로 의미 론적 요소가 아닙니다. 인라인 블록 (일반적으로 텍스트) 주위에 스타일 및 스크립트 용 후크를 추가하는 데 사용할 수있는 인라인 요소입니다. 이러한 의미에서 DIV 요소와 정확히 같으며 블록 요소 가 아니라 인라인 만 있습니다. DIV를 블록 레벨 SPAN 요소로 생각하고 HTML 컨텐트의 전체 블록에 대해서만 SPAN을 사용하는 것과 같은 방식으로 DIV를 사용하는 것이 더 쉬울 수도 있습니다.
HTML5에는 비슷한 인라인 섹션 요소가 없습니다.
이전 버전의 Internet Explorer의 경우
HTML5를 안정적으로 인식하지 못하는 Internet Explorer 8 이하 버전의 극적으로 이전 버전의 Internet을 지원하더라도 의미 상 올바른 HTML 태그를 사용하는 것을 두려워해서는 안됩니다. 이 의미 체계는 미래에 페이지를 관리하는 데 도움을 줄 것입니다 (해당 섹션이 ARTICLE 요소로 둘러싸여 있으면 해당 섹션이 기사라는 것을 알기 때문에). 또한 이러한 태그를 인식하는 브라우저는 더 나은 기능을 지원합니다.
Internet Explorer에서 HTML5 의미 구조 섹션 요소를 계속 사용할 수 있습니다. 태그를 HTML로 인식하도록하기 위해 스크립팅과 주변 DIV 요소를 추가하기 만하면됩니다.
DIV 및 SECTION 요소 사용
올바르게 사용하고 있다면 유효한 HTML5 문서에서 DIV와 SECTION 요소를 함께 사용할 수 있습니다. 이 기사에서 본 것처럼 SECTION 요소를 사용하여 내용의 의미 적으로 분리 된 부분을 정의하고 DIV 요소를 CSS 및 JavaScript의 후크로 사용하고 의미 론적 의미가없는 레이아웃을 정의합니다.
Jennifer Krynin의 원본 기사입니다. 제레미 지라드 편집 : 3/15/17