ส่วนหัวและส่วน

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

ในส่วนนี้ คุณจะได้ค้นพบโครงสร้างเอกสาร สรุปองค์ประกอบการแบ่งส่วนจากส่วนก่อนหน้า และมาร์กอัปโครงร่างสำหรับแอปพลิเคชัน

การเลือกองค์ประกอบที่เหมาะสมกับงานขณะเขียนโค้ดหมายความว่าคุณจะไม่ต้องปรับโครงสร้างใหม่หรือแสดงความคิดเห็นในโค้ด 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 อาจมีความเฉพาะเจาะจงต่ำ specificity คุณอาจกำหนดเป้าหมายลิงก์ด้วย header nav a ได้โดยไม่ต้องกังวลเรื่องความขัดแย้ง

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

เว็บไซต์<footer>

เขียนโค้ดส่วนท้ายของเว็บไซต์

<footer>
  <p>&copy;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>&copy;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> เพียงรายการเดียว

<aside>

<aside> ใช้สำหรับเนื้อหาที่เกี่ยวข้องกับเนื้อหาหลักของเอกสารโดยอ้อมหรือโดยบังเอิญ เช่น เอกสารนี้เกี่ยวกับ HTML สำหรับส่วนเกี่ยวกับความเฉพาะเจาะจงของตัวเลือก CSS สำหรับตัวอย่างส่วนหัวของเว็บไซต์ 3 รายการ (div, role และเชิงความหมาย) ส่วนเสริมที่เกี่ยวข้องโดยบังเอิญอาจอยู่ใน <aside> และ <aside> ก็อาจแสดงในแถบด้านข้างหรือกล่องคำอธิบาย เช่นเดียวกับส่วนเสริมส่วนใหญ่ <aside> ยังเป็นจุดสังเกตที่มีบทบาทโดยนัยเป็น complementary

<article>

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

<article> แสดงถึงเนื้อหาที่สมบูรณ์หรือมีเนื้อหาในตัวเอง ซึ่งในหลักการแล้วสามารถนำกลับมาใช้ซ้ำได้อย่างอิสระ ให้คิดว่าบทความเป็นเหมือนบทความในหนังสือพิมพ์ ในสิ่งพิมพ์ บทความข่าวเกี่ยวกับ Jacinda Ardern นายกรัฐมนตรีของนิวซีแลนด์ อาจปรากฏในส่วนเดียวเท่านั้น เช่น ข่าวต่างประเทศ ในเว็บไซต์ของหนังสือพิมพ์ บทความข่าวเดียวกันนั้นอาจปรากฏในหน้าแรก ในส่วนการเมือง ในส่วนข่าวโอเชียเนียหรือเอเชียแปซิฟิก และอาจปรากฏในส่วนกีฬา ไลฟ์สไตล์ หรือเทคโนโลยีด้วย ทั้งนี้ขึ้นอยู่กับหัวข้อข่าว นอกจากนี้ บทความยังอาจปรากฏในเว็บไซต์อื่นๆ เช่น Pocket หรือ Yahoo News!

<section>

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

กลับไปที่ตัวอย่าง Jacinda Ardern ในหน้าแรกของหนังสือพิมพ์ แบนเนอร์จะมีชื่อหนังสือพิมพ์ ตามด้วย <main> รายการเดียว ซึ่งแบ่งออกเป็น <section> หลายส่วน โดยแต่ละส่วนจะมีส่วนหัว เช่น "ข่าวต่างประเทศ" และ "การเมือง" และในแต่ละส่วนคุณจะเห็น <article> หลายรายการ นอกจากนี้ คุณยังอาจเห็นองค์ประกอบ <section> อย่างน้อย 1 รายการภายใน <article> แต่ละรายการ หากคุณดูหน้านี้ ส่วน "ส่วนหัวและส่วนต่างๆ" ทั้งหมดคือ <article> จากนั้น <article> นี้จะแบ่งออกเป็น <section> หลายส่วน ซึ่งรวมถึง site header site footer และโครงสร้างเอกสาร บทความเองก็มีส่วนหัว เช่นเดียวกับแต่ละส่วน

A <section> ไม่ใช่จุดสังเกตเว้นแต่จะมีชื่อที่เข้าถึงได้ หากมีชื่อที่เข้าถึงได้ บทบาทโดยนัยจะเป็น region ควรใช้บทบาทจุดสังเกตอย่างประหยัดเพื่อระบุส่วนโดยรวมที่ใหญ่ขึ้นของเอกสาร การใช้บทบาทจุดสังเกตมากเกินไปอาจสร้าง "สัญญาณรบกวน" ในโปรแกรมอ่านหน้าจอ ทำให้เข้าใจเลย์เอาต์โดยรวมของหน้าได้ยาก หาก <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 เอกสารสามารถสร้างสรุปตามส่วนหัวได้ แต่เบราว์เซอร์ไม่เคยใช้โครงสร้างนี้ แม้ว่าเบราว์เซอร์จะแสดงส่วนหัวที่ซ้อนกันด้วยขนาดแบบอักษรที่เล็กลงเรื่อยๆ ดังที่แสดงในตัวอย่างต่อไปนี้ แต่เบราว์เซอร์ไม่รองรับการสรุป

ตอนนี้คุณมีความรู้เพียงพอที่จะสรุป MachineLearningWorkshop.com แล้ว

การสรุป <body> ของ MLW.com

นี่คือสรุปเนื้อหาที่มองเห็นได้ของเว็บไซต์เวิร์กช็อปการเรียนรู้ของเครื่อง

เนื่องจากเนื้อหาแต่ละส่วนไม่ใช่เนื้อหาแบบสแตนด์อโลนที่สมบูรณ์ <section> จึงเหมาะสมกว่า <article> แม้ว่าแต่ละส่วนจะมีส่วนหัว แต่ไม่มีส่วนใดที่เหมาะกับ <footer>

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

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับส่วนหัวและส่วนต่างๆ