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

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

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

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

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

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