HTML เชิงความหมาย หรือที่เรียกว่ามาร์กอัปเชิงความหมาย หมายถึงการใช้แท็ก HTML ที่สื่อความหมายหรือความหมายของเนื้อหาที่อยู่ภายใน
การเพิ่มแท็ก HTML เชิงความหมายในเพจของคุณเป็นการให้ข้อมูลเพิ่มเติมที่ช่วยกำหนดบทบาทและความสำคัญเชิงสัมพันธ์ของส่วนต่างๆ ในเพจของคุณ
(ตรงข้ามกับ HTML ที่ไม่ใช่ความหมายซึ่งใช้แท็กที่ไม่ได้สื่อความหมายโดยตรง)
หมายเหตุ: HTML เป็นภาษาที่ใช้ในการจัดโครงสร้างเว็บไซต์ คู่มือนี้ถือว่ามีความเข้าใจพื้นฐานของ HTML หากคุณเป็นมือใหม่ การดูคู่มือแนะนำ HTMLจะเป็นประโยชน์
แท็ก HTML เชิงความหมายคืออะไร
แท็ก HTML ความหมายเป็นแท็กที่กำหนดความหมายของเนื้อหาที่มีอยู่
ตัวอย่างเช่น แท็ก เช่น<ส่วนหัว> , <บทความ>และ<ส่วนท้าย>เป็นแท็ก HTML ที่สื่อความหมาย พวกเขาระบุบทบาทของเนื้อหาที่มีอยู่อย่างชัดเจน
ในทางกลับกัน แท็กเช่น<div>และ<span>เป็นตัวอย่างทั่วไปขององค์ประกอบ HTML ที่ไม่ใช่ความหมาย พวกเขาทำหน้าที่เป็นผู้ถือเนื้อหาเท่านั้น แต่ไม่ได้ระบุว่าเนื้อหาประเภทใดที่พวกเขามีหรือบทบาทใดที่เนื้อหานั้นเล่นบนเพจ
เหตุใดฉันจึงต้องใช้แท็ก HTML เชิงความหมาย
นอกจากเหตุผลที่ชัดเจนว่าแท็ก HTML เชิงความหมายนั้นอ่านและเข้าใจได้ง่ายกว่า ตัวอย่างเช่น โดยนักพัฒนาเว็บที่ตรวจทานโค้ด มีเหตุผลเฉพาะเจาะจงอีกสองประการว่าทำไมคุณจึงควรใช้แท็กความหมายเสมอ
การเข้าถึง
สำหรับผู้ใช้ที่มองเห็น เป็นเรื่องง่ายที่จะระบุส่วนต่างๆ ของหน้าเว็บ ส่วนหัว ส่วนท้าย และเนื้อหาหลักทั้งหมดจะมองเห็นได้ทันที
อย่างไรก็ตาม ไม่ใช่เรื่องง่ายสำหรับผู้ใช้ที่ตาบอดหรือมีความบกพร่องทางสายตาและต้องพึ่งพาโปรแกรมอ่านหน้าจอ
การใช้แท็กความหมาย HTML อย่างเหมาะสมจะทำให้ผู้อ่านเหล่านี้เข้าใจเนื้อหาของคุณได้ดีขึ้น เนื่องจากโปรแกรมอ่านหน้าจอจะสื่อสารเนื้อหาของคุณได้แม่นยำยิ่งขึ้น
SEO
แท็ก HTML เชิงความหมายมีความสำคัญต่อSEO (การปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหา) เนื่องจากแท็กเหล่านี้บ่งชี้ถึงบทบาทของเนื้อหาภายในแท็ก
ข้อมูลดังกล่าวช่วยให้โปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาเช่น Googlebot เข้าใจเนื้อหาของคุณได้ดีขึ้น สิ่งนี้จะเพิ่มโอกาสที่เนื้อหาของคุณจะถูกเลือกให้เป็นตัวเต็งสำหรับการจัดอันดับในหน้าผลลัพธ์ของเครื่องมือค้นหา (SERP) สำหรับคำหลักที่เกี่ยวข้อง
พูดง่ายๆ ก็คือ หน้าเว็บที่มี HTML เชิงความหมายที่ใช้งานอย่างถูกต้องจะได้เปรียบในด้าน SEO มากกว่าหน้าที่ไม่มี
ประเภทของแท็กความหมาย HTML
แท็กความหมายสามารถกำหนดส่วนต่างๆ ของหน้าเว็บ
มาดูองค์ประกอบ HTML เชิงความหมายที่พบบ่อยที่สุด ซึ่งแบ่งออกเป็นสองประเภทตามการใช้งาน:
แท็กความหมาย HTML สำหรับโครงสร้าง
แท็ก HTML เชิงความหมายจำนวนมากจะสื่อสารเค้าโครงของหน้า
แท็ก “โครงสร้าง” เหล่านี้ถูกนำมาใช้เมื่อ HTML4 ได้รับการอัปเกรดเป็น HTML5 นั่นเป็นสาเหตุที่เรียกกันทั่วไปว่าแท็ก HTML5 ความหมายหรือองค์ประกอบ HTML5 ความหมาย
นี่คือรายการทั้งหมด:
- <header> : แท็กส่วนหัวกำหนดเนื้อหาที่ควรได้รับการพิจารณาว่าเป็นข้อมูลเบื้องต้นของหน้าหรือส่วน
- <nav> : แท็กการนำทางใช้สำหรับลิงก์การนำทาง สามารถซ้อนอยู่ภายในแท็ก <header> แต่แท็กการนำทางรอง <nav> มักจะใช้ที่อื่นในหน้า
- <main> : แท็กนี้มีเนื้อหาหลัก (หรือที่เรียกว่าเนื้อหา) ของหน้า ควรมีเพียงหนึ่งแท็กต่อหน้า
- <บทความ> : แท็กบทความกำหนดเนื้อหาที่สามารถแสดงโดยไม่ขึ้นกับหน้าเว็บหรือเว็บไซต์ที่เปิดอยู่ ไม่จำเป็นต้องหมายถึง “โพสต์บล็อก” ให้คิดว่ามันเป็น “บทความเกี่ยวกับเสื้อผ้า” มากกว่า – รายการที่มีในตัวเองซึ่งสามารถใช้ได้ในบริบทต่างๆ
- <section> : การใช้ <section> เป็นวิธีการจัดกลุ่มเนื้อหาใกล้เคียงของธีมที่คล้ายกัน แท็กส่วนแตกต่างจากแท็กบทความ ไม่จำเป็นต้องมีอยู่ในตัวเอง แต่เป็นส่วนหนึ่งของสิ่งอื่น
- <aside> : องค์ประกอบข้างเคียงกำหนดเนื้อหาที่มีความสำคัญน้อยกว่า มักใช้สำหรับแถบด้านข้าง ซึ่งเป็นพื้นที่ที่เพิ่มข้อมูลเสริมแต่ไม่จำเป็น
- <footer> : คุณใช้ <footer> ที่ด้านล่างของหน้า โดยปกติแล้วจะประกอบด้วยข้อมูลติดต่อ ข้อมูลลิขสิทธิ์ และการนำทางของไซต์บางส่วน
แท็กความหมาย HTML สำหรับข้อความ
แท็ก HTML ความหมายสำหรับข้อความคือแท็ก HTML ที่นอกเหนือจากการจัดรูปแบบแล้ว ยังถ่ายทอดฟังก์ชันความหมายของข้อความที่อยู่ในแท็กนั้นด้วย
นี่คือตัวอย่างบางส่วนที่พบบ่อยที่สุด:
- <h1> (หัวเรื่อง): แท็ก H1ทำเครื่องหมายหัวเรื่องระดับบนสุด โดยปกติแล้วจะมีส่วนหัว H1 เพียงหนึ่งรายการต่อหน้า
- <h2> ถึง <h6> (หัวข้อย่อย): หัวข้อย่อยที่มีความสำคัญในระดับต่างๆ มีหลายหัวข้อในระดับเดียวกันในหน้าเดียว
- <p> (ย่อหน้า): ย่อหน้าเดียวของข้อความ
- <a> (anchor): ใช้เพื่อทำเครื่องหมายไฮเปอร์ลิงก์จากหน้าหนึ่งไปอีกหน้าหนึ่ง
- <ol> (รายการสั่งซื้อ): รายการของรายการที่แสดงตามลำดับเฉพาะ โดยเริ่มด้วยสัญลักษณ์แสดงหัวข้อย่อย แท็ก <li> (รายการ) หนึ่งรายการมีรายการเดียวในรายการ
- <ul> (unordered list): รายการของรายการที่ไม่จำเป็นต้องแสดงตามลำดับเฉพาะ โดยเริ่มจากเลขลำดับ หนึ่ง <li> แท็ก (รายการ) มีรายการเดียวของรายการ
- <q> / <blockquote>: คำพูดของข้อความ ใช้ <blockquote> สำหรับใบเสนอราคาแบบยาวหลายบรรทัด และ <q> สำหรับใบเสนอราคาแบบอินไลน์ที่สั้นกว่า
- <em> (เน้น): ใช้สำหรับข้อความที่ควรเน้น
- <strong> (เน้นมาก): ใช้กับข้อความที่ควรเน้นมาก
- <code> : บล็อกของรหัสคอมพิวเตอร์
หมายเหตุ:เราได้แสดงเฉพาะแท็ก HTML เชิงความหมายที่พบมากที่สุดบางส่วนเท่านั้น คุณสามารถใช้อย่างอื่นได้มากมาย เช่น <summary>, <time>, <address>, <video> ฯลฯ เพื่อทำให้เนื้อหาของเว็บไซต์ของคุณเข้าใจง่ายขึ้น หากต้องการค้นหาองค์ประกอบความหมายของ HTML เพิ่มเติม โปรดดูรายการแท็ก HTML ทั้งหมดโดย W3Schools
เคล็ดลับ HTML เชิงความหมายและแนวทางปฏิบัติที่ดีที่สุด
สุดท้าย เราจะพูดถึงเคล็ดลับการใช้งาน HTML ตามข้อผิดพลาดทั่วไปที่ผู้คนมักทำเมื่อใช้แท็ก HTML เชิงความหมาย
อย่าใช้แท็ก HTML เชิงความหมายเพื่อจัดรูปแบบ
แม้ว่าเว็บเบราว์เซอร์จะใช้การจัดสไตล์กับแท็กความหมายต่างๆ (เช่น ข้อความภายในแท็ก <a> มักจะเป็นสีน้ำเงินและขีดเส้นใต้) แต่ก็ไม่ได้หมายความว่าควรใช้แท็ก HTML เพื่อจัดรูปแบบข้อความของคุณ
กล่าวอีกนัยหนึ่ง เช่นเดียวกับที่คุณไม่ใช้แท็ก <a> สำหรับข้อความ “ไม่มีลิงก์” เพียงเพื่อทำให้เป็นสีน้ำเงินและขีดเส้นใต้ คุณไม่ควรใช้แท็กความหมายอื่นๆ เพื่อจุดประสงค์ด้านโวหารอย่างแท้จริง
ต่อไปนี้คือตัวอย่างทั่วไปของการใช้แท็กความหมายอย่างไม่ถูกต้อง:
- การใช้แท็ก <h1> ถึง <h6> สำหรับข้อความที่ไม่ใช่หัวข้อโดยมีวัตถุประสงค์เพื่อเปลี่ยนขนาดตัวอักษร
- ใช้ <blockquote> เพื่อเยื้องข้อความที่ไม่ใช่ใบเสนอราคา
- การใช้ <strong> หรือ <em> เพื่อเพิ่มตัวหนาหรือตัวเอียงให้กับข้อความที่ไม่ต้องการการเน้น
สำหรับวัตถุประสงค์ในการจัดรูปแบบ ให้ใช้ CSS เสมอ
ซ้อนแท็กหัวเรื่องด้วยความหมายในใจ
จัดลำดับองค์ประกอบส่วนหัวตามความสำคัญเสมอ
ตัวอย่างเช่น หัวเรื่อง H3 ทั้งหมดที่ตามหลังหัวเรื่อง H2 บางอย่างควรเป็นหัวข้อย่อยของ H2 นั้น
ด้วยวิธีนี้ โครงสร้างของหัวเรื่องจะสร้างลำดับชั้นเชิงตรรกะของหัวข้อภายในเนื้อหาของคุณ และช่วยให้ทั้งผู้อ่านและเครื่องมือค้นหาเข้าใจและสำรวจข้อความได้ดียิ่งขึ้น
เคล็ดลับ: ใช้เครื่องมือ ตรวจสอบไซต์ของ Semrush เพื่อระบุปัญหาเกี่ยวกับส่วนหัว H1, HTML อื่นๆ และข้อผิดพลาดเกี่ยวกับ SEO บนหน้าเว็บที่ไซต์ของคุณอาจประสบ
คำแนะนำเดียวกัน—การซ้อนแท็กตามความหมาย—นำไปใช้กับแท็ก HTML ความหมายอื่นๆ ทั้งหมด
ซึ่งนำเราไปสู่คำแนะนำต่อไป:
อย่าเพิ่งคัดลอกเค้าโครงภาพของคุณ
การใช้งาน HTML ของคุณไม่ควรซ้ำกับเลย์เอาต์ภาพ ควรเป็นไปตามโครงสร้างความหมายของหน้าแทน
ลองดูตัวอย่างนี้:
การใช้แท็ก HTML ทางด้านซ้ายไม่ถูกต้อง เนื่องจากบ่งชี้ว่าหน้าประกอบด้วยสี่หัวข้อที่แตกต่างกัน แทนที่จะเป็นหนึ่งหัวข้อและสามหัวข้อย่อยดังที่แสดงทางด้านขวา
ทางด้านขวามือ เรามีเพจที่สร้างขึ้นอย่างถูกต้องโดยใช้ HTML เชิงความหมาย แม้ว่าจะมีสี่ส่วนที่แยกจากกันในเลย์เอาต์ภาพของหน้า แท็ก HTML จะซ้อนกันตามความหมายของเนื้อหา