Làm cách nào để sử dụng đúng thẻ “section” trong HTML5?


106

Tôi đang cố gắng xây dựng một bố cục trong HTML5 và sau khi đọc một số bài báo khác nhau, tôi chỉ thấy bối rối. Tôi đang cố gắng lấy một số đầu vào về cách sử dụng nó.

Dưới đây là các biến thể mà tôi đang xem lại:

1)

<section id="content">
      <h1>Heading</h1>
      <div id="primary">
         Some text goes here...
      </div>
   </section>

Bạn có thể sử dụng thẻ section để hoạt động như một vùng chứa không?

2)

 <div id="content">
      <h1>Heading</h1>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
   </div>

Phương pháp chính xác để sử dụng <section>thẻ là gì?


Về mặt kỹ thuật, cả hai đều đúng.
Seth

9
Tôi sẽ nói rằng không có ví dụ nào có vẻ đúng ... nhưng thật khó để nói chỉ với văn bản giả và không có ngữ cảnh thực<section>là một thẻ ngữ nghĩa chứ không phải một trình bao bọc chung chung như thế <div>.
Wesley Murch

13
Bạn chắc chắn không nên có hai phần tử (phần hoặc cách khác) với cùng một id.
Sam Dutton

Câu trả lời:


107

Câu trả lời là trong thông số kỹ thuật hiện tại:

Phần tử phần đại diện cho một phần chung của tài liệu hoặc ứng dụng. Trong ngữ cảnh này, một phần là một nhóm nội dung theo chủ đề, thường có một tiêu đề.

Ví dụ về các phần sẽ là các chương, các trang được đánh dấu khác nhau trong một hộp thoại được sắp xếp theo thẻ, hoặc các phần được đánh số của một luận án. Trang chủ của một trang Web có thể được chia thành các phần để giới thiệu, các mục tin tức và thông tin liên hệ.

Các tác giả được khuyến khích sử dụng phần tử bài viết thay vì phần tử phần khi nó sẽ hợp lý để cung cấp nội dung của phần tử .

Các yếu tố phần không phải là một yếu tố container generic . Khi cần một phần tử cho mục đích tạo kiểu hoặc để thuận tiện cho việc viết script, các tác giả được khuyến khích sử dụng phần tử div để thay thế. Một nguyên tắc chung là phần tử phần chỉ thích hợp nếu nội dung của phần tử đó sẽ được liệt kê rõ ràng trong dàn bài của tài liệu .

Tài liệu tham khảo:

Cũng thấy:

Có vẻ như có rất nhiều sự nhầm lẫn về mục đích của phần tử này, nhưng một điều được thống nhất là nó không phải là một trình bao bọc chung, giống như vậy <div>. Nó nên được sử dụng cho các mục đích ngữ nghĩa, và không phải là CSS hoặc JavaScript hook (mặc dù nó chắc chắn có thể được tạo kiểu hoặc "tập lệnh").

Một ví dụ tốt hơn, theo hiểu biết của tôi, có thể trông giống như sau:

<div id="content">
  <article>
     <h2>How to use the section tag</h2>
     <section id="disclaimer">
         <h3>Disclaimer</h3>
         <p>Don't take my word for it...</p>
     </section>
     <section id="examples">
       <h3>Examples</h3>
       <p>But here's how I would do it...</p>
     </section>
     <section id="closing_notes">
       <h3>Closing Notes</h3>
       <p>Well that was fun. I wonder if the spec will change next week?</p>
     </section>
  </article>
</div>

Lưu ý rằng <div>, hoàn toàn không có ngữ nghĩa, có thể được sử dụng ở bất kỳ đâu trong tài liệu mà thông số HTML cho phép, nhưng không cần thiết.


2
Tôi không chắc div wrapper dùng để làm gì, nhưng nếu không thì đây là một câu trả lời hay.
Alohci

Trình bao bọc div lấy từ ví dụ của OP, chỉ cho thấy cách một trình bao bọc chung có thể được sử dụng một cách thích hợp cùng với các phần tử khác mà tôi đoán, nhưng tất nhiên một div sẽ hoạt động hầu như ở mọi nơi.
Wesley Murch

8
Không phải phần cũng chứa một tiêu đề (h1, h2, v.v.)?
Joey V.

1
một tiêu đề phải chứa một tiêu đề và bạn không nên sử dụng nó nếu chỉ có một phần tử trong đó.
keinabel

Ví dụ tốt. Một phần là thích hợp nếu nội dung của các phần tử sẽ được liệt kê trong dàn bài của tài liệu, vì vậy div trình bao bọc không ngữ nghĩa không phải là một phần, nhưng các phần của bài viết là các phần. Thông thường, một phần cũng sẽ có một tiêu đề.
superluminary

44

Trong trang wiki W3 về cấu trúc HTML5 , nó nói:

<section>: Được sử dụng để nhóm các bài báo khác nhau thành các mục đích hoặc chủ đề khác nhau hoặc để xác định các phần khác nhau của một bài báo.

Và sau đó hiển thị một hình ảnh mà tôi đã xóa:

nhập mô tả hình ảnh ở đây

Điều quan trọng là phải biết cách sử dụng <article>thẻ (từ cùng một liên kết W3 ở trên):

