HTML5_html5 튜토리얼 기술의 div, 섹션 및 기사 간의 차이점에 대한 자세한 설명

처음 HTML5를 접했을 때 태그가 너무 불편했고 약간 혐오감도 느꼈습니다. 특히 div, 섹션, 기사 태그의 경우 언제 사용해야 할지 잘 모르겠습니다.
div

HTML 사양:

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

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

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

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

작성자는 요소의 내용을 배포하는 것이 합리적일 경우 섹션 요소 대신 기사 요소를 사용하는 것이 좋습니다.

요소의 내용을 더 이해하기 위해 집계할 때는 섹션 대신 기사를 사용해야 합니다.

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

섹션의 예로는 탭 대화 상자의 다양한 탭 페이지 또는 웹 사이트의 홈 페이지를 소개, 뉴스 항목 및 연락처 정보에 대한 섹션으로 나눌 수 있습니다. 🎜>

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

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

섹션 요소는 일반적인 컨테이너 요소가 아닙니다. 스타일링 목적이나 스크립팅의 편의를 위해 요소가 필요한 경우 작성자는 대신 div 요소를 사용하는 것이 좋습니다. 요소의 내용은 문서 개요에 명시적으로 나열됩니다."

섹션은 단순한 컨테이너 태그 그 이상입니다. 태그가 단지 스타일을 지정하거나 스크립팅을 용이하게 하기 위한 것인 경우 div를 사용해야 합니다. 일반적으로 섹션은 요소의 콘텐츠가 문서 개요에 명시적으로 나타날 때 적합합니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. <기사>     
2.     <hgroup> <h1 >사과h1> <h2>맛있고 맛있는 과일!h2> hgroup>  
3.     <p>사과는 사과나무의 열매입니다.p>    
4.     <섹션>    
5.         <h1>빨간맛h1>    
6.         <p>이 밝은 빨간색 사과는 많은 슈퍼마켓에서 가장 흔하게 찾을 수 있습니다.p>    
7.     섹션>    
8.     <섹션>    
9.         <h1>Granny Smithh1>  
10.         <p>육즙이 풍부한 녹색 사과는 사과 파이의 속을 채우기에 좋습니다.p>    
11.     섹션>    
12. 기사>    

기사

HTML 사양:

기사 요소는 문서, 페이지, 애플리케이션 또는 사이트에서 독립적인 구성을 나타내며 원칙적으로 신디케이션 등에서 독립적으로 배포하거나 재사용할 수 있습니다.

article은 섹션보다 의미가 더 명확한 특수 섹션 태그로, 관련 콘텐츠의 독립적이고 완전한 블록을 나타냅니다. 일반적으로 기사에는 제목 섹션(보통 머리글에 포함됨)이 있고 바닥글이 있는 경우도 있습니다. 섹션은 주제별 콘텐츠이기도 하지만 기사 자체는 구조와 콘텐츠 측면에서 독립적이고 완전합니다.

그런 다음 HTML 사양에는 기사에 적용 가능한 몇 가지 시나리오가 나열되어 있습니다.

포럼 게시물, 잡지나 신문 기사, 블로그 항목, 사용자가 제출한 댓글, 대화형 위젯이나 가젯 또는 기타 독립적인 콘텐츠 항목이 될 수 있습니다.

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

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

예:

XML/HTML 코드클립보드에 콘텐츠 복사

1. <기사>     
2.     <헤더>    
3.         <h1>인생의 첫 번째 규칙h1>    
4.         <p><시간 게시일 날짜시간="2009-10-09T14:28-08:00">< /시간>p>  
5.     헤더>    
6.     <p>가까운 곳에 마이크가 있다면 뜨거워서 무엇이든 전송한다고 가정하세요. 세상에 대해 말하고 있어요. 진심입니다.p>    
7.     <p>... p>    
8.     <바닥글>  
9.         <a href="?댓글 =1">댓글 표시...a>  
10.     바닥글>    
11. 기사>  
12.   
13. <기사>     
14.     <헤더>    
15.         <h1>인생의 첫 번째 규칙h1>  
16.         <p><시간 게시일 날짜시간="2009-10-09T14:28-08:00">< /시간>p>    
17.     헤더>  
18.     <p>가까운 곳에 마이크가 있다면 뜨거워서 무엇이든 전송한다고 가정하세요. 세상에 대해 말하고 있어요. 진심입니다.p>    
19.     <p>... p>    
20.     <섹션>  
21.         <h1>댓글h1>    
22.         <기사>  
23.             <바닥글>  
24.                <p>게시자: 조지 워싱턴p>  
25.                <p><시간 게시일 datetime="2009-10-10T19:10-08:00">< /시간>p>    
26.             바닥글>  
27.             <p>그렇습니다! 특히 로비스트 친구에 대해 이야기할 때!p>    
28.         기사>    
29.           <기사>  
30.             <바닥글>    
31.                <p>게시자: George Hammondp>  
32.                <p><시간 게시일 datetime="2009-10-10T19:15-08:00">< /시간>p>  
33.             바닥글>  
34.            <p>야, 너 나랑 이름이 똑같구나.p>  
35.         기사>    
36.     섹션>    
37. 기사>    

总结

div 섹션 기사 ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用样式化或者脚本化的钩子(hook)，对于一段主题性的内容，则就适用 섹션，而假如这段内容可以脱离上下文， 作为完整的独立存在的一段内容，则就适用 기사 .使사용 섹션 的，但是实际上，假如使사용 기사 更合适，那么就不要使사용 섹션 。nav and along ative 使use 也是如此,这两个标签也是特殊 的 섹션, 我使use nav and aside 更合适 的情况下 ， 也不要使use 섹션 了.

对于 div 와 섹션, 기사 以及其他标签的区分比较简单.脱离了整体是不是还能作为一个完整的、独立的内容而存는 包含的内容也能立的一块, 但是它只能算是组成整体的一分，article 才是一个完整的整体。

因为其实有些时候每个人道有自己的看法, 所以难免有难于决断 时候, 怎么办?

여기 HTML5 设计원리 中，有一条是专门用来解决类似情况的：

最终用户优先(선거구 우선)

"충돌이 발생할 경우 이론적 순수성보다는 지정자보다는 작성자보다는 사용자를 고려하세요." 一旦遇到冲突，最终用户优先，其次是작성자，其次是实现者，其次标准 조절자，最后才是理论上的完满。

推荐各位多读几遍 HTML5 设计원리，这才是纷繁世界背后的最终奥义。