ส่วนเอกสารส่วนของร่างกายมีเนื้อหาที่ผู้เข้าชมสามารถมองเห็นได้ เอกสาร HTML แบบดั้งเดิมมักจะจัดโครงสร้างเอกสารผ่านองค์ประกอบ DIV และควบคู่ไปกับตารางสไตล์ที่เหมาะสม อย่างไรก็ตามปัญหาของ DIV คือการขาดข้อมูลความหมาย โดยเฉพาะอย่างยิ่งหากโครงสร้างเนื้อเยื่อของหน้า HTML ไม่ดีมันจะทำให้เกิดความสับสนได้อย่างง่ายดาย ในเรื่องนี้องค์ประกอบความหมายจำนวนมากจะถูกเพิ่มเข้าไปใน HTML5 เพื่อแทนที่องค์ประกอบ DIV และความหมายและการนำเสนอแยกต่างหาก
องค์ประกอบความหมายทั้งหมดมีลักษณะสำคัญ: พวกเขาไม่ได้ทำอะไรเลยพวกเขามีผลกระทบเพียงเล็กน้อยต่อเนื้อหาที่มีต่อลักษณะที่ปรากฏและยังไม่มีผลเลย มีสาเหตุหลายประการสำหรับการดำรงอยู่ขององค์ประกอบความหมาย:
1) ง่ายต่อการปรับเปลี่ยนและบำรุงรักษา ผ่านองค์ประกอบความหมายของ HTML5 ข้อมูลที่มีโครงสร้างเพิ่มเติมสามารถถ่ายทอดได้ซึ่งทำให้ผู้คนเข้าใจรูปแบบโดยรวมของเอกสารและบทบาทของบล็อกที่แตกต่างกัน
2) ไม่ใช่ผู้สังเกตการณ์ ชุดรูปแบบที่สำคัญของการออกแบบเว็บที่ทันสมัยคือการอนุญาตให้ทุกคนเข้าถึงหน้าเว็บโดยไม่มีอุปสรรคนั่นคือคนที่ใช้เครื่องอ่านหน้าจอและเครื่องมือเสริมอื่น ๆ สามารถนำทางได้อย่างอิสระบนหน้าเว็บ
3) การเพิ่มประสิทธิภาพกลไกค้นหา การใช้ HTML5 ช่วยให้เครื่องมือค้นหาเข้าใจเว็บไซต์ของคุณได้ดีขึ้นและอนุญาตให้พวกเขารวบรวมข้อมูลเพิ่มเติมเกี่ยวกับหน้าดัชนีของพวกเขา
4) ฟังก์ชั่นในอนาคต เบราว์เซอร์ใหม่และเครื่องมือแก้ไขเว็บจะใช้องค์ประกอบความหมายในอนาคตอย่างแน่นอน ตัวอย่างเช่น: ส่วนหลักของเอกสารถูกนำเสนอ
สิ่งที่สำคัญที่สุดคือถ้าคุณใช้องค์ประกอบความหมายอย่างถูกต้องคุณสามารถสร้างโครงสร้างหน้าเว็บที่ชัดเจนขึ้นและคุณสามารถปรับให้เข้ากับแนวโน้มการพัฒนาของเบราว์เซอร์ในอนาคตและเครื่องมือออกแบบเว็บ ต่อไปนี้จะแนะนำองค์ประกอบความหมายสำหรับโครงสร้างเอกสารขององค์กรก่อนอื่นใช้ตัวอย่างเพื่อทำความเข้าใจโครงสร้างเอกสารทั่วไปของ HTML5
โครงสร้างเอกสาร HTML5หน้า HTML เก่าใช้องค์ประกอบ DIV ควบคู่ไปกับตารางสไตล์ที่เหมาะสม แต่ปัญหาขององค์ประกอบ DIV คือมันไม่ได้สะท้อนข้อมูลใด ๆ ที่เกี่ยวข้องกับหน้า หน้า HTML5 คือการแทนที่องค์ประกอบ DIV เหล่านี้ด้วยองค์ประกอบความหมายเชิงพรรณนา ตัวอย่างต่อไปนี้มีองค์ประกอบความหมายหลักที่ใช้ใน HTML5 เพื่ออธิบายโครงสร้างเอกสาร
<body> <ส่วนหัว> <Hgroup> <h1> สิ่งที่ฉันชอบ </h1> <h2> โดย Adam Freeman </h2> </hgroup> > </address> <av> <h1> เนื้อหา </h1> <li> <a href =#fruitsilike> ผลไม้ที่ฉันชอบ </a> </li> <ul> <li> <a href =#มากกว่า เพิ่มเติมจาก </a> </li></ul> <li> <a href =#กิจกรรมที่ฉันชอบ </a> </li> <li> <li> <li> <li> <li> <li > <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <ul> <li> <li> <li> <ul > <li> <li> <li> <li> <a href =#tritypes> ชนิดของไตรกีฬา </a> </li> <li> <a href =#mytri> ประเภทของไตรกีฬาที่ฉันตั้งเป้าหมาย /a> </li></ul></ul> </av> </header> <main Room = main> <atadicle> <ส่วนหัว> ...... </header> > เหตุใดจึงมีสุขภาพดี </h1> <section> ที่นี่สามเหตุผลที่ทุกคนควรกินผลไม้มากขึ้น: <ol> <li> ผลไม้มีวิตามินจำนวนมาก </li> <li> ผลไม้เป็นแหล่งของเส้นใย </li> <li> ผลไม้ประกอบด้วย W callies </li> </ol> <section> << ส่วน> <p> ฉันชอบว่ายน้ำปั่นจักรยานและวิ่ง /p> <summary> ชนิดของไตรกีฬา </summary> มีไตรกีฬาชนิดต่าง ๆ , Lympic และอื่น ๆ Li> <li> รอบ 40 กม. </li> <li> รัน 10km </li> </ol> </details> </section> </บทความ> </main> <av> ข้อมูลเพิ่มเติม: <a href = http: // fruit .org> เรียนรู้เพิ่มเติมเกี่ยวกับผลไม้ </a> <a href = http://triathlon.org> เรียนรู้เพิ่มเติมเกี่ยวกับ trithlons </a> </av> <foloter id = mainfooter> © 2011 ฟรีแมน
เอกสารข้างต้นมีองค์ประกอบ HTML5 จำนวนมาก
ชื่อHTML กำหนดระบบองค์ประกอบที่มีชื่อว่าจาก H1 ถึง H6 และ H1 นั้นสูงที่สุด ชื่อของระดับเดียวกันมักจะใช้เพื่อแบ่งเนื้อหาออกเป็นหลายส่วนแต่ละส่วนของธีมหนึ่ง ชื่อเรื่องในทุกระดับมักใช้เพื่อแสดงทุกด้านของธีมเดียวกัน พวกเขารวมกันเป็นโครงร่างของเอกสารเพื่อให้ผู้ใช้สามารถเข้าใจการดูแลและโครงสร้างของพวกเขาในตอนแรกตราบเท่าที่พวกเขาเรียกดูชื่อของเอกสารและผู้ใช้สามารถนำทางไปยังเนื้อหาที่น่าสนใจผ่านระบบชื่อเรื่องได้อย่างรวดเร็ว
<body> <h1> ผลไม้ที่ฉันชอบ </h1> ...... </body>คำบรรยาย
องค์ประกอบ HGroup สามารถใช้เป็นการประมวลผลโดยรวม (หากไม่ได้ใช้องค์ประกอบ HGroup ชื่อหลักและคำบรรยายจะถูกใช้เป็นสองชื่อและหลังจากใช้ HGroup ชื่อและคำบรรยายจะได้รับการปฏิบัติเป็นชื่อ) เพื่อหลีกเลี่ยงโครงร่างของ รบกวนเอกสาร HTML
<body> <Hgroup> <H1> ผลไม้ที่ฉันชอบ </h1> <h2> ฉันเรียนรู้ที่จะรักส้ม </h2> </hgroup> ...... </body> </body> </body >
ที่นี่ฉันเรียนรู้ที่จะรักส้มมีอยู่ในรูปแบบย่อยของผลไม้ที่ฉันชอบ
พื้นที่หลักของหน้ามาร์คโดยปกติจะมีเพียงส่วนหนึ่งของหน้าเว็บที่แสดงเนื้อหาหลัก
<body> ...... <บทบาทหลัก = หลัก> <อาร์ทิเคิล> ...... </บทความ> </main> ...... </body>
Role = Main สามารถช่วยพื้นที่หลักของหน้าการวางตำแหน่งตัวอ่านหน้าจอ
สร้างบทความองค์ประกอบของบทความแสดงถึงเนื้อหาอิสระในองค์ประกอบ HTML บทความสามารถซ้อนกันได้ในบทความอื่น หน้าหนึ่งสามารถมีองค์ประกอบหลายบทความแต่ละบทความสามารถเกิดขึ้นได้อย่างอิสระและบทความหนึ่งสามารถมีองค์ประกอบหนึ่งส่วนขึ้นไป (ดูส่วนถัดไป)
<body> ...... <บทบาทหลัก = main> <atadicle> <ส่วนหัว> ...... </header> <side> ... </side> <section> ... ... </section> </บทความ> <อาร์ทเทิร์น <Artader> ...... </header> <side> ...... </side> <section> .../ส่วน> </บทความ> .. </main> ...... </body>ส่วน
องค์ประกอบส่วนจะถูกเพิ่ม HTML5 ใหม่เพื่อแสดงส่วนในเอกสาร ไม่มีข้อกำหนดที่ชัดเจนในการใช้องค์ประกอบส่วน แต่โดยปกติแล้วควรใช้องค์ประกอบส่วนเพื่อรวมไว้ในที่ควรรวมอยู่ในโครงร่างเอกสารหรือไดเรกทอรี ส่วนสามารถเป็นของบทความบางอย่างและบทความสามารถมีหนึ่งส่วนขึ้นไป องค์ประกอบส่วนมักจะมีหนึ่งหรือมากกว่าหนึ่งย่อหน้าและหนึ่งชื่อ แต่ไม่จำเป็นต้องตั้งชื่อ
<body> <ส่วน <hgroup> <H1> ผลไม้ที่ฉันชอบ </h1> <h2> ฉันเรียนรู้ที่จะรักส้ม </h2> </hgroup> ฉันชอบแอปเปิ้ลและส้ม , มะม่วง, เชอร์รี่, แอปริคอต, ลูกพลัม, ลูกพีชและองุ่น
ด้านบนกำหนด 3 ส่วน, เลเยอร์ซ้อน, ชื่อของแต่ละส่วนคือ H1 อย่างไรก็ตามในเบราว์เซอร์ที่แตกต่างกันการปรากฏตัวเริ่มต้นของโครงสร้างลำดับชั้นของส่วนจะแตกต่างกันและปัญหานี้สามารถแก้ไขได้โดยการสร้างสไตล์ที่กำหนดเอง ความแตกต่างระหว่างส่วนและบทความคือส่วนนั้นมีการจัดระเบียบมากขึ้นและมีโครงสร้างในสาระสำคัญและสามารถถือได้ว่าเป็นย่อหน้าอิสระในขณะที่บทความแสดงถึงภาชนะบรรจุที่มีอยู่
ก่อนและหางองค์ประกอบส่วนหัวแสดงส่วนแรกซึ่งอาจรวมถึงส่วนหัวและโลโก้ องค์ประกอบส่วนหัวมักจะมีองค์ประกอบชื่อหรือองค์ประกอบ Hgroup และยังสามารถมีองค์ประกอบการนำทางของส่วนนี้ หน้าสามารถมีจำนวนองค์ประกอบส่วนหัวโดยพลการและความหมายของพวกเขาอาจแตกต่างกันไปตามบริบทของมัน
องค์ประกอบ FOOS แสดงถึงหางของส่วนซึ่งมักจะมีข้อมูลสรุปของส่วนและยังสามารถรวมถึงการแนะนำผู้เขียนข้อมูลลิขสิทธิ์ลิงก์ไปยังเนื้อหาที่เกี่ยวข้องโลโก้และข้อความที่ได้รับการยกเว้น
<body> <ส่วนหัว> <Hgroup> <h1> สิ่งที่ฉันชอบ </h1> <h2> โดย Adam Freeman </h2> </hgroup> </header> /h1> <h2> ฉันเรียนรู้ที่จะรัก Citrus </h2> </hgroup> </header> ได้อย่างไร > ...... <ส่วน> <fooler id = mainfooter> © 2011, Adam Freeman
ตัวอย่างนี้กำหนดองค์ประกอบส่วนหัว 3 องค์ประกอบ องค์ประกอบส่วนหัวขององค์ประกอบร่างกายเป็นเอกสารแรกของเอกสารทั้งหมด
หมายเหตุ: คุณไม่สามารถซ้อนกันกับส่วนหัวหรือส่วนท้ายอื่นในส่วนท้ายและไม่สามารถซ้อนกันในส่วนหัวหรือองค์ประกอบที่อยู่
พื้นที่นำทางองค์ประกอบ NAV เป็นตัวแทนของพื้นที่การนำทางในเอกสารซึ่งมีลิงก์ไปยังส่วนอื่น ๆ ของหน้าอื่น ๆ หรือส่วนอื่น ๆ ของหน้าเดียวกัน ไม่จำเป็นต้องมีลิงก์ทั้งหมดในองค์ประกอบ NAV
<body> <ส่วนหัว> <Hgroup> <h1> สิ่งที่ฉันชอบ </h1> <h2> โดย Adam Freeman </h2> </hgroup> <av> <h1> เนื้อหา </h1> <ul> <li> <a href =#fruitsilike> ผลไม้ที่ฉันชอบ </a> </li> <ul> <li> <a href =#morefruit> ผลไม้เพิ่มเติม </a> </li></ul> <li> <a HREF =#กิจกรรม> กิจกรรมที่ฉันชอบ </a> </li> <li> <a href =#tritypes> triathlon ประเภท </a> </li> <li> <a href =#mytri> ไตรกีฬาฉันตั้งเป้าหมายสำหรับ </a> </li></ul></ul> </av> </header> <section> ...... </section> <section> .. ... . > </av> <footer id = mainfooter> ...... </footer> </body>
มีการใช้องค์ประกอบ NAV สองตัวที่นี่
ระวังอย่าใส่ลิงก์ทั้งหมดในบล็อก NAV โดยปกติแล้ว NAV ควรใช้เฉพาะในพื้นที่การนำทางที่ใหญ่ที่สุดและสำคัญที่สุดในหน้า ตัวอย่างเช่นการจัดทำเอกสารที่ให้ไว้ข้างต้นเป็นสิ่งจำเป็นในการวางไว้ในบล็อก NAV แต่ถ้าเป็นเพียงข้อมูลบางอย่างเกี่ยวกับใบอนุญาตและข้อมูลการติดต่อไม่จำเป็นต้องใส่ไว้ในบล็อก NAV
แถบคำอธิบายประกอบองค์ประกอบที่ใช้เพื่อระบุเนื้อหาที่มีการย้อมสีเล็กน้อยกับเนื้อหาโดยรอบคล้ายกับแถบด้านข้างในหนังสือหรือนิตยสาร เนื้อหาหลัก
<body> <ส่วนหัว> ...... </header> <tadicle> <ส่วนหัว> ...... </header> <side> <h1> ทำไมผลไม้มีสุขภาพดี </h1> <section> ที่นี่ AR สามเหตุผลที่มีเหตุผล shuld กินผลไม้มากขึ้น: <ol> <li> ผลไม้มีวิตามินจำนวนมาก </li> <li> ผลไม้เป็นแหล่งของไฟเบอร์ </li> <li> ผลไม้ประกอบด้วย lories ca น้อย </li> </ ol> <section> </sside> ...... </sarticle> <footer id = mainfooter> ...... </fooster> </body>
คุณสามารถใช้องค์ประกอบต่าง ๆ เช่นแถบโน้ตในเรื่องพิมพ์คุณสามารถแนะนำหัวข้อที่เกี่ยวข้องอื่นผ่านมันหรืออธิบายมุมมองที่เสนอในเอกสารหลัก คุณยังสามารถใช้องค์ประกอบเพื่อจัดเก็บโฆษณาลิงก์เนื้อหาที่เกี่ยวข้อง ฯลฯ
ข้อมูลติดต่อองค์ประกอบที่อยู่ใช้เพื่อแสดงข้อมูลการติดต่อของเอกสารหรือองค์ประกอบบทความ หากองค์ประกอบที่อยู่เป็นองค์ประกอบย่อยขององค์ประกอบบทความข้อมูลการติดต่อที่ให้ไว้นั้นถือเป็นบทความ องค์ประกอบที่อยู่ไม่สามารถใช้เพื่อแสดงที่อยู่นอกเหนือจากข้อมูลการติดต่อของเอกสารหรือบทความเช่น: ไม่สามารถใช้เพื่อแสดงที่อยู่ของลูกค้าหรือผู้ใช้
<body> <ส่วนหัว> ...... <dront> คำถามและความคิดเห็น?> ...... </body>พื้นที่รายละเอียด
องค์ประกอบรายละเอียดสร้างพื้นที่ในเอกสารและผู้ใช้สามารถเริ่มต้นเพื่อทำความเข้าใจรายละเอียดเพิ่มเติมเกี่ยวกับธีม องค์ประกอบรายละเอียดมักจะมีองค์ประกอบสรุปเพื่อสร้างป้ายกำกับคำอธิบายหรือชื่อเรื่องสำหรับพื้นที่รายละเอียด
<body> <ส่วนหัว> ...... </header> <artcticle> <ส่วนหัว> ...... </header> <pection> <p> ฉันชอบว่ายน้ำปั่นจักรยานและวิ่ง การฝึกอบรมสำหรับไตรกีฬาครั้งแรกของฉัน แต่มันเป็นงานที่ยาก : <ol> <li> ว่ายน้ำ 1.5km </li> <li> รอบ 40 กม. </li> <li> การรัน 10km </li> </ol> </section> </</</section> </บทความ> </body>
องค์ประกอบรายละเอียดมีลักษณะเริ่มต้นในเบราว์เซอร์
องค์ประกอบรายละเอียดจะถูกพับโดยค่าเริ่มต้นเท่านั้น
<รายละเอียดเปิด> <summary> ชนิดของไตรกีฬา </summary> มีไตรกีฬาหลายชนิด -การแข่งขันโอลิมปิกและอื่น ๆ /li> <li> รัน 10 กม. </li> </ol> </defails>
เอฟเฟกต์มีดังนี้:
สรุปองค์ประกอบความหมายของ HTML5 ถูกกำหนดบนพื้นฐานของนักประดิษฐ์ในการศึกษาหน้าเว็บที่มีอยู่ หากคุณสนใจคุณสามารถดูได้ที่นี่ (เว็บไซต์ของ Google คุณไม่สามารถดูได้โดยตรง)
ในปัจจุบันองค์ประกอบความหมายของ HTML5 ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยทั้งหมด แต่สำหรับเบราว์เซอร์รุ่นเก่า (ส่วนใหญ่เป็นส่วนใหญ่ของ Internet Explorer ของ IE9) จำเป็นต้องมีมาตรการแก้ไขบางอย่าง เนื่องจากองค์ประกอบความหมายไม่ได้ทำอะไรเลยพวกเขาจำเป็นต้องสนับสนุนพวกเขาตราบใดที่เบราว์เซอร์ได้รับอนุญาตให้ปฏิบัติต่อพวกเขาเป็นองค์ประกอบ Div ทั่วไปและงานที่เหลือคือการเพิ่มกฎสไตล์บางอย่างให้กับพวกเขา ปัญหา โชคดีที่งานเหล่านี้ Modernizr ช่วยให้คุณบรรลุเป้าหมายได้