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>

<p></p> การใช้ <p> ก็เพื่อเป็นการขึ้นย่อหน้าใหม่นั่นเองครับ หลายท่านอาจจะไม่คุ้นเคยในการใช้ <p> เช่นเมื่อก่อนที่ ถนัดการใช้ตาราง เมื่ออยากทำข้อมูลแบ่งออกเป็น 3 ย่อหน้า อาจจะส้รางตารางมา 1 คอลัมน์ 3 แถว เพื่อที่จะ เอาข้อมูลใส่ใน แถวของตารางแทน ซึ่งนั่นถือเป็นการใช้งานที่ไม่ถูกหลักนัก

<p> สามารถนำเข้ามาใช้งานได้ในการนำเสนอข้อมูลในลักษณะนี้ และที่สำคัญ เราสามารถใช้ img ใน p ได้ด้วย

ลักษณะการเปรียบเทียบโค้ดที่ผมพูดเรื่องของตาราง 3 แถวเช่น

ในกรณีที่ใช้แบบตาราง

1. แบบใช้ table

<table>

<tr>

<td> ข้อมูลย่อหน้าที่ 1 </td>

</tr>

<td> ข้อมูลย่อหน้าที่ 2 </td>

<tr>

<td> ข้อมูลย่อหน้าที่ 3 </td>

</tr>

</table>

2. แบบใช้ p

<p>ข้อมูลย่อหน้าที่ 1</p>

<p>ข้อมูลย่อหน้าที่ 2</p>

<p>ข้อมูลย่อหน้าที่ 3</p>

หลายท่านอาจจะบอกว่า ในกรณีที่ต้องกำหนดความกว้างหละ ตารางมันสามารถกำหนดได้เลยไม่ใช่หรือ ได้ครับ แต่ p เราสามารุเอา div มาครอบแล้วกำหนดความกว้างได้เหมือนกันครับh1-h6 and p

Back to Top

13 Responses to h1, h2, h3, h4, h5, h6, p

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top