HTML Paragraphs การทำย่อหน้าในเอชทีเอ็มแอล

ในภาษา HTML เราสามารถขึ้นย่อหน้าใหม่ได้โดยใช้แท็ก ซึ่งมีรูปแบบการใช้งานดังนี้

<p>This is a paragraph. นี่คือย่อหน้านะครับ</p>
<p>This is another paragraph. นี่คืออีกย่อหน้าหนึ่งนะครับ</p>

แต่เราจะไม่สามารถกำหนดได้ว่า ผลลัพธ์จะให้ออกมาแบบที่เราต้องการ เช่น เราขึ้นบรรทัดใหม่ หรือจัดรูปแบบข้อความในย่อหน้ามาอย่างดี รูปแบบเหล่านั้นจะถูกตัดออกหมด เช่น

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>

ผลลัพธ์

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

HTML Line Breaks การขึ้นบันทัดใหม่

ถ้าต้องการขึ้นบรรทัดใหม่ในย่อหน้าเดียวกัน ให้ใช้แท็ก หรือ ดังนี้

<p>
This paragraph <br>
contains a lot of lines<br>
in the source code,<br>
but the browser<br>
ignores it.<br>
</p>

ผลลัพธ์

จากตัวอย่าง เมื่อเราใช้แท็ก ข้อความจะขึ้นบรรทัดใหม่ตามที่เราต้องการได้อย่างถูกต้อง

การจัดรูปแบบด้วยแท็ก <pre>

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

เราสามารถแก้ปัญหานี้ได้โดยการใช้แท็ก <pre> ดังนี้

 <pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

เมื่อใช้แท็ก <pre> ข้อความจะถูกจัดรูปแบบตามที่เราต้องการ

HTML Paragraphs การทำย่อหน้าในเอชทีเอ็มแอล