หลักการสำคัญของการเคลื่อนไหวมาตรฐานของเว็บที่มีความรับผิดชอบต่ออุตสาหกรรมที่เรามีอยู่ในปัจจุบันคือแนวคิดในการใช้องค์ประกอบ HTML สำหรับสิ่งที่พวกเขาต้องการมากกว่าที่จะแสดงในเบราว์เซอร์โดยค่าเริ่มต้น นี่เป็นที่รู้จักกันในชื่อว่า Semantic HTML
ความหมาย HTML คืออะไร
ความหมายของ HTML หรือมาร์กอัปความหมายคือ HTML ที่นำเสนอความหมายไปยังหน้าเว็บมากกว่าการนำเสนอเพียงอย่างเดียว ตัวอย่างเช่นแท็ก
บ่งชี้ว่าข้อความที่แนบมาเป็นย่อหน้า
นี้เป็นทั้งความหมายและ presentational เพราะคนรู้ว่าสิ่งที่ย่อหน้าและเบราว์เซอร์รู้วิธีการแสดง
ในอีกฟากหนึ่งของสมการนี้แท็กเช่น และ ไม่ใช่ความหมายเพราะว่าพวกเขากำหนดเฉพาะว่าข้อความควรมีลักษณะอย่างไร (ตัวหนาหรือตัวเอียง) และไม่ให้ความหมายเพิ่มเติมใด ๆ กับมาร์กอัป
ตัวอย่างแท็ก HTML ความหมายรวมถึงแท็กส่วนหัว
ผ่าน , , และ มีแท็ก HTML แบบความหมายอีกมากมายที่สามารถใช้ในขณะที่คุณสร้างเว็บไซต์ที่ได้มาตรฐาน
ทำไมคุณควรสนใจเกี่ยวกับความหมาย
ประโยชน์ของการเขียนความหมาย HTML เกิดจากสิ่งที่ควรจะเป็นเป้าหมายการขับขี่ของหน้าเว็บใด ๆ ความปรารถนาที่จะสื่อสาร การเพิ่มแท็กความหมายลงในเอกสารของคุณทำให้คุณสามารถให้ข้อมูลเพิ่มเติมเกี่ยวกับเอกสารฉบับนั้นซึ่งจะช่วยในการสื่อสาร โดยเฉพาะแท็กความหมายทำให้ชัดเจนกับเบราว์เซอร์ว่าความหมายของหน้าเว็บและเนื้อหาเป็นอย่างไร
ความชัดเจนดังกล่าวได้รับการสื่อสารกับเครื่องมือค้นหาเพื่อให้แน่ใจว่าหน้าที่ถูกต้องได้รับการส่งมอบสำหรับการค้นหาที่ถูกต้อง
แท็ก HTML ความหมายให้ข้อมูลเกี่ยวกับเนื้อหาของแท็กเหล่านั้นซึ่งมากกว่าวิธีดูหน้าเว็บ ข้อความที่อยู่ในแท็ก ได้รับการยอมรับโดยเบราเซอร์เป็นภาษาเขียนโค้ดบางชนิด
แทนที่จะพยายามแสดงโค้ดนั้นเบราว์เซอร์เข้าใจว่าคุณกำลังใช้ข้อความนั้นเป็นตัวอย่างของรหัสเพื่อจุดประสงค์ของบทความหรือบทแนะนำแบบออนไลน์
การใช้แท็กความหมายช่วยให้คุณมีตะขออีกมากมายสำหรับจัดรูปแบบเนื้อหาของคุณ บางทีวันนี้คุณต้องการให้ตัวอย่างโค้ดของคุณแสดงในสไตล์เบราว์เซอร์เริ่มต้น แต่ในวันพรุ่งนี้คุณต้องการเรียกพวกเขาออกมาพร้อมกับสีพื้นหลังสีเทาและในภายหลังคุณต้องการกำหนดแบบอักษรตัวพิมพ์ใหญ่หรือ แบบอักษรที่ จะใช้สำหรับ ตัวอย่างของคุณ คุณสามารถทำสิ่งต่างๆเหล่านี้ได้โดยใช้มาร์กอัพความหมายและ CSS ที่ใช้อย่างชาญฉลาด
ใช้แท็กความหมายอย่างถูกต้อง
เมื่อคุณต้องการใช้แท็กความหมายเพื่อถ่ายทอดความหมายมากกว่าเพื่อการนำเสนอคุณต้องระวังว่าคุณไม่ได้ใช้พวกเขาอย่างไม่ถูกต้องเพียงเพื่อคุณสมบัติการแสดงผลทั่วไปของพวกเขา แท็กความหมายที่ใช้มากที่สุด ได้แก่ :
- blockquote - บางคนใช้แท็ก สำหรับการเยื้องข้อความที่ไม่ใช่ใบเสนอราคา เนื่องจากบล็อคถูกเว้นไว้ตามค่าเริ่มต้น ถ้าคุณเพียงต้องการประโยชน์ของการเยื้อง แต่ข้อความไม่ได้เป็นแบบ Blockquote ให้ใช้ CSS margin แทน
- p - บรรณาธิการเว็บบางแห่งใช้
& nbsp; (พื้นที่ที่ไม่มีการทำลายในพาร์ติชัน) เพื่อเพิ่มช่องว่างระหว่างองค์ประกอบของหน้าเว็บมากกว่าการกำหนดย่อหน้าที่เป็นจริงสำหรับข้อความของหน้าเว็บนั้น เช่นเดียวกับตัวอย่างการเยื้องก่อนหน้านี้คุณควรใช้ขอบหรือพ็อพเพอร์ตี้คุณสมบัติเพื่อเพิ่มเนื้อที่
- ul - เช่น blockquote การใส่ข้อความภายในแท็ก
จะเยื้องข้อความในเบราว์เซอร์ส่วนใหญ่ นี่เป็นทั้ง HTML ที่ไม่ถูกต้องและมีความหมายไม่ถูกต้องเนื่องจากแท็ก - ใช้ได้ภายในแท็ก
เท่านั้น ใช้ขอบหรือช่องว่างเพื่อเยื้องข้อความอีกครั้ง
- h1-h6 - แท็กหัวเรื่องสามารถใช้เพื่อสร้างแบบอักษรที่ใหญ่กว่าและโดดเด่นกว่า แต่ถ้าข้อความไม่ใช่หัวเรื่องไม่ควรอยู่ภายในแท็กหัวเรื่อง ใช้คุณสมบัติ CSS แบบอักษรและน้ำหนักแบบอักษรแทนถ้าคุณต้องการเปลี่ยนขนาดหรือน้ำหนักของข้อความเฉพาะในหน้าเว็บของคุณ
เมื่อใช้แท็ก HTML ที่มีความหมายคุณจะสร้างหน้าเว็บที่ให้ข้อมูลมากกว่าเพียงแค่ล้อมรอบทุกอย่างด้วยแท็ก
แท็ก HTML มีความหมายอย่างไร
แม้ว่าแทบทุกแท็ก HTML4 และแท็ก HTML5 ทั้งหมดจะมีความหมายเชิงนัยก็ตาม แต่แท็กบางส่วนมีความหมายตามธรรมชาติ
ตัวอย่างเช่น HTML5 ได้กำหนดนิยามใหม่ของแท็ก และ ให้เป็นความหมาย แท็ก ไม่ได้ให้ความสำคัญเป็นพิเศษ แต่เป็นข้อความที่มักแสดงผลเป็นตัวหนา แท็ก ยังไม่นำพาความสำคัญหรือความสำคัญเป็นพิเศษ แต่ให้นิยามข้อความที่มักแสดงผลเป็นตัวเอียง
แท็ก HTML เชิงตรรกะ
ตัวย่อ <ย่อ> อักษรย่อ
ใบเสนอราคาแบบยาว คำนิยาม ที่อยู่ของผู้เขียน (s) ของเอกสาร <อ้างอิง> การอ้างอิง รหัสอ้างอิง ข้อความ Teletype แผนกเชิงตรรกะ ที่เก็บแบบอินไลน์แบบทั่วไป ลบข้อความแล้ว แทรกข้อความแล้ว ความสำคัญ เน้นหนัก
บรรทัดแรกระดับแรก
บรรทัดแรกระดับที่สอง
บรรทัดแรกระดับที่สาม
บรรทัดแรกระดับที่สี่
พาดหัวระดับที่ห้า
บรรทัดแรกระดับที่หก
การหยุดนิ่ง ข้อความที่จะป้อนโดยผู้ใช้
ข้อความที่จัดรูปแบบไว้ล่วงหน้า
ใบเสนอราคาแบบย่อ เอาต์พุตตัวอย่าง ห้อย ซึ่งเขียน ข้อความที่กำหนดด้วยตัวแปรหรือผู้ใช้
, และ มีแท็ก HTML แบบความหมายอีกมากมายที่สามารถใช้ในขณะที่คุณสร้างเว็บไซต์ที่ได้มาตรฐาน
ทำไมคุณควรสนใจเกี่ยวกับความหมาย
ประโยชน์ของการเขียนความหมาย HTML เกิดจากสิ่งที่ควรจะเป็นเป้าหมายการขับขี่ของหน้าเว็บใด ๆ ความปรารถนาที่จะสื่อสาร การเพิ่มแท็กความหมายลงในเอกสารของคุณทำให้คุณสามารถให้ข้อมูลเพิ่มเติมเกี่ยวกับเอกสารฉบับนั้นซึ่งจะช่วยในการสื่อสาร โดยเฉพาะแท็กความหมายทำให้ชัดเจนกับเบราว์เซอร์ว่าความหมายของหน้าเว็บและเนื้อหาเป็นอย่างไร
ความชัดเจนดังกล่าวได้รับการสื่อสารกับเครื่องมือค้นหาเพื่อให้แน่ใจว่าหน้าที่ถูกต้องได้รับการส่งมอบสำหรับการค้นหาที่ถูกต้อง
แท็ก HTML ความหมายให้ข้อมูลเกี่ยวกับเนื้อหาของแท็กเหล่านั้นซึ่งมากกว่าวิธีดูหน้าเว็บ ข้อความที่อยู่ในแท็ก ได้รับการยอมรับโดยเบราเซอร์เป็นภาษาเขียนโค้ดบางชนิด
แทนที่จะพยายามแสดงโค้ดนั้นเบราว์เซอร์เข้าใจว่าคุณกำลังใช้ข้อความนั้นเป็นตัวอย่างของรหัสเพื่อจุดประสงค์ของบทความหรือบทแนะนำแบบออนไลน์
การใช้แท็กความหมายช่วยให้คุณมีตะขออีกมากมายสำหรับจัดรูปแบบเนื้อหาของคุณ บางทีวันนี้คุณต้องการให้ตัวอย่างโค้ดของคุณแสดงในสไตล์เบราว์เซอร์เริ่มต้น แต่ในวันพรุ่งนี้คุณต้องการเรียกพวกเขาออกมาพร้อมกับสีพื้นหลังสีเทาและในภายหลังคุณต้องการกำหนดแบบอักษรตัวพิมพ์ใหญ่หรือ แบบอักษรที่ จะใช้สำหรับ ตัวอย่างของคุณ คุณสามารถทำสิ่งต่างๆเหล่านี้ได้โดยใช้มาร์กอัพความหมายและ CSS ที่ใช้อย่างชาญฉลาด
ใช้แท็กความหมายอย่างถูกต้อง
เมื่อคุณต้องการใช้แท็กความหมายเพื่อถ่ายทอดความหมายมากกว่าเพื่อการนำเสนอคุณต้องระวังว่าคุณไม่ได้ใช้พวกเขาอย่างไม่ถูกต้องเพียงเพื่อคุณสมบัติการแสดงผลทั่วไปของพวกเขา แท็กความหมายที่ใช้มากที่สุด ได้แก่ :
- blockquote - บางคนใช้แท็ก สำหรับการเยื้องข้อความที่ไม่ใช่ใบเสนอราคา เนื่องจากบล็อคถูกเว้นไว้ตามค่าเริ่มต้น ถ้าคุณเพียงต้องการประโยชน์ของการเยื้อง แต่ข้อความไม่ได้เป็นแบบ Blockquote ให้ใช้ CSS margin แทน
- p - บรรณาธิการเว็บบางแห่งใช้
& nbsp; (พื้นที่ที่ไม่มีการทำลายในพาร์ติชัน) เพื่อเพิ่มช่องว่างระหว่างองค์ประกอบของหน้าเว็บมากกว่าการกำหนดย่อหน้าที่เป็นจริงสำหรับข้อความของหน้าเว็บนั้น เช่นเดียวกับตัวอย่างการเยื้องก่อนหน้านี้คุณควรใช้ขอบหรือพ็อพเพอร์ตี้คุณสมบัติเพื่อเพิ่มเนื้อที่
- ul - เช่น blockquote การใส่ข้อความภายในแท็ก
จะเยื้องข้อความในเบราว์เซอร์ส่วนใหญ่ นี่เป็นทั้ง HTML ที่ไม่ถูกต้องและมีความหมายไม่ถูกต้องเนื่องจากแท็ก - ใช้ได้ภายในแท็ก
เท่านั้น ใช้ขอบหรือช่องว่างเพื่อเยื้องข้อความอีกครั้ง
- h1-h6 - แท็กหัวเรื่องสามารถใช้เพื่อสร้างแบบอักษรที่ใหญ่กว่าและโดดเด่นกว่า แต่ถ้าข้อความไม่ใช่หัวเรื่องไม่ควรอยู่ภายในแท็กหัวเรื่อง ใช้คุณสมบัติ CSS แบบอักษรและน้ำหนักแบบอักษรแทนถ้าคุณต้องการเปลี่ยนขนาดหรือน้ำหนักของข้อความเฉพาะในหน้าเว็บของคุณ
เมื่อใช้แท็ก HTML ที่มีความหมายคุณจะสร้างหน้าเว็บที่ให้ข้อมูลมากกว่าเพียงแค่ล้อมรอบทุกอย่างด้วยแท็ก
แท็ก HTML มีความหมายอย่างไร
แม้ว่าแทบทุกแท็ก HTML4 และแท็ก HTML5 ทั้งหมดจะมีความหมายเชิงนัยก็ตาม แต่แท็กบางส่วนมีความหมายตามธรรมชาติ
ตัวอย่างเช่น HTML5 ได้กำหนดนิยามใหม่ของแท็ก และ ให้เป็นความหมาย แท็ก ไม่ได้ให้ความสำคัญเป็นพิเศษ แต่เป็นข้อความที่มักแสดงผลเป็นตัวหนา แท็ก ยังไม่นำพาความสำคัญหรือความสำคัญเป็นพิเศษ แต่ให้นิยามข้อความที่มักแสดงผลเป็นตัวเอียง
แท็ก HTML เชิงตรรกะ
ตัวย่อ <ย่อ> อักษรย่อ
ใบเสนอราคาแบบยาว คำนิยาม ที่อยู่ของผู้เขียน (s) ของเอกสาร <อ้างอิง> การอ้างอิง รหัสอ้างอิง ข้อความ Teletype แผนกเชิงตรรกะ ที่เก็บแบบอินไลน์แบบทั่วไป ลบข้อความแล้ว แทรกข้อความแล้ว ความสำคัญ เน้นหนัก
บรรทัดแรกระดับแรก
บรรทัดแรกระดับที่สอง
บรรทัดแรกระดับที่สาม
บรรทัดแรกระดับที่สี่
พาดหัวระดับที่ห้า
บรรทัดแรกระดับที่หก
การหยุดนิ่ง ข้อความที่จะป้อนโดยผู้ใช้
ข้อความที่จัดรูปแบบไว้ล่วงหน้า
ใบเสนอราคาแบบย่อ เอาต์พุตตัวอย่าง ห้อย ซึ่งเขียน ข้อความที่กำหนดด้วยตัวแปรหรือผู้ใช้