ในส่วนที่แล้ว คุณได้เรียนรู้ว่าแม้คุณจะไม่ทราบความหมายของคำในหน้าเว็บ แต่เมื่อองค์ประกอบเชิงความหมายทำให้เอกสารมีโครงสร้างที่มีความหมาย ผู้อื่น เช่น เครื่องมือค้นหา เทคโนโลยีความช่วยเหลือพิเศษ ผู้ดูแลในอนาคต สมาชิกใหม่ในทีม ก็จะเข้าใจโครงร่างของเอกสาร
ในส่วนนี้ คุณจะได้เรียนรู้เกี่ยวกับโครงสร้างเอกสาร ทบทวนองค์ประกอบการแบ่งส่วนจากส่วนก่อนหน้า และมาร์กอัปโครงร่างสำหรับแอปพลิเคชันของคุณ
การเลือกองค์ประกอบที่เหมาะสมสำหรับงานขณะเขียนโค้ดหมายความว่าคุณจะไม่ต้องเปลี่ยนโครงสร้างภายในโค้ดหรือทำเครื่องหมาย HTML เป็นความคิดเห็น หากคุณคิดถึงการใช้ธาตุที่เหมาะสมกับงาน คุณก็มักจะเลือกธาตุที่เหมาะสมกับงานได้ หากไม่ทำเช่นนั้น คุณก็อาจไม่ได้รับความช่วยเหลือ
ตอนนี้คุณเข้าใจความหมายของมาร์กอัปและทราบแล้วว่าเหตุใดการเลือกองค์ประกอบที่เหมาะสมจึงสำคัญ เมื่อได้เรียนรู้เกี่ยวกับองค์ประกอบต่างๆ ทั้งหมดแล้ว โดยทั่วไปคุณจะเลือกองค์ประกอบที่เหมาะสมได้โดยไม่ต้องพยายามเพิ่มเติมมากนัก
เว็บไซต์ <header>
ก่อนอื่น คุณควรสร้างส่วนหัวของเว็บไซต์ เริ่มด้วยมาร์กอัปที่ไม่ใช่เชิงความหมาย แล้วค่อยๆ พัฒนาไปสู่โซลูชันที่ดี เพื่อให้คุณได้เรียนรู้ประโยชน์ของส่วน HTML และองค์ประกอบส่วนหัวไปพร้อมกัน
หากคุณไม่ได้คำนึงถึงความหมายของส่วนหัวมากนัก คุณอาจใช้โค้ดดังนี้
<!-- start header -->
<div id="pageHeader">
<div id="title">Machine Learning Workshop</div>
<!-- navigation -->
<div id="navigation">
<a href="#reg">Register</a>
<a href="#about">About</a>
<a href="#teachers">Instructors</a>
<a href="#feedback">Testimonials</a>
</div>
<!-- end navigation bar -->
</div>
<!-- end of header -->
CSS สามารถทำให้มาร์กอัป (เกือบ) ทุกรายการดูถูกต้องได้ แต่การใช้ <div> ที่ไม่ใช่เชิงความหมายกับทุกอย่างจะทำให้เกิดงานเพิ่มเติม หากต้องการกำหนดเป้าหมาย <div> หลายรายการด้วย CSS คุณจะต้องใช้รหัสหรือคลาสเพื่อระบุเนื้อหา นอกจากนี้ โค้ดยังมีความคิดเห็นสำหรับ </div> ปิดแต่ละรายการเพื่อระบุว่า </div> แต่ละรายการปิดแท็กเปิดใด
แม้ว่าแอตทริบิวต์ id และ class จะมีฮุกสำหรับการจัดรูปแบบและ JavaScript แต่ก็ไม่ได้เพิ่มคุณค่าเชิงความหมายให้กับโปรแกรมอ่านหน้าจอและ (ส่วนใหญ่) เครื่องมือค้นหา
คุณสามารถใส่แอตทริบิวต์ role เพื่อให้ความหมายในการสร้างโมเดลออบเจ็กต์การช่วยเหลือพิเศษ (AOM) ที่ดีสำหรับโปรแกรมอ่านหน้าจอได้ดังนี้
<!-- start header -->
<div role="banner">
<div role="heading" aria-level="1">Machine Learning Workshop</div>
<div role="navigation">
<a href="#reg">Register</a>
<a href="#about">About</a>
<a href="#teachers">Instructors</a>
<a href="#feedback">Testimonials</a>
</div>
<!-- end navigation bar -->
</div>
<!-- end of header -->
อย่างน้อยวิธีนี้ก็ให้ความหมายและช่วยให้ใช้ตัวเลือกแอตทริบิวต์ใน CSS ได้ แต่ก็ยังคงเพิ่มความคิดเห็นเพื่อระบุว่า <div> แต่ละรายการปิด </div> ใด
หากคุณรู้จัก HTML สิ่งที่คุณต้องทำก็คือคิดถึงวัตถุประสงค์ของเนื้อหา จากนั้นคุณสามารถเขียนโค้ดนี้ตามความหมายโดยไม่ต้องใช้ role และไม่ต้องใส่ความคิดเห็นในแท็กปิด
<header>
<h1>Machine Learning Workshop</h1>
<nav>
<a href="#reg">Register</a>
<a href="#about">About</a>
<a href="#teachers">Instructors</a>
<a href="#feedback">Testimonials</a>
</nav>
</header>
โค้ดนี้ใช้จุดสังเกตเชิงความหมาย 2 จุด ได้แก่ <header> และ <nav>
นี่คือส่วนหัวหลัก องค์ประกอบ <header> ไม่ได้เป็นจุดสังเกตเสมอไป โดยมีความหมายแตกต่างกันไปตามตำแหน่งที่ฝังอยู่ เมื่อ <header> อยู่ที่ระดับบนสุด จะเป็น banner ของเว็บไซต์ ซึ่งเป็นบทบาทของจุดสังเกตที่คุณอาจสังเกตเห็นในบล็อกโค้ด role เมื่อ <header> ซ้อนอยู่ใน <main>, <article> หรือ <section> ระบบจะระบุว่าเป็นส่วนหัวของส่วนนั้นและไม่ใช่จุดสังเกต
องค์ประกอบ <nav> จะระบุเนื้อหาเป็นการนำทาง เนื่องจาก <nav> นี้ฝังอยู่ในส่วนหัวของเว็บไซต์ จึงเป็นส่วนการนำทางหลักของเว็บไซต์ หากฝังอยู่ใน <article> หรือ <section> ก็จะเป็นการนำทางภายในสำหรับส่วนนั้นเท่านั้น การใช้องค์ประกอบเชิงความหมายจะช่วยให้คุณสร้างโมเดลออบเจ็กต์การช่วยเหลือพิเศษหรือ AOM ที่มีความหมายได้ AOM ช่วยให้โปรแกรมอ่านหน้าจอแจ้งผู้ใช้ได้ว่าส่วนนี้ประกอบด้วยบล็อกการนำทางหลักที่ผู้ใช้สามารถไปยังส่วนต่างๆ หรือข้ามได้
การใช้แท็กปิด </nav> และ </header> ช่วยให้ไม่จำเป็นต้องใช้ความคิดเห็นเพื่อระบุว่าแท็กปิดแต่ละแท็กปิดองค์ประกอบใด นอกจากนี้ การใช้แท็กที่แตกต่างกันสำหรับองค์ประกอบต่างๆ ยังช่วยให้ไม่จำเป็นต้องใช้ฮุก id และ class ตัวเลือก CSS อาจมีความเฉพาะเจาะจงต่ำ คุณอาจกำหนดเป้าหมายลิงก์ด้วย header nav a ได้โดยไม่ต้องกังวลเรื่องความขัดแย้ง
คุณได้เขียนส่วนหัวที่มี HTML น้อยมากและไม่มีคลาสหรือรหัส แต่เมื่อใช้ HTML เชิงความหมาย คุณไม่จำเป็นต้องทำเช่นนั้น
เว็บไซต์ <footer>
เขียนโค้ดส่วนท้ายของเว็บไซต์
<footer>
<p>©2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>
เช่นเดียวกับ <header> การที่ส่วนท้ายเป็นจุดสังเกตหรือไม่นั้นขึ้นอยู่กับตำแหน่งที่ฝังส่วนท้าย เมื่อเป็นส่วนท้ายของเว็บไซต์ จะเป็นจุดสังเกตและควรมีข้อมูลส่วนท้ายของเว็บไซต์ที่คุณต้องการในทุกหน้า เช่น คำชี้แจงลิขสิทธิ์ ข้อมูลติดต่อ และลิงก์ไปยังนโยบายความเป็นส่วนตัวและคุกกี้ role โดยนัยสำหรับส่วนท้ายของเว็บไซต์คือ contentinfo มิฉะนั้น ส่วนท้ายจะไม่มีบทบาทโดยนัยและไม่ใช่จุดสังเกต ดังที่แสดงในภาพหน้าจอต่อไปนี้ของ AOM ใน Chrome (ซึ่งมี <article> ที่มี <header> และ <footer> ระหว่าง <header> และ <footer>)
ในภาพหน้าจอนี้มีส่วนท้าย 2 ส่วน ได้แก่ ส่วนท้ายใน <article> และส่วนท้ายระดับบนสุด ส่วนท้ายระดับบนสุดคือจุดสังเกตที่มีบทบาทโดยนัยของ contentinfo ส่วนท้ายอื่นๆ ไม่ใช่จุดสังเกต Chrome จะแสดงเป็น FooterAsNonLandmark ส่วน Firefox จะแสดงเป็น section
แต่ก็ไม่ได้หมายความว่าคุณไม่ควรใช้ <footer> ตัวอย่างเช่น หากคุณมีบล็อก คุณอาจมีส่วนท้ายของเว็บไซต์ที่มีบทบาท contentinfo โดยนัย บล็อกโพสต์แต่ละรายการยังมี <footer> ได้ด้วย ในหน้า Landing Page หลักของบล็อก เบราว์เซอร์ เครื่องมือค้นหา และโปรแกรมอ่านหน้าจอจะทราบว่าส่วนท้ายหลักคือส่วนท้ายระดับบนสุด และส่วนท้ายอื่นๆ ทั้งหมดเกี่ยวข้องกับโพสต์ที่ฝังอยู่
เมื่อ <footer> เป็นองค์ประกอบย่อยของ <article>, <aside>, <main>, <nav> หรือ <section> จะไม่ถือว่าเป็นจุดสังเกต หากโพสต์ปรากฏขึ้นมาเอง ส่วนท้ายนั้นอาจได้รับการโปรโมต ทั้งนี้ขึ้นอยู่กับมาร์กอัป
ส่วนท้ายมักเป็นที่ที่คุณจะพบข้อมูลติดต่อ ซึ่งรวมอยู่ใน <address> ซึ่งเป็นองค์ประกอบที่อยู่ติดต่อ นี่เป็นองค์ประกอบหนึ่งที่ตั้งชื่อได้ไม่ดีนัก โดยใช้เพื่อระบุข้อมูลติดต่อของบุคคลหรือองค์กร ไม่ใช่ที่อยู่จัดส่งทางไปรษณีย์
<footer>
<p>©2022 Machine Learning Workshop, LLC. All rights reserved.</p>
<address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>
โครงสร้างเอกสาร
โมดูลนี้เริ่มต้นด้วย <header> และ <footer> เนื่องจากบางครั้งองค์ประกอบเหล่านี้เป็นเพียงองค์ประกอบจุดสังเกต (หรือ "การแบ่งส่วน") เท่านั้น ยังมีองค์ประกอบการแบ่งส่วนที่พบบ่อยอีกหลายรายการ
เลย์เอาต์ที่มีส่วนหัว แถบด้านข้าง 2 แถบ และส่วนท้ายเรียกว่าเลย์เอาต์แบบ Holy Grail การมาร์กอัปเนื้อหานี้ทำได้หลายวิธี ซึ่งรวมถึงวิธีต่อไปนี้
<body>
<header>Header</header>
<nav>Nav</nav>
<main>Content</main>
<aside>Aside</aside>
<footer>Footer</footer>
</body>
หากคุณกำลังสร้างบล็อก คุณอาจมีชุดบทความใน <main> ดังนี้
<body>
<header>Header</header>
<nav>Nav</nav>
<main>
<article>First post</article>
<article>Second post</article>
</main>
<aside>Aside</aside>
<footer>Footer</footer>
</body>
เมื่อใช้องค์ประกอบเชิงความหมาย เบราว์เซอร์จะสร้างแผนผังการช่วยเหลือพิเศษที่มีความหมายได้ ซึ่งจะช่วยปรับปรุงวิธีไปยังส่วนต่างๆ ของโปรแกรมอ่านหน้าจอ ในกรณีนี้ banner และ contentinfo จะแสดงผ่านเว็บไซต์ <header> และ <footer> องค์ประกอบใหม่ที่เพิ่มเข้ามาที่นี่ ได้แก่ <main>, <aside> และ <article> รวมถึง <h1> และ <nav> ที่คุณเคยใช้ก่อนหน้านี้ และ <section> ที่คุณยังไม่ได้ใช้
<main>
มีองค์ประกอบจุดสังเกต <main> เพียงรายการเดียว องค์ประกอบ <main> จะระบุเนื้อหาหลักของเอกสาร ควรมี <main> เพียง 1 รายการต่อหน้า
<aside>
<aside> มีไว้สำหรับเนื้อหาที่เกี่ยวข้องกับเนื้อหาหลักของเอกสารโดยอ้อมหรือเกี่ยวข้องเพียงเล็กน้อย ตัวอย่างเช่น เอกสารนี้เกี่ยวกับ HTML สำหรับส่วนที่เกี่ยวกับความเฉพาะเจาะจงของตัวเลือก CSS สำหรับตัวอย่างส่วนหัวของเว็บไซต์ 3 รายการ (div, role และ semantic) เนื้อหาที่เกี่ยวข้องโดยอ้อมอาจอยู่ใน <aside> และ <aside> มักจะแสดงในแถบด้านข้างหรือกล่องข้อความไฮไลต์ <aside> ยังเป็นจุดสังเกตที่มีบทบาทโดยนัยของ complementary ด้วย
<article>
เราได้เพิ่มองค์ประกอบ <article> 2 รายการที่ฝังอยู่ใน <main> ซึ่งไม่จำเป็นในตัวอย่างแรกที่เนื้อหาหลักมีเพียงคำเดียว หรือในชีวิตจริงคือเนื้อหาส่วนเดียว แต่หากคุณเขียนบล็อกเหมือนในตัวอย่างที่ 2 โพสต์แต่ละรายการควรอยู่ใน <article> ที่ฝังอยู่ใน <main>
<article> แสดงถึงส่วนของเนื้อหาที่สมบูรณ์หรือครบถ้วนในตัวเอง ซึ่งโดยหลักการแล้วสามารถนำกลับมาใช้ซ้ำได้อย่างอิสระ ให้คิดว่าบทความนี้เป็นเหมือนบทความในหนังสือพิมพ์ ในสื่อสิ่งพิมพ์ บทความข่าวเกี่ยวกับ Jacinda Ardern นายกรัฐมนตรีของนิวซีแลนด์อาจปรากฏในส่วนเดียวเท่านั้น เช่น ข่าวต่างประเทศ ในเว็บไซต์ของหนังสือพิมพ์ บทความข่าวเดียวกันนั้นอาจปรากฏในหน้าแรก ในส่วนการเมือง ในส่วนข่าวโอเชียเนียหรือเอเชียแปซิฟิก และอาจปรากฏในส่วนกีฬา ไลฟ์สไตล์ หรือเทคโนโลยี ทั้งนี้ขึ้นอยู่กับหัวข้อของข่าว นอกจากนี้ บทความยังอาจปรากฏในเว็บไซต์อื่นๆ เช่น Pocket หรือ Yahoo News!
<section>
องค์ประกอบ <section> ใช้เพื่อรวมส่วนสแตนด์อโลนทั่วไปของเอกสารเมื่อไม่มีองค์ประกอบเชิงความหมายที่เฉพาะเจาะจงมากกว่าให้ใช้ ส่วนต่างๆ ควรมีส่วนหัว โดยมีข้อยกเว้นน้อยมาก
กลับไปที่ตัวอย่างของ Jacinda Ardern ในหน้าแรกของหนังสือพิมพ์ แบนเนอร์จะมีชื่อของหนังสือพิมพ์ ตามด้วย <main> รายการเดียว ซึ่งแบ่งออกเป็น <section> หลายรายการ โดยแต่ละรายการจะมีส่วนหัว เช่น "ข่าวต่างประเทศ" และ "การเมือง" และในแต่ละส่วน คุณจะเห็น <article> หลายรายการ ภายใน <article> แต่ละรายการ คุณอาจพบองค์ประกอบ <section> อย่างน้อย 1 รายการด้วย หากคุณดูหน้านี้ ส่วน "ส่วนหัวและส่วน" ทั้งหมดคือ <article> จากนั้น <article> นี้จะแบ่งออกเป็น <section> หลายรายการ ซึ่งรวมถึง site header, site footer และโครงสร้างเอกสาร บทความเองก็มีส่วนหัว เช่นเดียวกับแต่ละส่วน
<section> ไม่ใช่จุดสังเกตเว้นแต่จะมีชื่อที่เข้าถึงได้ หากมีชื่อที่เข้าถึงได้ บทบาทโดยนัยจะเป็น region ควรใช้บทบาท Landmark อย่างจำกัดเพื่อระบุส่วนโดยรวมที่ใหญ่ขึ้นของเอกสาร การใช้บทบาทของจุดสังเกตมากเกินไปอาจทำให้เกิด "สัญญาณรบกวน" ในโปรแกรมอ่านหน้าจอ ซึ่งทำให้เข้าใจเลย์เอาต์โดยรวมของหน้าได้ยาก หาก <main> มีส่วนย่อยที่สำคัญ 2 หรือ 3 ส่วน การใส่ชื่อที่เข้าถึงได้สำหรับ <section> แต่ละรายการอาจเป็นประโยชน์
ส่วนหัว: <h1>-<h6>
องค์ประกอบส่วนหัวของส่วนมี 6 รายการ ได้แก่ <h1>, <h2>, <h3>, <h4>, <h5> และ <h6> แต่ละแท็กจะแสดงถึงระดับหัวข้อของส่วน 1 ใน 6 ระดับ โดย <h1> เป็นระดับส่วนที่สูงที่สุดหรือสำคัญที่สุด และ <h6> เป็นระดับต่ำสุด
เมื่อส่วนหัวซ้อนอยู่ในแบนเนอร์เอกสาร <header> ส่วนหัวนั้นจะเป็นส่วนหัวของแอปพลิเคชันหรือเว็บไซต์ เมื่อฝังอยู่ใน <main> ไม่ว่าจะฝังอยู่ภายใน <header> ใน <main> หรือไม่ก็ตาม ส่วนหัวนั้นจะเป็นส่วนหัวของหน้าเว็บนั้น ไม่ใช่ทั้งเว็บไซต์ เมื่อฝังอยู่ใน <article> หรือ <section> จะเป็นส่วนหัวสำหรับส่วนย่อยของหน้าเว็บนั้น
ขอแนะนำให้ใช้ระดับส่วนหัวที่คล้ายกับระดับส่วนหัวในเครื่องมือแก้ไขข้อความ โดยเริ่มจาก <h1> เป็นส่วนหัวหลัก ตามด้วย <h2> เป็นส่วนหัวสำหรับส่วนย่อย และ <h3> หากส่วนย่อยเหล่านั้นมีส่วนต่างๆ และหลีกเลี่ยงการข้ามระดับส่วนหัว มีบทความเกี่ยวกับส่วนหัวของส่วนที่ดีที่นี่
ผู้ใช้โปรแกรมอ่านหน้าจอบางรายเข้าถึงส่วนหัวเพื่อทำความเข้าใจเนื้อหาของหน้า เดิมทีส่วนหัวควรจะแสดงโครงร่างของเอกสาร เช่นเดียวกับที่ MS Word หรือ Google เอกสารสามารถสร้างโครงร่างตามส่วนหัวได้ แต่เบราว์เซอร์ไม่เคยใช้โครงสร้างนี้ และอัลกอริทึมโครงร่างที่เสนอถูกนำออกจากข้อกำหนด HTML แม้ว่าในอดีตเบราว์เซอร์จะแสดงองค์ประกอบ <h1> ที่ฝังอยู่ในองค์ประกอบการแบ่งส่วนด้วยขนาดแบบอักษรที่เล็กลง แต่เบราว์เซอร์ที่ทันสมัยได้นำสไตล์เริ่มต้นเหล่านั้นออกและไม่รองรับการจัดทำโครงร่างเอกสารอัตโนมัติ
ตอนนี้คุณมีความรู้เพียงพอที่จะร่างโครงร่างของ MachineLearningWorkshop.com แล้ว
การสรุป <body> ของ MLW.com
นี่คือโครงร่างสำหรับเนื้อหาที่มองเห็นได้ของเว็บไซต์เวิร์กช็อปแมชชีนเลิร์นนิง
เนื่องจากไม่มีเนื้อหาใดที่เป็นเนื้อหาแบบสแตนด์อโลนและสมบูรณ์ในตัวเอง <section> จึงเหมาะสมกว่า <article> แม้ว่าแต่ละส่วนจะมีส่วนหัว แต่ก็ไม่มีส่วนใดที่ควรค่าแก่การใช้ <footer>
เราไม่จำเป็นต้องพูดถึงเรื่องนี้อีกแล้ว แต่ก็ขอเตือนว่าอย่าใช้ส่วนหัวเพื่อทำให้ข้อความเป็นตัวหนาหรือมีขนาดใหญ่ ให้ใช้ CSS แทน หากต้องการเน้นข้อความ ก็มีองค์ประกอบเชิงความหมายที่ใช้ทำเช่นนั้นได้ด้วย เราจะพูดถึงเรื่องนี้และกรอกเนื้อหาส่วนใหญ่ของหน้าเมื่อพูดถึงข้อมูลพื้นฐานเกี่ยวกับข้อความ หลังจากเจาะลึกเรื่องแอตทริบิวต์แล้ว
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับส่วนหัวและส่วนต่างๆ
องค์ประกอบใดที่ใช้เพื่อระบุพื้นที่ของเว็บไซต์ซึ่งมีโลโก้หรือชื่อเว็บไซต์ และการนำทางหลัก
<heading><header><title>อนุญาตให้มีองค์ประกอบ <main> กี่รายการในหน้าเว็บ