วิธีใช้แท็ก“ section” ใน HTML5 อย่างถูกต้อง?

ฉันกำลังพยายามสร้างเลย์เอาต์ใน HTML5 และหลังจากอ่านบทความต่างๆแล้วฉันก็สับสน ฉันกำลังพยายามหาข้อมูลว่าควรใช้อย่างไร

ด้านล่างนี้คือรูปแบบที่ฉันจะกลับไปกลับมา:

1)

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

คุณสามารถใช้แท็กส่วนเพื่อทำหน้าที่เหมือนคอนเทนเนอร์ได้หรือไม่

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>

วิธีที่ถูกต้องในการใช้<section>แท็กคืออะไร?

คำตอบอยู่ในข้อมูลจำเพาะปัจจุบัน:

องค์ประกอบส่วนแสดงถึงส่วนทั่วไปของเอกสารหรือแอปพลิเคชัน ส่วนในบริบทนี้คือการจัดกลุ่มเนื้อหาเฉพาะเรื่องโดยทั่วไปจะมีส่วนหัว

ตัวอย่างของส่วนต่างๆจะเป็นบทหน้าแท็บต่างๆในกล่องโต้ตอบแบบแท็บหรือส่วนที่มีหมายเลขของวิทยานิพนธ์ โฮมเพจของเว็บไซต์สามารถแบ่งออกเป็นส่วน ๆ สำหรับบทนำรายการข่าวสารและข้อมูลการติดต่อ

ผู้เขียนมีกำลังใจที่จะใช้องค์ประกอบบทความแทนขององค์ประกอบส่วนเมื่อมันจะทำให้รู้สึกถึงการจัดกลุ่มเนื้อหาขององค์ประกอบ

องค์ประกอบส่วนไม่ได้เป็นองค์ประกอบภาชนะทั่วไป เมื่อจำเป็นต้องใช้องค์ประกอบเพื่อวัตถุประสงค์ในการจัดแต่งทรงผมหรือเพื่อความสะดวกในการเขียนสคริปต์ผู้เขียนควรใช้องค์ประกอบ div แทน กฎทั่วไปคือการที่องค์ประกอบส่วนมีความเหมาะสมเฉพาะในกรณีที่เนื้อหาขององค์ประกอบจะได้รับการระบุไว้อย่างชัดเจนในโครงร่างของเอกสาร

อ้างอิง:

• http://www.w3.org/TR/html5/sections.html#the-section-element
• http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

ดูเพิ่มเติมที่:

• http://html5doctor.com/the-section-element/
• http://www.impressivewebs.com/html5-section/

ดูเหมือนว่าจะมีความสับสนมากมายเกี่ยวกับจุดประสงค์ขององค์ประกอบนี้ แต่สิ่งหนึ่งที่ตกลงกันคือมันไม่ใช่กระดาษห่อหุ้มทั่วไปอย่างที่<div>เป็นอยู่ ควรใช้เพื่อจุดประสงค์เชิงความหมายไม่ใช่ CSS หรือ JavaScript hook (แม้ว่าจะสามารถกำหนดสไตล์หรือ "สคริปต์" ได้ก็ตาม)

ตัวอย่างที่ดีกว่าจากความเข้าใจของฉันอาจมีลักษณะดังนี้:

<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>

โปรดทราบว่า<div>การไม่ใช้ความหมายโดยสิ้นเชิงสามารถใช้ได้ทุกที่ในเอกสารที่ข้อมูลจำเพาะ HTML อนุญาต แต่ไม่จำเป็น

ในหน้าW3 wiki เกี่ยวกับการจัดโครงสร้าง HTML5ระบุว่า:

<section>: ใช้เพื่อจัดกลุ่มบทความต่างๆตามวัตถุประสงค์หรือหัวเรื่องที่ต่างกันหรือกำหนดส่วนต่างๆของบทความเดียว

จากนั้นจะแสดงภาพที่ฉันล้างข้อมูล:

สิ่งสำคัญคือต้องรู้วิธีใช้<article>แท็ก (จากลิงก์ W3 เดียวกันด้านบน):

<article>เกี่ยวข้องกับ<section>แต่แตกต่างกันอย่างชัดเจน ในขณะที่<section>มีไว้สำหรับการจัดกลุ่มเนื้อหาหรือฟังก์ชันการทำงานที่แตกต่างกัน แต่<article>มีไว้สำหรับบรรจุเนื้อหาเดี่ยว ๆ ที่เกี่ยวข้องเช่นบล็อกโพสต์วิดีโอรูปภาพหรือรายการข่าว ลองคิดแบบนี้ - หากคุณมีเนื้อหาจำนวนหนึ่งซึ่งแต่ละรายการจะเหมาะสำหรับการอ่านด้วยตนเองและเหมาะสมที่จะรวมเป็นรายการแยกต่างหากในฟีด RSS ดังนั้น<article>จึงเหมาะสำหรับการทำเครื่องหมาย

ในตัวอย่างของเรา<section id="main">ประกอบด้วยรายการบล็อก รายการบล็อกแต่ละรายการจะเหมาะสำหรับการรวมเป็นรายการในฟีด RSS และจะสมเหตุสมผลเมื่ออ่านด้วยตัวเองโดยไม่อยู่ในบริบทดังนั้นจึง <article>เหมาะสำหรับพวกเขา:

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

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

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

