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

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

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

การเลือกองค์ประกอบที่เหมาะสมสำหรับงานในขณะที่เขียนโค้ดจะทำให้คุณไม่ต้องเปลี่ยนโครงสร้างภายในโค้ดหรือแสดงความคิดเห็น 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>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

คล้ายกับ <header> ว่าส่วนท้ายเป็นจุดสังเกตหรือไม่จะขึ้นอยู่กับตำแหน่งที่ฝังส่วนท้ายอยู่ หากเป็นส่วนท้ายของเว็บไซต์ เว็บไซต์นั้นเป็นจุดสังเกตและควรมีข้อมูลส่วนท้ายของเว็บไซต์ที่คุณต้องการให้อยู่ในทุกหน้า เช่น คำชี้แจงลิขสิทธิ์ ข้อมูลติดต่อ และลิงก์ไปยังนโยบายความเป็นส่วนตัวและคุกกี้ role โดยนัยสำหรับส่วนท้ายของเว็บไซต์คือ contentinfo มิเช่นนั้น ส่วนท้ายจะไม่มีบทบาทโดยนัยและไม่ใช่จุดสังเกต ดังที่แสดงในภาพหน้าจอต่อไปนี้ของ AOM ใน Chrome (ซึ่งมี <article> ที่มี <header> และ <footer> ระหว่าง <header> กับ <footer>)

ในภาพหน้าจอนี้มีส่วนท้าย 2 ส่วน ได้แก่ ส่วนท้ายในส่วน <article> และส่วนท้าย 1 ส่วน ส่วนท้ายระดับบนสุดเป็นจุดสังเกตที่มีบทบาทโดยนัยของ 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 รายการ และส่วนท้ายเรียกว่าเลย์เอาต์ศักดิ์สิทธิ์ การมาร์กอัปเนื้อหานี้ทำได้หลายวิธี ดังนี้

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

ตรวจสอบความเข้าใจ

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