HTML5의 div, 섹션, 기사 간의 차이점 분석

이 글은 주로 HTML5의 p, section, article의 차이점에 대한 자세한 설명을 소개하고 있으며, W3C 설명을 인용했으며, 필요한 코드 예시도 포함되어 있습니다.

처음 접하게 되었을 때. HTML5, 나는 그 태그가 매우 불편했고, 심지어 한동안 약간 혐오감을 느꼈습니다. 특히 div, 섹션, 기사 태그의 경우 언제 사용해야 할지 잘 모르겠습니다.
div

HTML Spec:

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

이 태그는 우리가 가장 많이 보고 사용하는 태그입니다. 그 자체로는 의미가 없으며 레이아웃과 스타일 또는 스크립팅을 위한 후크로 사용됩니다.
section

HTML 사양: "섹션 요소는 문서 또는 애플리케이션의 일반 섹션을 나타냅니다. 이 맥락에서 섹션은 일반적으로 제목이 있는 주제별 콘텐츠 그룹입니다."

에는 div에 대한 의미가 없습니다. 반대로 간단히 말하면 섹션은 의미를 지닌 div이지만 실제로는 그렇게 단순하다고 생각하지 않습니다. 섹션은 일반적으로 제목이 있는 주제별 콘텐츠를 나타냅니다. 이것을 보면 블로그 게시물이나 별도의 댓글에서 섹션을 사용하면 된다고 생각할 수도 있습니다. 계속 읽어보세요:

작성자는 요소 섹션의 콘텐츠를 배포하는 것이 합리적일 때 섹션 요소 대신 기사 요소를 사용하는 것이 좋습니다.

그럼 섹션은 언제 사용해야 할까요? 계속 읽어보세요:

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

섹션에는 기사의 장, 탭 대화 상자의 탭 또는 논문의 번호가 매겨진 섹션이 포함됩니다. 웹사이트의 홈페이지는 소개, 뉴스, 연락처 정보 등의 섹션으로 나눌 수 있습니다. 사실 저는 여기서 전달되는 정보에 매우 관심이 많습니다. 왜냐하면 아래에 소개할 섹션과 기사가 모듈형 애플리케이션에 더 적합하다고 생각하기 때문입니다. 이 주제는 향후 특별 기사에서 논의될 것이므로 여기서는 건너뛰겠습니다. 지금은.

W3C에서는 다음 사항도 경고합니다.

섹션 요소는 스타일 지정 목적이나 스크립팅 편의를 위해 요소가 필요한 경우 대신 p 요소를 사용하는 것이 좋습니다. 섹션 요소는 요소의 내용이 문서의 개요에 명시적으로 나열되는 경우에만 적합합니다."

section은 단순한 컨테이너 태그 그 이상입니다. 태그가 단지 스타일 지정을 위한 것이거나 스크립트 사용을 용이하게 하는 경우 p를 사용해야 합니다. . 일반적으로 섹션은 요소 콘텐츠가 문서 개요, 애플리케이션 또는 사이트에 명확하게 표시되고 원칙적으로 배포 또는 재사용이 가능한 경우에 적용됩니다.

article은 다음과 같은 특수 섹션 태그입니다. 섹션보다 의미가 더 명확하며 독립적이고 완전한 관련 콘텐츠를 나타냅니다. 일반적으로 기사에는 제목 부분(일반적으로 머리글에 포함됨)이 있고 때로는 섹션이 주제별 콘텐츠 부분이기도 합니다. 기사 자체는 구조와 내용 면에서 독립적입니다.

HTML 사양에는 기사에 적용할 수 있는 몇 가지 시나리오가 나열됩니다. 이는 포럼 게시물, 잡지 또는 신문 기사, 사용자일 수 있습니다. -제출된 댓글, 대화형 위젯 또는 가젯 또는 기타 독립적인 콘텐츠 항목입니다.

기사가 기사에 삽입되면 원칙적으로 내부 기사의 내용은 외부 기사의 내용과 관련됩니다. 예를 들어, 블로그 게시물에서 사용자가 제출한 댓글이 포함된 기사는 포함된 블로그 게시물 기사 내에 숨겨야 합니다.

질문은 "완전한 독립 콘텐츠"로 간주되는 것이 무엇입니까? 가장 쉽게 알 수 있는 방법 중 하나는 RSS 피드에서 콘텐츠가 완전한지 확인하는 것입니다. 콘텐츠가 맥락 없이 완전하고 독립적인지 확인하세요.

예:

<article>
    <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup>
    <p>The apple is the pomaceous fruit of the apple tree.</p>
    <section>
        <h1>Red Delicious</h1>
        <p>These bright red apples are the most common found in many supermarkets.</p>
    </section>
    <section>
        <h1>Granny Smith</h1>
        <p>These juicy, green apples make a great filling for apple pies.</p>
    </section>
</article>

Summary

p 섹션 기사에서 의미론은 처음부터 시작하여 점차적으로 향상됩니다. p에는 의미가 없으며 스타일링 또는 스크립팅 후크로만 사용됩니다. 주제별 콘텐츠의 경우 섹션이 적용 가능합니다. 이 콘텐츠가 컨텍스트에서 분리되어 완전히 독립적인 콘텐츠로 사용될 수 있으면 적용하면 됩니다. 기사. 원칙적으로 기사를 사용할 수 있으면 섹션도 사용할 수 있지만 실제로 기사를 사용하는 것이 더 적절하다면 섹션을 사용하지 마십시오. nav 및 side를 사용하는 경우에도 마찬가지입니다. 이 두 태그도 특수 섹션입니다. nav 및 side를 사용하는 것이 더 적절할 경우 섹션을 사용하지 마십시오.

p와 섹션, 기사 및 기타 태그의 구별은 비교적 간단합니다. 얼핏 보면 섹션과 기사의 구분이 어려워 보일 수도 있지만, 사실 이 부분이 전체와 분리되지 않고 완전하고 독립적인 콘텐츠로 존재할 수 있는지가 핵심이다. 실제로 섹션에 포함된 내용은 독립적인 부분으로 간주될 수도 있지만 전체의 일부로만 간주될 수 있으며 기사는 완전한 전체이기 때문입니다.

실제로 모든 사람은 때때로 자신의 의견을 가지고 있기 때문에 결정을 내리기가 어려울 수 밖에 없습니다.

HTML5 디자인 원칙에는 유사한 상황을 해결하기 위해 특별히 고안된 것이 있습니다.

구성원의 우선순위

"충돌이 발생하는 경우 이론적 순수성보다 작성자보다 구현자보다 사용자를 고려하세요." , 최종 사용자가 우선권을 갖고, 그 다음 작성자, 구현자, 표준 설정자, 마지막으로 이론적 완성도가 높습니다.

HTML5 디자인 원칙을 여러 번 읽어 보는 것이 좋습니다. 이것이 복잡한 세계 뒤에 숨은 궁극적인 비밀입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

HTML5에서 비디오 태그의 브라우저 호환성을 향상시키는 솔루션 공유

H5의 pushState 및 replacementState 사용 분석

HTML5 Shiv를 사용하여 IE 문제를 해결하는 방법 HTML5 태그와 호환되지 않음 방법

위 내용은 HTML5의 div, 섹션, 기사 간의 차이점 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!