ทำความเข้าใจ HTML Paragraphs

HTML Paragraphs คืออะไร?

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

การใช้งานแท็ก <p>

ตัวอย่าง

<p>นี่คือย่อหน้าแรก</p>
<p>นี่คือย่อหน้าที่สอง</p>

• แท็ก <p> ใช้สร้างย่อหน้าใหม่
• เบราว์เซอร์จะจัดระยะห่างระหว่างย่อหน้าให้อัตโนมัติ

การแสดงผล HTML

• เบราว์เซอร์จะไม่สนใจการเว้นบรรทัดหรือช่องว่างเกินในโค้ด:

<p>
  ข้อความนี้
  มีหลายบรรทัดในโค้ดต้นฉบับ
  แต่เบราว์เซอร์จะแสดงเป็นย่อหน้าเดียว
</p>

การจัดรูปแบบเพิ่มเติม

Horizontal Rule (<hr>)

• ใช้แท็ก <hr> เพื่อเพิ่มเส้นคั่นเนื้อหา

<h1>หัวข้อที่ 1</h1>
<p>นี่คือข้อความ.</p>
<hr>
<h2>หัวข้อที่ 2</h2>
<p>นี่คือข้อความเพิ่มเติม.</p>

Line Break (<br>)

• ใช้แท็ก <br> เมื่อต้องการขึ้นบรรทัดใหม่โดยไม่เริ่มย่อหน้าใหม่

<p>นี่คือข้อความ<br>พร้อมกับขึ้นบรรทัดใหม่.</p>

Preformatted Text (<pre>)

• ใช้แท็ก <pre> เพื่อแสดงข้อความในรูปแบบตามที่เขียนในโค้ด

  โค้ดตัวอย่างนี้
  จะคงระยะห่างและการเว้นบรรทัด
  ตามต้นฉบับ

ข้อควรจำ

1. ย่อหน้าสำคัญสำหรับโครงสร้างหน้าเว็บ: ช่วยให้ข้อความอ่านง่ายและจัดหมวดหมู่ได้ดี
2. ไม่ควรใช้ <p> หรือ <br> เพื่อการจัดรูปแบบ: ควรใช้ CSS แทน
3. <pre> สำหรับข้อความที่ต้องการคงรูปแบบต้นฉบับ: เช่น โค้ดหรือบทกวี

สรุป

• <p>: ใช้สร้างย่อหน้า
• <hr>: ใช้คั่นเนื้อหา
• <br>: ขึ้นบรรทัดใหม่
• <pre>: ใช้คงรูปแบบต้นฉบับของข้อความ

Ref: w3schools Tags: HTML, Paragraphs