XHTML Text Module หน้า 2 |

XHTML Text Module

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

เมื่อถึงเวลาที่ต้องพูดถึง ความหมายในเชิงลึก อันถึงขั้นที่ต้องให้ซึ้ง กับพระธรรมคำของของ 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>

เปลี่ยนใจมาใช้ div แทน table ตอนที่ 3 (สร่างเมา)

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

h1, h2, h3, h4, h5, h6, p

การให้ความสำคัญแก่หัวข้อ และการเลือกใช้ elements 1-6 ใน xhtml ถือได้ว่าสำคัญไม่น้อยเหมือนกันครับ ข้อดีอีกอย่างของการเลือกใช้ h สำหรับหัวข้อนั้นคือระบบเสิร์ชเอ็นจิ้นต่างๆ จะให้ความสำคัญกับข้อมูลที่อยู่ใน h1 ไล่ไปจนถึง h6 ก่อน ซึ่งเป็นการช่วยให้ bots ต่างๆ เข้าค้นหาข้อมูลในเว็บเราได้ง่ายขึ้นด้วยครับ

การนำไปใช้แค่เพียงพิมพ์

<h1>หัวข้อนี้สำคัญระดับพันล้าน</h1>

<h2>หัวข้อนี้สำคัญระดับร้อยล้าน</h2>

<h3>หัวข้อนี้สำคัญระดับล้าน</h3>

<h4>หัวข้อนี้สำคัญระดับแสน</h4>

<h5>หัวข้อนี้สำคัญระดับหมื่น</h5>

<h6>หัวข้อนี้สำคัญระดับพัน</h6>

Back to Top