HTML5 기사와 섹션의 차이점에 대한 자세한 소개

컨텐츠 블록은 HTML 페이지를 논리적으로 구분하는 단위를 말합니다. 페이지 웹사이트의 경우 탐색 메뉴, 기사 텍스트, 기사 댓글 등 각 부분을 콘텐츠 블록이라고 부를 수 있습니다.
Article 요소
Article 요소는 외부에서 독립적으로 참조할 수 있는 문서, 페이지 또는 애플리케이션의 독립적이고 완전한 콘텐츠를 나타냅니다. 블로그나 신문 기사, 포럼 게시물, 사용자 댓글, 독립형 플러그인 또는 기타 독립형 컨텐츠일 수 있습니다. 콘텐츠 외에도 기사 요소에는 일반적으로 자체 제목(보통 헤더 요소 내부에 위치)이 있으며 때로는 자체 각주도 있습니다.

<article>      
<header>         　　　　
<h1>标题</h1>           
<p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>　　
</header>
　　<p>article的使用方法</p>      　　
　　<footer>            
　　<p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>　　
　　</footer>
　　</article>

참고: article 요소는 중첩될 수 있으며 내부 콘텐츠는 원칙적으로 , 외부 콘텐츠와 관련이 있어야 합니다. 예를 들어, 블로그 게시물에서 기사에 대한 댓글은 기사 요소를 사용하여 중첩될 수 있습니다. 댓글을 표시하는 데 사용되는 기사 요소는 전체 콘텐츠를 나타내는 기사 요소에 포함됩니다.
중첩된 코드는 다음과 같습니다.

<article>

　　<header>
            <h1>article元素使用方法</h1>
　　　　<p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>
　　</header>

　　<p>此标签里显示的是article整个文章的主要内容，，下面的section元素里是对该文章的评论</p>
      
　　<section>
            <h2>评论</h2>
　　　　<article>
                  <header>
　　　　　　　　<h3>发表者：maizi</h3>
　　　　　　　　<p><time pubdate datetime="2016-6-14">1小时前</time></p>
　　　　　　</header>  
　　　　　　<p>这篇文章很不错啊，顶一下！</p>
           </article> 
　　　　<article>
                  <header>            
　　　　　　　　<h3>发表者：小妮</h3>
                        <p><time pubdate datetime="2016-6-14T:21-26:00">1小时前</time></p>
　　　　　　</header>
　　　　<p>这篇文章很不错啊，对article解释的很详细</p>  
　　　　</article>
      </section>
</article>

샘플 내용은 여러 부분으로 나누어져 있으며, 기사 제목은 헤더 요소에 배치됩니다. 기사 본문은 header 요소 뒤의 p 요소에 배치되며, section 요소는 텍스트와 댓글을 구분합니다(페이지에서 내용을 구분하는 데 사용되는 차단 요소입니다). section 요소에는 댓글의 내용이 포함됩니다. 댓글의 각 요소 휴먼 댓글은 상대적으로 독립적이고 완전하므로 모두 기사 요소를 사용합니다. 댓글의 기사 요소는 제목 요소와 댓글 내용 부분으로 나누어 각각 헤더 요소와 p 요소에 배치됩니다. .
1. 섹션 요소는 웹사이트나 애플리케이션에서 페이지의 내용을 나누는 데 사용됩니다. 섹션 요소의 기능은 페이지의 내용을 다음과 같이 나누는 것입니다. 기사를 섹션으로 나누는 경우

2. 섹션 요소는 일반적으로 내용과 제목으로 구성됩니다. . 제목이 없는 콘텐츠에는 일반적으로 섹션 요소를 사용하지 않는 것이 좋습니다.

3. 섹션 요소는 콘텐츠에 필요한 일반적인 컨테이너 요소가 아닙니다. 직접 스타일 지정 또는 스크립트를 통해 동작 을 정의할 때 섹션 요소 대신 p를 사용하는 것이 좋습니다. 기사, 탐색, 옆 요소가 모두 충족되는 경우 특정 조건이 충족되면 섹션 요소를 사용하여 정의하지 마세요. 5. 섹션 요소의 내용은 데이터베이스에 별도로 저장하거나 워드 문서로 출력할 수 있습니다.

　<section>
　　　　<h1>section元素的</h1>标题
　　　　<p>section区块的主题部分</p>
　　</section>

HTML5

에서는 탐색 모음, 메뉴, 저작권 표시 등 모든 페이지의 하위 부분을 결합할 수 있습니다. 장식을 위해 CSS 스타일을 균일하게 사용할 수 있도록 페이지에서 통합됩니다. 마지막으로 섹션 요소 사용에 대한 금기사항을 정리하면 다음과 같습니다.

1) 섹션 요소를 스타일 설정을 위한 페이지 컨테이너로 사용하지 마세요. 이것이 바로 p 요소의 역할입니다. 2) 기사 요소, 옆 요소 또는 탐색 요소가 사용하기에 더 적합한 경우 섹션 요소를 사용하지 마십시오. 3) 제목이 없는 콘텐츠 블록에는 섹션 요소를 사용하지 마세요. 3. 둘의 차이점:

위에서도 설명했지만 둘의 차이점은 무엇인가요? 실제로 HTML5에서 기사 요소는 섹션 요소보다 독립성을 더 강조한 특별한 형태의 섹션 요소라고 볼 수 있다. 즉, 섹션 요소는 분할이나 청킹을 강조하는 반면, 기사는 독립성을 강조합니다. 구체적으로 내용이 상대적으로 독립적이고 완전한 경우에는 Article 요소를 사용하고, 내용을 여러 단락으로 나누고 싶은 경우에는 section 요소를 사용하는 것이 좋습니다. 또한 HTML5에서는 p 요소가 컨테이너가 되며 CSS 스타일을 사용할 경우 이 컨테이너에 전체 CSS 스타일을 적용할 수 있습니다.

위 내용은 HTML5 기사와 섹션의 차이점에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!