คอร์ส IT พื้นฐาน HTML 016_องค์ประกอบเชิงความหมาย
องค์ประกอบเชิงความหมาย
HTML5 ได้นำเสนอองค์ประกอบเชิงความหมายจำนวนมาก จุดประสงค์ขององค์ประกอบเหล่านี้คือการเพิ่มความหมายเชิงภาษาของโครงสร้างเอกสาร ทำให้เอกสารมีความสามารถในการอ่านและการบำรุงรักษาที่ดีขึ้น และเป็นมิตรกับทั้งเครื่องมือค้นหาและนักพัฒนา
โครงสร้างหน้าเว็บโดยทั่วไปจะประกอบด้วย: ส่วนหัว ส่วนท้าย หัวข้อ การนำทาง เนื้อหา แถบด้านข้าง เป็นต้น
การออกแบบเลย์เอาต์หน้าเว็บโดยใช้องค์ประกอบ <div>:
[!สรุป]
- ไม่เอื้ออำนวยต่อนักพัฒนาในการเขียนโค้ด เมื่อคุณเผชิญกับหน้าจอที่เต็มไปด้วยองค์ประกอบ
<div>คุณจะแยกแยะความหมายที่พวกเขาแสดงได้ยากอย่างรวดเร็ว- ไม่เอื้ออำนวยต่อการเพิ่มประสิทธิภาพเครื่องมือค้นหา (SEO) เบราว์เซอร์รู้เพียงว่าคุณใช้องค์ประกอบ
<div>เท่านั้น และตัวองค์ประกอบdivเองไม่มีความหมายใดๆ มันเป็นเพียงคอนเทนเนอร์
การออกแบบเลย์เอาต์หน้าเว็บโดยใช้องค์ประกอบเชิงความหมาย:
การใช้ <header> <nav> <main> <aside> <footer> เพื่อแสดงพื้นที่ต่างๆ ในหน้าเว็บ แท็กเหล่านี้ทำให้หน้าเว็บมีความหมายและโครงสร้างที่ดี ทำให้ทั้งนักพัฒนาและเบราว์เซอร์สามารถเข้าใจเนื้อหาหน้าเว็บได้อย่างรวดเร็ว
| องค์ประกอบ | บทบาท |
|---|---|
<header> | ใช้เพื่อกำหนดพื้นที่ส่วนหัวของหน้าเว็บ โดยทั่วไปประกอบด้วยโลโก้เว็บไซต์ การนำทางหลัก ลิงก์ทั่วทั้งไซต์ และกล่องค้นหา |
<nav> | ใช้เพื่อกำหนดพื้นที่ส่วนลิงก์การนำทางของหน้าเว็บ |
<main> | ใช้เพื่อกำหนดเนื้อหาหลักของหน้าเว็บหรือส่วนฟังก์ชันหลัก เนื้อหานี้ควรไม่ซ้ำกันในหน้าเว็บ |
<aside> | ใช้เพื่อกำหนดเนื้อหาแถบด้านข้างของหน้าเว็บ เนื้อหานี้เกี่ยวข้องกับเนื้อหาหลัก แต่เป็นทางเลือก |
<footer> | ใช้เพื่อกำหนดพื้นที่ส่วนท้ายของหน้าเว็บ โดยทั่วไปประกอบด้วยข้อมูลลิขสิทธิ์ ข้อมูลติดต่อ และข้อมูลที่เกี่ยวข้องอื่นๆ |
<article> | ใช้เพื่อกำหนดบทความ เอกสาร หน้าเว็บ แอปพลิเคชัน หรือพื้นที่เนื้อหาอื่นๆ ที่เป็นอิสระ |
<section> | ใช้เพื่อกำหนดส่วนทั่วไปที่เป็นอิสระในหน้าเว็บ โดยทั่วไปจะประกอบด้วยหัวข้อหรือย่อหน้า บลอก |
<figure> | ใช้เพื่อกำหนดเนื้อหาที่เป็นอิสระ เช่น รูปภาพ แผนภูมิ ภาพถ่าย เป็นต้น |
<figcaption> | ใช้เพื่อให้หัวข้อหรือคำอธิบายสำหรับองค์ประกอบ <figure> |
ตัวอย่าง:
<!DOCTYPE html><html lang="en"><head> <title>หน้าเว็บของฉัน</title></head><body> <header> <h1>หน้าเว็บของฉัน</h1> </header>
<nav> <ul> <li><a href="#">หน้าแรก</a></li> <li><a href="#">เกี่ยวกับฉัน</a></li> <li><a href="#">ติดต่อฉัน</a></li> </ul> </nav>
<main> <article> <h2>การแนะนำตัวของฉัน</h2> <p>ชื่อของฉันคือ XXX นี่คือตัวอย่างขององค์ประกอบเชิงความหมาย</p> </article> </main>
<aside> <h2>ลิงก์ที่เกี่ยวข้อง</h2> <ul> <li><a href="#">บล็อกของฉัน</a></li> <li><a href="#">หน้า GitHub ของฉัน</a></li> </ul> </aside>
<footer> <p>ลิขสิทธิ์ 2023 XXX</p> </footer></body></html>ผลลัพธ์:
ตัวอย่างนี้ประกอบด้วยหน้าเว็บที่ใช้องค์ประกอบเชิงความหมายของ HTML5 เพื่ออธิบายความหมายของเนื้อหาหน้าเว็บ
- องค์ประกอบ
<header>กำหนดพื้นที่ส่วนหัวของหน้าเว็บ ประกอบด้วยโลโก้เว็บไซต์และการนำทางหลัก - องค์ประกอบ
<nav>กำหนดพื้นที่ส่วนลิงก์การนำทางของหน้าเว็บ - องค์ประกอบ
<main>กำหนดเนื้อหาหลักของหน้าเว็บ ประกอบด้วยบทความแนะนำตัวของฉัน - องค์ประกอบ
<aside>กำหนดเนื้อหาแถบด้านข้างของหน้าเว็บ ประกอบด้วยลิงก์ที่เกี่ยวข้อง - องค์ประกอบ
<footer>กำหนดพื้นที่ส่วนท้ายของหน้าเว็บ ประกอบด้วยข้อมูลลิขสิทธิ์
[!สรุป]
- เครื่องมือค้นหาสามารถเข้าใจเนื้อหาหน้าเว็บได้ดีขึ้น ปรับปรุงอันดับของหน้าเว็บในผลการค้นหา
- สามารถช่วยให้ผู้พิการเข้าใจเนื้อหาหน้าเว็บได้ง่ายขึ้น ปรับปรุงการเข้าถึงของหน้าเว็บ
- สามารถช่วยนักพัฒนาจัดระเบียบโครงสร้างหน้าเว็บได้ดีขึ้น ปรับปรุงความสามารถในการบำรุงรักษาของหน้าเว็บ
ลิงก์: 观鸟网 (roy-tian.github.io)