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