ความคิดเห็น: HTML5 นำชุดขององค์ประกอบใหม่องค์ประกอบใหม่สององค์ประกอบต่อไปนี้: บทความและส่วนค่อนข้างสับสน เรามักจะพูดถึงสถานการณ์ที่เราควรใช้องค์ประกอบเหล่านี้ ต่อไปเราจะแนะนำแอปพลิเคชันของทั้งสอง ผู้ที่สนใจสามารถอ้างถึงได้
HTML5 นำชุดขององค์ประกอบใหม่และจะถูกนำมาใช้อย่างกว้างขวางในอนาคต อย่างไรก็ตามองค์ประกอบบางอย่างจะสับสนได้ง่ายเมื่อใช้รวมถึงองค์ประกอบใหม่สององค์ประกอบต่อไปนี้: <sarticle> และ <section>
คำถามที่พบบ่อยที่สุดคือ: ภายใต้สถานการณ์ใดที่เราควรใช้องค์ประกอบเหล่านี้? และเราควรใช้องค์ประกอบเหล่านี้อย่างถูกต้องอย่างไร?
องค์ประกอบส่วน
นี่คือองค์ประกอบที่คลุมเครือที่สุด อะไรคือความแตกต่างระหว่างมันกับองค์ประกอบ <div>? เราใช้ <div> เพื่อแบ่งย่อหน้าดังนั้นยกเว้น <div> เราจะใช้องค์ประกอบนี้เมื่อใด เราอ้างถึงเอกสารอย่างเป็นทางการเพื่อแสดงให้เห็น ตามเอกสาร WHATWG คำอธิบายต่อไปนี้ทำขึ้นสำหรับองค์ประกอบ <section>:
<section> องค์ประกอบแสดงถึงย่อหน้าทั่วไปในเอกสารหรือแอปพลิเคชัน - whatwg
จากคำอธิบายเราจะเห็นได้ว่าฟังก์ชั่นขององค์ประกอบ <section> คือการแบ่งส่วนซึ่งคล้ายกับ <div> มากหรือน้อย แต่มันก็ยังมีกรณีพิเศษ ในเอกสารมีการเพิ่มคำสั่งพิเศษ:
เมื่อมีการใช้องค์ประกอบเพื่อสไตล์หรือเพื่อความสะดวกในการเขียนสคริปต์เราขอแนะนำให้ผู้เขียนใช้ <div> องค์ประกอบ <section> เหมาะสำหรับเมื่อเนื้อหาขององค์ประกอบจำเป็นต้องแสดงรายการอย่างชัดเจน - whatwg
จากจุดนี้เราสามารถสรุปสองจุดต่อไปนี้:
ก่อนอื่นแม้ว่าองค์ประกอบส่วนคือการออกแบบทางเทคนิคเรายังคงแนะนำให้ใช้องค์ประกอบ DIV เมื่อมีสไตล์หรือสคริปต์ที่ซับซ้อน
ประการที่สองคล้ายกับองค์ประกอบ <li> องค์ประกอบส่วนที่ใช้เพื่อระบุเนื้อหา
ดังนั้นในตัวอย่างที่เป็นจริงเหตุผลในการใช้องค์ประกอบ <section> คือการจัดโครงสร้างเนื้อหาของบล็อกรหัสมีดังนี้:
<div>
<section>
<h2> ชื่อโพสต์บล็อก </h2>
<p> ไอศครีมทาร์ตผง Jelly-O
Gummies ช็อคโกแลตเค้กไอศครีมคุกกี้ Halvah Tiramisu Jelly-O. </p>
</section>
<section>
<h2> ชื่อโพสต์บล็อก </h2>
<p> ไอศครีมทาร์ตผง Jelly-O
Gummies ช็อคโกแลตเค้กไอศครีมคุกกี้ Halvah Tiramisu Jelly-O. </p>
</section>
<section>
<h2> ชื่อโพสต์บล็อก </h2>
<p> ไอศครีมทาร์ตผง Jelly-O
Gummies ช็อคโกแลตเค้กไอศครีมคุกกี้ Halvah Tiramisu Jelly-O. </p>
</section>
</div>
นี่เป็นเพียงตัวอย่างและองค์ประกอบ <section> สามารถใช้เพื่อวัตถุประสงค์อื่นได้
องค์ประกอบบทความ
จากชื่อมันได้ตีความตัวเองดีอยู่แล้ว แต่เรายังต้องดูว่ามีการอธิบายไว้ในเอกสารอย่างเป็นทางการอย่างไร:
ส่วนที่แยกต่างหากในเอกสารหน้าแอปพลิเคชันหรือเว็บไซต์และโดยทั่วไปสามารถจัดสรรหรือนำกลับมาใช้ใหม่ได้อย่างอิสระเช่นในสิ่งพิมพ์ นี่อาจเป็นโพสต์ฟอรัมนิตยสารหรือข่าวรายการบล็อกความคิดเห็นที่ผู้ใช้ส่งไปวิดเจ็ตแบบโต้ตอบหรือวิดเจ็ตหรือเนื้อหาสำหรับโครงการสแตนด์อโลนอื่น ๆ
จากคำอธิบายข้างต้นเราสามารถสรุปได้ว่าองค์ประกอบ <บทความ> ถูกทุ่มเทให้กับบทความที่มีโครงสร้างโดยเฉพาะอย่างยิ่งสิ่งที่เราต้องการเผยแพร่เช่นบล็อกเนื้อหาหน้าหรือโพสต์ฟอรัม
ตัวอย่างต่อไปนี้แสดงวิธีการสร้างโพสต์บล็อกโดยใช้ <Saticant>
<บทความ>
<ส่วนหัว>
<H1> นี่คือชื่อโพสต์บล็อก </h1>
<div>
<ul>
<li> ชื่อผู้แต่ง </li>
<li> บันทึกในหมวดหมู่ </li>
</ul>
</div>
</header>
<div>
Sweet Roll Halvah Biscuit Toffee Liquorice Tart พุดดิ้งงางา
Biscuit Powder Jelly-O Fruitcake Faworki Chocolate Bar พุดดิ้งข้าวโอ๊ต
เค้ก tootsie ม้วนงา snaps lollipop ขิงขนมปัง Bonbon คนขี้เกียจ
Halvah Gummies Danish Biscuit ใช้ขนมปัง Gingerbread Jelly-O
</div>
</บทความ>
นอกจากนี้องค์ประกอบ <Saticor> สามารถรวมกับองค์ประกอบส่วน เมื่อจำเป็นคุณสามารถใช้องค์ประกอบ <section> เพื่อแบ่งบทความออกเป็นหลายย่อหน้าดังที่แสดงในตัวอย่างต่อไปนี้
<บทความ>
<ส่วนหัว>
<H1> นี่คือชื่อโพสต์บล็อก </h1>
<div>
<ul>
<li> ชื่อผู้แต่ง </li>
<li> บันทึกในหมวดหมู่ </li>
</ul>
</div>
</header>
<div>
<section>
<H2> นี่คือหัวเรื่องย่อย </h2>
Sweet Roll Halvah Biscuit Toffee Liquorice Tart พุดดิ้งงางา
Biscuit Powder Jelly-O Fruitcake Faworki Chocolate Bar เค้กข้าวโอ๊ตพุดดิ้ง
Tootsie Roll งาสแน็ปลอมป็อปขิง Bonbon Gummies Halvah
Gummies Danish Biscuit ใช้ขนมปัง Gingerbread Jelly-O
</section>
<section>
<H3> นี่เป็นอีกหัวย่อย </h3>
ท็อปปิ้งชีสเค้กพายหวานแครอทเค้กหวานม้วน Gummi Bears Lemon Drops
Toffee Sesame snaps ทาร์ต topping chupa chups แอปเปิ้ลพาย gummies ช็อคโกแลตเวเฟอร์
เค้ก. Sugar Plum Chocolate Bar ท็อปปิ้งไอศกรีมเค้กเค้กเดนมาร์ก Bonbon
ชีสเค้ก Gummi Bears Dragée Jujubes DragéeDragée Brownie Biscuit บิสกิต ผงครัวซองต์เจลลี่ถั่ว
</section>
</div>
</บทความ>
สรุป
ตามที่คาดการณ์ไว้โดยผู้ก่อตั้ง World Wide Web และกรรมการของ W3C องค์ประกอบใหม่ทั้งหมดที่สร้างโดย HTML5 มีวัตถุประสงค์เพื่อให้โครงสร้างเครือข่ายมีความหมายมากขึ้น ยังคงมีการถกเถียงกันระหว่างนักพัฒนาเว็บและนักออกแบบวิธีการใช้องค์ประกอบเหล่านี้อย่างถูกต้อง
ไม่ว่าจะเกิดอะไรขึ้นอย่าสับสนในมุมมอง ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้ตราบใดที่มันเป็นสถานการณ์ที่สมเหตุสมผลและคุณจะเห็นว่าการใช้มันทำให้โครงสร้างมีความหมายโปรดใช้มัน