การวิเคราะห์เชิงลึกเกี่ยวกับความแตกต่างระหว่างบทความและส่วนต่างๆ ใน ​​HTML5

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

องค์ประกอบบทความแสดงถึงเนื้อหาที่สมบูรณ์และเป็นอิสระในเอกสาร หน้า หรือแอปพลิเคชันที่สามารถอ้างอิงภายนอกได้อย่างอิสระ อาจเป็นบทความในบล็อกหรือหนังสือพิมพ์ โพสต์ในฟอรัม ความคิดเห็นของผู้ใช้หรือปลั๊กอินแบบสแตนด์อโลน หรือเนื้อหาแบบสแตนด์อโลนอื่นๆ นอกเหนือจากเนื้อหาแล้ว องค์ประกอบบทความมักจะมีชื่อของตัวเอง (โดยปกติจะวางไว้ภายในองค์ประกอบส่วนหัว) และบางครั้งก็มีเชิงอรรถเป็นของตัวเอง

 <article> <header> <h1>หัวข้อ</h1> <p>วันที่เผยแพร่: <time pubdate=pubdate>2010/10/10</time></p> </header> <p>วิธีใช้บทความ </p> <footer> <p><small>ลิขสิทธิ์ @ yiiyaa.net สงวนลิขสิทธิ์</samll></p> </footer> </article>

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

รหัสที่ซ้อนกันเป็นดังนี้:

 <article> <header> <h1>วิธีใช้องค์ประกอบบทความ</h1> <p>วันที่เผยแพร่: <time pubdate=pubdate>2010/10/10</time></p> </header> <p >แท็กนี้แสดงเนื้อหาหลักของบทความทั้งหมด และองค์ประกอบส่วนด้านล่างประกอบด้วยความคิดเห็นเกี่ยวกับบทความ</p> <section> <h2>ความคิดเห็น</h2> <article> <header> <h3>เผยแพร่โดย: maizi</h3> <p><time pubdate datetime=2016-6-14>1 hour ago</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 ได้ สุดท้ายนี้ ข้อห้ามในการใช้องค์ประกอบส่วนสรุปได้ดังนี้

1) อย่าใช้องค์ประกอบส่วนเป็นคอนเทนเนอร์ของหน้าในการจัดรูปแบบ นั่นคือหน้าที่ขององค์ประกอบ p

2) หากองค์ประกอบบทความ องค์ประกอบด้านข้าง หรือองค์ประกอบการนำทาง มีความเหมาะสมมากกว่าสำหรับการใช้งาน อย่าใช้องค์ประกอบส่วน

3) อย่าใช้องค์ประกอบส่วนสำหรับบล็อกเนื้อหาที่ไม่มีชื่อเรื่อง

มีการกล่าวมากมายข้างต้น อะไรคือความแตกต่างระหว่างทั้งสอง? ในความเป็นจริง ใน HTML5 องค์ประกอบบทความถือได้ว่าเป็นองค์ประกอบประเภทพิเศษของส่วน ซึ่งเน้นความเป็นอิสระมากกว่าองค์ประกอบส่วน นั่นคือ องค์ประกอบส่วนเน้นการแบ่งส่วนหรือการแบ่งส่วน ในขณะที่บทความเน้นความเป็นอิสระ โดยเฉพาะอย่างยิ่ง หากเนื้อหาค่อนข้างเป็นอิสระและครบถ้วน คุณควรใช้องค์ประกอบ article แต่หากคุณต้องการแบ่งเนื้อหาออกเป็นหลายย่อหน้า คุณควรใช้องค์ประกอบส่วน นอกจากนี้ ใน HTML5 องค์ประกอบ p จะกลายเป็นคอนเทนเนอร์ เมื่อใช้สไตล์ CSS คุณจะสามารถใช้สไตล์ CSS โดยรวมกับคอนเทนเนอร์นี้ได้

ข้างต้นคือความแตกต่างระหว่างบทความและหัวข้อใน HTML5 ที่บรรณาธิการแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!