HTML5의 DIV, 섹션 및 기사의 차이점에 대한 자세한 설명

이 기사는 주로 HTML5의 DIV, 섹션 및 기사의 차이점에 대한 세부 사항을 소개합니다. W3C에서 인용되며 코드 예제가 표시됩니다. 필요한 친구는 그것을 참조 할 수 있습니다.

내가 처음 HTML5와 접촉하기 시작했을 때, 나는 그 태그에 매우 불편했고 심지어 어느 시점에서 약간 혐오감을 느꼈습니다. 특히 Div, 섹션, 기사 태그의 경우 실제로 어떤 경우에 사용해야하는지 알 수 없습니다.

HTML 사양 :

DIV 요소는 전혀 특별한 의미가 없습니다.

이 태그는 가장 일반적으로 사용되는 태그입니다. 그것은 의미론 자체가 없으며 레이아웃과 스타일링 또는 스크립팅의 후크로 사용됩니다.

HTML 사양 : 섹션 요소는 문서 또는 응용 프로그램의 일반 섹션을 나타냅니다. 이 맥락에서 섹션은 일반적으로 제목을 가진 주제별 콘텐츠 그룹입니다.

DIV의 의미와 달리 단순히 섹션은 의미론을 가진 DIV이지만 실제로 그렇게 간단하다고 생각하지 않습니다. 섹션은 일반적으로 제목이있는 국소 내용의 섹션을 나타냅니다. 이것을 본 후에, 우리는 그것이 블로그 게시물이나 별도의 의견이 섹션을 사용하기에 적합하지 않다고 생각할 수 있습니까? 다음 모습 :

저자는 요소의 내용을 신디케이트하는 것이 합리적 일 때 섹션 요소 대신 기사 요소를 사용하도록 권장됩니다.

요소의 내용이 더 흥미로운 경우 기사를 사용하여 섹션을 교체해야합니다.

그렇다면 언제 섹션을 사용해야합니까? 계속 봅시다 :

섹션의 예로는 챕터, 탭 대화 상자의 다양한 탭 페이지 또는 논문의 번호가 매겨진 섹션이 있습니다. 웹 사이트의 홈페이지는 소개, 뉴스 항목 및 연락처 정보를 위해 섹션으로 나눌 수 있습니다.

섹션 응용 프로그램의 일반적인 시나리오에는 기사 장, 태그 대화 상자의 탭 페이지 또는 논문의 번호가 매겨진 부분이 포함됩니다. 웹 사이트의 홈페이지는 소개, 뉴스 및 연락처 정보와 같은 여러 부분으로 나눌 수 있습니다. 실제로, 나는 여기에 정보를 전달하는 데 매우 관심이 있습니다. 아래에서 소개 될 섹션과 예술이 모듈 식 응용 프로그램에 더 적합하다고 생각하기 때문입니다. 이 주제는 앞으로 논의 될 것이며 지금은 여기에서 건너 뛸 것입니다.

W3C도 경고한다는 점에 유의하십시오.

섹션 요소는 일반 컨테이너 요소가 아닙니다. 스타일링 목적으로 또는 스크립팅을위한 편의로 요소가 필요한 경우, 저자는 DIV 요소를 대신 사용하도록 권장됩니다. 일반적인 규칙은 섹션 요소가 요소의 내용이 문서의 개요에 명시 적으로 나열된 경우에만 적절하다는 것입니다.

섹션은 단순한 컨테이너 태그 이상입니다. 태그가 스크립트에서 스타일링되거나 사용하기 쉬운 경우 DIV를 사용해야합니다. 일반적으로, 섹션은 요소 컨텐츠가 문서 개요에 명시 적으로 나타날 때 적용됩니다.