การใช้ p ถึง inline elements อย่าง span, strong และ em

หมายเหตุ บทความนี้มีการอัพเดทเนื้อหาใหม่เข้ามา เพื่อให้ดูมีคุณค่ามากยิ่งขึ้น เพราะไม่ว่าเวลาจะผ่านไปนานขนาดไหนก็ยังมีคนเข้ามาอ่านอยู่อย่างต่อเนื่อง ซึ่งบทความถูกเขียนขึ้นเมื่อปี 2007 ตอนนี้ก็ปี 2023 เข้าไปแล้ว หลายอย่างเปลี่ยนไปมาก และที่สำคัญเขียนบทพื้นฐานของภาษา XHTML ซึ่งตอนนี้ถูกลอยแพไปเรียบร้อย

สำหรับการสร้างความเข้าใจแบบภาพใหญ่ แนะนำให้อ่านบทความนี้ครับ แนวทางการเรียนรู้ HTML5 และ CSS3 จะช่วยให้เข้าใจมากยิ่งขึ้น

---

เมื่อถึงเวลาที่ต้องพูดถึง ความหมายในเชิงลึก อันถึงขั้นที่ต้องให้ซึ้ง กับพระธรรมคำของของ xhtml แล้ว การใช้ <p>, <span>, <strong> หรือ <em> นั้น จริงๆ เขานำไปใช้กันยังไง หรือว่าเอาไปประยุกต์ใช้กันยังไง ทุกๆ Element มีความหมายในตัวของมันนะครับ สุ่มห้าสุ่มหกไป ไม่ดี

เมื่อถึงเวลาที่ต้องพูดถึง ความหมายในเชิงลึก อันถึงขั้นที่ต้องให้ซึ้ง กับพระธรรมคำของของ xhtml แล้ว การใช้ <p>, <span>, <strong> หรือ <em> นั้น จริงๆ เขานำไปใช้กันยังไง หรือว่าเอาไปประยุกต์ใช้กันยังไง ทุกๆ Element มีความหมายในตัวของมันนะครับ สุ่มห้าสุ่มหกไป ไม่ดี

สำหรับใครที่ยังไม่กระจ่างแจ้งกับการใช้ ผมขอแยกแยะประเด็นและความสำคัญหลักๆ ของแต่ละ Element เป็นข้อๆ นะขอรับ

1.<p> (Paragraph)

ความหมายของการใช้งาน

ความหมายตามตัวครับ “ย่อหน้า” เมื่อใดก็ตามที่มีการย่อหน้าใหม่ เราควรใช้ <p> เป็นตัวแบ่งเนื้อหาในแต่ละย่อหน้านั้นๆ

คุณลักษณะ

เป็น Element ที่อยู่ในหมวด Structural Module ซึ่งแสดงผลเป็น Block Element ด้วย และสามารถ ใช้xhtml elements ในตระกูล Content Model แบบ Text | List | blockcode | blockquote | pre | table ใส่เข้าไปข้างในได้ แต่ไม่สามารถ เอา <p> ซ้อนเข้าไปในตัวของมันเองได้

2.<span>, <strong> และ <em>

Inline elements เหล่านี้ ท่านเคยถามถึงความสำคัญในชีวิตของพวกเขา หรือไม่ถ้ายัง สอบถามเขาสักนิดเถิด ว่าแท้จริงแล้ว เขาถูกสร้างมาเพื่อสิ่งใด อย่าคิดเพียงเพื่อ เขาเหล่านั้นมีไว้เพื่อให้ผู้หื่นกระหายในเว็บ 2.0 นำไปกระทำชำเราแบบผิดๆ สงสารผู้สร้างบ้าง w3c จะรู้สึกอย่างไร Tim Berners-Lee จะหัวเสียมากมายแค่ไหน หากเขารู้ว่า มีคนเอาสิ่งที่ตัวเองปลุกปั้นไปใช้ในทางที่ผิด