<article>có liên quan đến <section>, nhưng khác biệt rõ ràng. Trong khi đó <section>là để nhóm các phần nội dung hoặc chức năng riêng biệt, <article>là để chứa các phần nội dung độc lập riêng lẻ có liên quan, chẳng hạn như các bài đăng blog, video, hình ảnh hoặc tin tức riêng lẻ. Hãy nghĩ theo cách này - nếu bạn có một số mục nội dung, mỗi mục sẽ phù hợp để tự đọc và sẽ có ý nghĩa khi cung cấp thành các mục riêng biệt trong nguồn cấp dữ liệu RSS, thì <article>phù hợp để đánh dấu chúng.

Trong ví dụ của chúng tôi, <section id="main">chứa các mục blog. Mỗi mục nhập blog sẽ phù hợp để cung cấp như một mục trong nguồn cấp dữ liệu RSS và sẽ có ý nghĩa khi được đọc một mình, ngoài ngữ cảnh, do đó <article> hoàn hảo cho họ:

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

Đơn giản hả? Mặc dù vậy, hãy lưu ý rằng bạn cũng có thể lồng các phần bên trong các bài báo, khi làm như vậy là hợp lý. Ví dụ: nếu mỗi một trong những bài đăng blog này có cấu trúc nhất quán gồm các phần riêng biệt, thì bạn cũng có thể đặt các phần bên trong bài viết của mình. Nó có thể trông giống như sau:

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

7
Chắc chắn bạn sẽ sử dụng thẻ một tài liệu <main>thay vì <section id="main"?
Dave Everitt

2
Tôi đồng ý, sử dụng <main>sẽ là lý tưởng.
Justin

3

Sự hiểu biết của tôi là SECTION chứa một phần có tiêu đề là một phần quan trọng của "dòng chảy" của trang (không phải phần sang một bên). CÁC PHẦN sẽ là các chương, các phần được đánh số của tài liệu, v.v.

ARTICLE dành cho nội dung được cung cấp thông tin - ví dụ: bài đăng, tin bài, v.v. BÀI VIẾT và PHẦN hoàn toàn tách biệt - bạn có thể có cái này mà không có cái kia vì chúng là những trường hợp sử dụng rất khác nhau.

Một điều khác về SECTION là bạn không nên sử dụng nó nếu trang của bạn chỉ có một phần. Ngoài ra, mỗi phần phải có một tiêu đề (H1-6, HGROUP, HEADING). Các tiêu đề được "xác định phạm vi" trong phần PHẦN, vì vậy, ví dụ: nếu bạn sử dụng H1 trong trang chính (bên ngoài PHẦN) và sau đó là H1 bên trong phần, thì phần sau sẽ được coi là H2.

Các ví dụ trong thông số kỹ thuật là khá tốt tại thời điểm viết bài.

Vì vậy, trong ví dụ đầu tiên của bạn sẽ đúng nếu bạn có một số phần nội dung không thể được mô tả là ARTICLEs. (Với một điểm nhỏ là bạn sẽ không cần đến #primary DIV trừ khi bạn muốn nó cho kiểu móc - thẻ P sẽ tốt hơn).

Ví dụ thứ hai sẽ đúng nếu bạn xóa tất cả các thẻ SECTION - dữ liệu trong tài liệu đó sẽ là các bài báo, bài đăng hoặc những thứ tương tự như thế này.

Các phần không nên được sử dụng làm vùng chứa - DIV vẫn là cách sử dụng chính xác cho điều đó và bất kỳ hộp tùy chỉnh nào khác mà bạn có thể đưa ra.


2

Bạn chắc chắn có thể sử dụng thẻ phần như một vùng chứa. Nó ở đó để nhóm nội dung theo cách có ý nghĩa hơn so với div hoặc như thông số html5 nói:

Phần tử phần đại diện cho một phần chung của tài liệu hoặc ứng dụng. Trong ngữ cảnh này, một phần là một nhóm nội dung theo chủ đề, thường có một tiêu đề. http://www.w3.org/TR/html5/section.html#the-section-element


2

Phương pháp đúng là # 2. Bạn đã sử dụng thẻ phần để xác định một phần trong tài liệu của mình. Từ các thông số kỹ thuật http://www.w3.org/TR/html5/section.html :

Phần tử section không phải là một phần tử vùng chứa chung chung. Khi cần một phần tử cho mục đích tạo kiểu hoặc để thuận tiện cho việc viết tập lệnh, các tác giả được khuyến khích sử dụng phần tử div thay thế


Tôi không chắc # 2 có phải là cách sử dụng tốt nhất của thẻ này (gói <article>các) hay không, nhưng không thể thực sự phân biệt được chỉ với văn bản giả làm ví dụ và hai phần có id"chính" ...
Wesley Murch

0

điều đó chỉ sai: không phải là một trình bao bọc. Phần tử biểu thị một phần ngữ nghĩa trong nội dung của bạn để giúp xây dựng dàn ý tài liệu. Nó phải chứa một tiêu đề. Nếu bạn đang tìm kiếm một phần tử trình bao bọc trang (cho bất kỳ hương vị nào của HTML hoặc XHTML), hãy xem xét việc áp dụng các kiểu trực tiếp cho phần tử như được mô tả bởi Kroc Camen. Nếu bạn vẫn cần một phần tử bổ sung để tạo kiểu, hãy sử dụng a. Như Tiến sĩ Mike giải thích, div chưa chết và nếu không có gì khác thích hợp hơn, có thể đó là nơi bạn thực sự muốn áp dụng CSS của mình.

bạn có thể kiểm tra điều này: http://html5doctor.com/avoiding-common-html5-mistakes/

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.