콘텐츠 블록은 HTML 페이지를 논리적으로 구분하는 단위를 의미합니다. 페이지 웹사이트의 경우 탐색 메뉴, 기사 텍스트, 기사 댓글 등 각 부분을 콘텐츠 블록이라고 부를 수 있습니다.
기사 요소기사 요소는 외부에서 독립적으로 참조할 수 있는 문서, 페이지 또는 애플리케이션의 독립적이고 완전한 콘텐츠를 나타냅니다. 블로그나 신문 기사, 포럼 게시물, 사용자 댓글, 독립형 플러그인 또는 기타 독립형 콘텐츠일 수 있습니다. 콘텐츠 외에도 기사 요소에는 일반적으로 자체 제목(보통 헤더 요소 내부에 위치)이 있으며 때로는 자체 각주도 있습니다.
<article> <header> <h1>제목</h1> <p>게시일: <time pubdate=pubdate>2010/10/10</time></p> </header> <p>기사 활용 방법 </p> <footer> <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p> </footer> </article>
참고: 기사 요소는 중첩될 수 있으며 원칙적으로 내부 콘텐츠는 외부 콘텐츠와 연결되어야 합니다. 예를 들어, 블로그 게시물에서 기사에 대한 댓글은 기사 요소를 사용하여 중첩될 수 있습니다. 댓글을 표시하는 데 사용되는 기사 요소는 전체 콘텐츠를 나타내는 기사 요소에 포함됩니다.
중첩된 코드는 다음과 같습니다.
<article> <header> <h1>기사 요소 사용 방법</h1> <p>게시 날짜: <time pubdate=pubdate>2010/10/10</time></p> </header> <p >This 태그는 전체 기사의 주요 내용을 표시하며, 아래 섹션 요소에는 기사에 대한 댓글이 포함됩니다.</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>게시자: Xiaoni</h3> <p><time pubdate datetime=2016-6-14T:21-26:00>1시간 전</ / time></p> </header> <p>이 기사는 매우 훌륭합니다. 기사에 대해 자세히 설명되어 있습니다.</p> </article> </section></article>
샘플 콘텐츠는 여러 부분으로 나누어져 있으며, 기사 제목은 헤더 요소에 배치되고, 기사 텍스트는 헤더 요소 뒤의 p 요소에 배치되며, 섹션 요소는 텍스트와 댓글을 구분합니다(차단 요소입니다). 페이지의 콘텐츠를 나누는 데 사용됨), 섹션 댓글의 내용은 요소에 포함됩니다. 댓글에 있는 각 사람의 댓글은 상대적으로 독립적이고 완전하므로 모두 기사 요소를 사용합니다. 댓글의 기사 요소는 내용 부분으로 나눌 수 있습니다. 헤더 요소와 p 요소에 각각 배치됩니다.
1. 섹션 요소는 웹사이트나 애플리케이션의 페이지 콘텐츠를 나누는 데 사용됩니다. 섹션 요소의 기능은 페이지의 콘텐츠를 섹션으로 나누거나 기사를 섹션으로 나누는 것입니다.
2. 섹션 요소는 일반적으로 내용과 제목으로 구성됩니다. 일반적으로 제목이 없는 콘텐츠에는 섹션 요소를 사용하지 않는 것이 좋습니다.
3. 섹션 요소는 일반적인 컨테이너 요소가 아닙니다. 콘텐츠에 직접 스타일을 지정하거나 스크립트를 통해 동작을 정의해야 하는 경우 섹션 요소 대신 p를 사용하는 것이 좋습니다.
4. 기사, 탐색 및 측면 요소가 모두 특정 조건을 충족하는 경우 이를 정의하기 위해 섹션 요소를 사용하지 마십시오.
5. 섹션 요소의 내용은 데이터베이스에 별도로 저장하거나 워드 문서로 출력할 수 있습니다.
<section> <h1>섹션 요소의 </h1> 제목 <p>섹션 블록의 주제 부분</p> </section>
HTML5에서는 탐색 모음, 메뉴, 저작권 표시 등 페이지의 모든 하위 부분을 하나의 통합 페이지에 포함하여 CSS 스타일을 사용하여 꾸밀 수 있습니다. 마지막으로 section 요소 사용에 대한 금기 사항을 요약하면 다음과 같습니다.
1) 섹션 요소를 스타일 지정을 위한 페이지 컨테이너로 사용하지 마십시오. 이것이 p 요소의 작업입니다.
2) 기사 요소, 옆 요소 또는 탐색 요소가 사용하기에 더 적합한 경우 섹션 요소를 사용하지 마십시오.
3) 제목이 없는 콘텐츠 블록에는 섹션 요소를 사용하지 마세요.
3. 둘 사이의 차이점은 다음과 같습니다.위에서 너무 많이 언급했는데 둘의 차이점은 무엇입니까? 실제로 HTML5에서 기사 요소는 섹션 요소보다 독립성을 더 강조한 특별한 형태의 섹션 요소라고 볼 수 있다. 즉, 섹션 요소는 분할이나 청킹을 강조하는 반면, 기사는 독립성을 강조합니다. 구체적으로, 내용이 상대적으로 독립적이고 완전한 경우에는 Article 요소를 사용하고, 내용을 여러 문단으로 나누고 싶은 경우에는 section 요소를 사용하는 것이 좋습니다. 또한 HTML5에서는 p 요소가 컨테이너가 되며 CSS 스타일을 사용할 경우 이 컨테이너에 전체 CSS 스타일을 적용할 수 있습니다.
요약위 내용은 편집자가 소개한 HTML5의 기사와 섹션의 차이점입니다. 궁금한 점이 있으시면 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!