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

Nov. 23, 2024 · boychawin

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>: ใช้คงรูปแบบต้นฉบับของข้อความ
Tags: html