ง่ายๆเหรอ? โปรดทราบว่าคุณสามารถซ้อนส่วนต่างๆไว้ในบทความได้ด้วยซึ่งเป็นเรื่องที่ควรทำ ตัวอย่างเช่นหากแต่ละบทความในบล็อกเหล่านี้มีโครงสร้างของส่วนที่แตกต่างกันที่สอดคล้องกันคุณสามารถใส่ส่วนต่างๆไว้ในบทความของคุณได้เช่นกัน อาจมีลักษณะดังนี้:

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

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

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

ความเข้าใจของฉันคือ SECTION มีส่วนที่มีส่วนหัวซึ่งเป็นส่วนสำคัญของ "การไหล" ของหน้าเว็บ (ไม่ใช่ด้านข้าง) ส่วนจะเป็นบทส่วนที่มีหมายเลขของเอกสารและอื่น ๆ

ARTICLE มีไว้สำหรับเนื้อหาที่รวมเข้าด้วยกันเช่นโพสต์เรื่องราวข่าวสารเป็นต้น ARTICLE และ SECTION แยกจากกันโดยสิ้นเชิง - คุณสามารถมีได้โดยไม่ต้องมีส่วนอื่นเนื่องจากเป็นกรณีการใช้งานที่แตกต่างกันมาก

อีกสิ่งหนึ่งเกี่ยวกับ SECTION คือคุณไม่ควรใช้หากเพจของคุณมีเพียงส่วนเดียว นอกจากนี้แต่ละส่วนจะต้องมีหัวเรื่อง (H1-6, HGROUP, HEADING) หัวเรื่องจะถูก "กำหนดขอบเขต" ด้วย SECTION ดังนั้นเช่นหากคุณใช้ H1 ในหน้าหลัก (นอก SECTION) และ H1 ภายในส่วนนั้นจะถือว่าเป็น H2

ตัวอย่างในข้อมูลจำเพาะนั้นค่อนข้างดีในขณะเขียน

ดังนั้นในตัวอย่างแรกของคุณจะถูกต้องหากคุณมีเนื้อหาหลายส่วนซึ่งไม่สามารถอธิบายเป็น ARTICLE ได้ (ด้วยจุดเล็กน้อยที่คุณไม่จำเป็นต้องใช้ #primary DIV เว้นแต่คุณต้องการให้มีสไตล์ตะขอ - แท็ก P จะดีกว่า)

ตัวอย่างที่สองจะถูกต้องหากคุณลบแท็ก SECTION ทั้งหมด - ข้อมูลในเอกสารนั้นจะเป็นบทความโพสต์หรืออะไรทำนองนี้

ไม่ควรใช้ส่วนเป็นคอนเทนเนอร์ - DIV ยังคงเป็นการใช้งานที่ถูกต้องสำหรับสิ่งนั้นและกล่องแบบกำหนดเองอื่น ๆ ที่คุณอาจเกิดขึ้น

คุณสามารถใช้แท็กหัวข้อเป็นคอนเทนเนอร์ได้อย่างแน่นอน มีไว้เพื่อจัดกลุ่มเนื้อหาด้วยวิธีที่มีนัยสำคัญทางความหมายมากกว่าการใช้ div หรือตามข้อกำหนด html5 กล่าว

องค์ประกอบส่วนแสดงถึงส่วนทั่วไปของเอกสารหรือแอปพลิเคชัน ส่วนในบริบทนี้คือการจัดกลุ่มเนื้อหาเฉพาะเรื่องโดยทั่วไปจะมีส่วนหัว http://www.w3.org/TR/html5/sections.html#the-section-element

วิธีที่ถูกต้องคือ # 2 คุณใช้แท็กส่วนเพื่อกำหนดส่วนของเอกสารของคุณ จากข้อกำหนดhttp://www.w3.org/TR/html5/sections.html :

องค์ประกอบส่วนไม่ใช่องค์ประกอบคอนเทนเนอร์ทั่วไป เมื่อต้องการองค์ประกอบเพื่อวัตถุประสงค์ในการจัดแต่งทรงผมหรือเพื่อความสะดวกในการเขียนสคริปต์ผู้เขียนควรใช้องค์ประกอบ div แทน

นั่นผิดเพียง: ไม่ใช่กระดาษห่อหุ้ม องค์ประกอบหมายถึงส่วนความหมายของเนื้อหาของคุณเพื่อช่วยสร้างโครงร่างเอกสาร ควรมีหัวเรื่อง หากคุณกำลังมองหาองค์ประกอบของกระดาษห่อหน้า (สำหรับ HTML หรือ XHTML ทุกรสชาติ) ให้ลองใช้สไตล์กับองค์ประกอบโดยตรงตามที่ Kroc Camen อธิบายไว้ หากคุณยังต้องการองค์ประกอบเพิ่มเติมสำหรับการจัดแต่งทรงผมให้ใช้ไฟล์. ดังที่ดร. ไมค์อธิบายว่า div ยังไม่ตายและหากไม่มีสิ่งอื่นใดที่เหมาะสมกว่านี้อาจเป็นที่ที่คุณต้องการใช้ CSS ของคุณ

คุณสามารถตรวจสอบสิ่งนี้: http://html5doctor.com/avoiding-common-html5-mistakes/