คำว่า Inline ชื่อก็บอกตรงๆ ว่า “อยู่ในแถว” คือการใช้ elements เหล่านี้ ในแถวเท่านั้น ในที่นี้ของพูดถึงแถวของข้อมูลที่อยู่ใน <p> ก่อนนะครับ

2.1 <span>

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

2.2 <strong>

เมื่อใดก็ตาม ใน paragraph นั้นๆ คำที่มีความสำคัญมากกว่าคำๆ อื่นในบรรทัดที่ต้องการเน้น ย้ำ จะใช้ strong ในการระบุ ในการแสดงผลและการสื่อความหมายถึง นัยยะแห่งความสำคัญของคำนั้น รูปแบบการแสดงผล แสดงออกมาเป็นตัวหนา

หลายคนสงสัยว่า ใน html มี <b> อยู่แล้ว ทำไมต้องเปลี่ยนมาใช้ <strong> ด้วยหละ มันก็แสดงผลเหมือนๆ กันแสดงผลเหมือนกันนั้นใช่ครับ แต่ ความหมายไม่เหมือนกัน

XHTML แตกต่างจาก HTML ตรงที่ การสื่อความหมายของ tag และ element

เช่น ตัวอย่างต่อไปนี้

Die hard 4.0 got very strong screenplay.

กับ

Die hard 4.0 got very bold screenplay.

คุณคิดว่า อันไหนมันอ่านแล้วเข้าใจของความหมายเชิงการสื่อสารมวลชนครับ

กับ <strong> 1. หนังเรื่อง Die Hard 4.0 บทแมร่งสุดยอดเลยหวะ</strong> หรือ <b> 2. หนังเรื่อง Die Hard 4.0 บทหนังเรื่องนี้แมร่งเป็นตัวหนาหมดเลยหวะ แสดดดดด</b>

พาลให้เข้าใจกันไปคนละเรื่อง

Note:

นอกเรื่องนิดนึง แนะนำสำหรับคอหนังแอ็คชั่นและแฟนเดนตาย ป๋า วิลลิส Die hard 4.0 ไม่ทำให้คุณผิดหวัง กับแอ็คชั่นเว่อร์ๆ แบบฉบับของ ดายฮาร์ด และบทหนังที่จิกกัดความง่อยแดกของ รัฐบาลอเมริกาตลอดทั้งเรื่อง ว่าด้วยความกลัวของคนในสังคมกับกระแสการคุกคาม ก่อการร้ายตอบโต้จากกลุ่มผู้ก่อการร้ายภายในที่ซ่อนอยู่ (หนังให้ผู้ร้ายเป็นคนในประเทศประมาณโจรก่อการร้ายทั้งหลายไม่ได้อยู่ไหนไกล มันแดกภาษีคุณอยู่แถวนี้นี่เอง เหมือนประเทศอะไรน้า ที่นักการเมืองชอบเข้ามานั่งงาบภาษีของกรู แล้วเอาตูดไว้แช่น้ำและบริการกันเอง) และความห่วยแตก ล่าช้า ในการให้ความช่วยเหลือประชาชนผู้ประสบเคราะห์ภัยในประเทศ

2.3<em>

เมื่อคุณต้องการเน้นข้อความในบรรทัดให้แปลก ออกไปในเชิงความหมาย หรือแตกต่างออกไป em จะเน้นความแปลกและแตกต่างและแสดงผลในรูปลักษณะตัวเอียง แต่ strong จะเน้นความสำคัญ และแสดงผลในลักษณะตัวหนาจึงต่างกันในลักษณะแห่งการใช้งาน

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

มีความสุขกับการทำเว็บที่รับผิดชอบต่อบุคคลพิการบ้างก็ดี อย่างน้อยเราเองก็จะได้รู้สึกว่า เรายังให้ความสนใจและความสำคัญกับเขา เหล่านั้น และจรรยาบรรณที่พึงทำ