การสร้างย่อหน้าด้วยแท็ก p

การสร้างย่อหน้าด้วยแท็ก <p> เป็นวิธีพื้นฐานใน HTML สำหรับการแสดงผลเนื้อหาในรูปแบบย่อหน้า (paragraph) ซึ่งช่วยจัดระเบียบข้อความให้อ่านง่ายและมีความชัดเจน การใช้งานแท็ก <p> เป็นส่วนหนึ่งของการสร้างโครงสร้างที่ดีสำหรับเนื้อหาบนหน้าเว็บเพจ

โครงสร้างพื้นฐานของแท็ก <p>

แท็ก <p> เป็นแท็กที่มีลักษณะเป็นคู่ โดยประกอบด้วยแท็กเปิด <p> และแท็กปิด </p> ดังนี้:

<p>เนื้อหาของย่อหน้าจะอยู่ตรงนี้</p>

ข้อความใดที่อยู่ระหว่างแท็กเปิดและแท็กปิดจะถูกแสดงผลเป็นย่อหน้าหนึ่งย่อหน้า

คุณสมบัติและการใช้งาน

การสร้างย่อหน้าใหม่

ทุกครั้งที่คุณใช้แท็ก <p> จะสร้างย่อหน้าใหม่ขึ้นโดยอัตโนมัติ โดยแต่ละย่อหน้าจะมีพื้นที่เว้นระหว่างกันตามค่าเริ่มต้นที่เบราว์เซอร์กำหนด (ส่วนใหญ่จะมีระยะห่างบนและล่างของแต่ละย่อหน้า)

<p>นี่คือตัวอย่างย่อหน้าที่หนึ่ง</p>
<p>นี่คือตัวอย่างย่อหน้าที่สอง</p>

ผลลัพธ์

นี่คือตัวอย่างย่อหน้าที่หนึ่ง
นี่คือตัวอย่างย่อหน้าที่สอง

การจัดรูปแบบข้อความภายในย่อหน้า

คุณสามารถเพิ่มแท็ก HTML อื่น ๆ ภายในแท็ก <p> เพื่อจัดรูปแบบข้อความ เช่น การทำตัวหนา (<b>), การทำตัวเอียง (<i>), หรือการใส่ลิงก์ (<a>)

<p>ข้อความนี้ <b>ทำตัวหนา</b> และ <i>ตัวเอียง</i></p>

ผลลัพธ์

ข้อความนี้ ทำตัวหนา และ ตัวเอียง

การจัดการกับช่องว่าง

การเว้นวรรคหลายครั้งหรือการขึ้นบรรทัดใหม่ภายในแท็ก <p> จะไม่ส่งผลต่อการแสดงผลของย่อหน้า เนื่องจาก HTML จะไม่สนใจช่องว่างพิเศษเหล่านั้น

<p>   ข้อความนี้    จะถูกแสดงผล   เหมือนเดิม แม้จะมีช่องว่างหลายที่</p>

ผลลัพธ์

ข้อความนี้ จะถูกแสดงผลเหมือนเดิม แม้จะมีช่องว่างหลายที่

การใส่ย่อหน้าในย่อหน้าไม่ได้

แท็ก <p> ไม่สามารถซ้อนกันได้ หากต้องการจัดย่อหน้าเพิ่มเติม ควรใช้แท็ก <div> หรือวิธีการจัดโครงสร้างอื่น ๆ แทน

ตัวอย่างที่ไม่ถูกต้อง

<p>ย่อหน้าภายนอก<p>ย่อหน้าภายใน</p></p> <!-- ผิด -->

ตัวอย่างที่ถูกต้อง

<div>
    <p>ย่อหน้าภายนอก</p>
    <p>ย่อหน้าภายใน</p>
</div>

การปรับแต่งด้วย CSS

คุณสามารถใช้ CSS เพื่อปรับแต่งการแสดงผลของย่อหน้า เช่น การตั้งค่าสี, ขนาดตัวอักษร, ระยะห่าง และอื่น ๆ

ตัวอย่างการปรับแต่ง

<style>
  p {
    color: blue;
    font-size: 18px;
    line-height: 1.5;
  }
</style>

<p>ย่อหน้านี้จะถูกแสดงเป็นสีน้ำเงิน ขนาดตัวอักษร 18px และมีระยะห่างระหว่างบรรทัด 1.5 เท่า</p>

ผลลัพธ์

ย่อหน้านี้จะถูกแสดงเป็นสีน้ำเงิน ขนาดตัวอักษร 18px และมีระยะห่างระหว่างบรรทัด 1.5 เท่า

สรุป

• แท็ก <p> ใช้เพื่อสร้างย่อหน้าใน HTML
• ย่อหน้าใหม่จะถูกสร้างทุกครั้งที่ใช้แท็ก <p>
• ข้อความภายในแท็ก <p> สามารถจัดรูปแบบเพิ่มเติมได้ด้วย HTML และ CSS
• การใช้งาน CSS ร่วมกับ <p> สามารถปรับแต่งการแสดงผลได้หลากหลาย