ใน HTML การจัดย่อหน้าของข้อความจะใช้ แท็ก (Tag) <p> หรือ Paragraph ซึ่งเป็นแท็กที่ใช้สำหรับขึ้นย่อหน้าใหม่ โดยเบราว์เซอร์จะจัดระยะห่างก่อนและหลังย่อหน้าให้อัตโนมัติ ทั้งนี้ HTML จะไม่สนใจการเว้นวรรคหรือการขึ้นบรรทัดในโค้ดต้นฉบับ
HTML Paragraphs
คำสั่ง <p> ของ HTML จะเป็นคำสั่งที่ใช้จัดการเกี่ยวกับย่อหน้า ซึ่งเมื่อพิมพ์คำสั่งนี้จะเป็นการขึ้นย่อหน้าใหม่เสมอ เพราะเบราว์เซอร์จะทำการเพิ่มระยะห่างของข้อความทั้งก่อนและหลังให้โดยอัตโนมัติ
ตัวอย่างการใช้งาน
<p>ตัวอย่างข้อความที่ 1</p>
<p>ตัวอย่างข้อความที่ 2</p>
<p>ตัวอย่างข้อความที่ 3</p>
HTML Paragraphs
คุณไม่มีทางรู้ได้เลยว่า HTML จะแสดงผลของข้อความอย่างไร ขนาดของหน้าจอเล็ก หรือใหญ่ก็แสดงผลลัพท์ที่แตกต่างกัน ถึงแม้ว่าคุณจะมีการจัดรูปแบบข้อความมาอย่างดี ในหน้าแสดงผล เบราว์เซอร์ก็จะลบช่องว่างและบรรทัดออกไปโดยอัตโนมัติ
ตัวอย่างการจัดรูปแบบข้อความ
<p>
ข้อความนี้
ประกอบด้วยข้อความ
หลายบรรทัด
แต่เบราว์เซอร์ก็ไม่สนใจอยู่ดี
</p>
<p>
ข้อความนี้
ประกอบด้วย ช่องว่างเยอะแยะ
แต่ อย่างไรตาม
เบราว์เซอร์ก็ยัง ไม่สนใจอยู่ดี
</p>
<p>
จำนวนบรรทัดของเบราว์เซอร์ จะขึ้นอยู่กับขนาดของหน้าต่างที่ข้อความแสดง ถ้าคุณปรับขนาดของหน้าต่างเบราว์เซอร์ที่ใช้แสดงผลโค้ด HTML คุณจะพบว่าจำนวนของบรรทัดเปลี่ยนไป
</p>
HTML Horizontal Rules
แท็ก (Tag) <hr> เป็นคำสั่ง HTML ที่ใช้สร้างเส้นตรงแนวนอนเพื่อแยกข้อความหรือเนื้อหาในหน้าเว็บ โดยเป็นแท็กที่ไม่มีแท็กปิด
ตัวอย่าง
<h1>หัวข้อที่ 1</h1>
<p>ข้อความที่ 1</p>
<hr>
<h2>หัวข้อที่ 2</h2>
<p>ข้อความที่ 2</p>
<hr>
<h2>หัวข้อที่ 3</h2>
<p>ข้อความที่ 3</p>
HTML Line Breaks
Tag <br> เป็นคำสั่ง HTML ที่ใช้สำหรับขึ้นบรรทัดใหม่ โดยหากต้องการขึ้นบรรทัดใหม่โดยไม่เริ่มย่อหน้าใหม่ เป็นแท็กที่ไม่มีแท็กปิด
ตัวอย่าง
<p>ตัวอย่าง<br>การจัดข้อความ<br>ด้วยคำสั่ง br</p>
บทกลอนเจ้าปัญหา
เมื่อคุณเขียนบทกลอนด้วยโค้ดต่อไปนี้
ตัวอย่าง
<p>HTML จะไม่สนใจในเรื่องบรรทัดหรือช่องว่างเลย</p>
<p>เมื่อเราเขียนบทกลอนดังนี้ </p>
<p>
ไม่เมาเหล้าแล้วแต่เรายังเมารัก
สุดจะหักห้ามจิตคิดไฉน
ถึงเมาเหล้าเช้าสายก็หายไป
แต่เมาใจนี้ประจำทุกค่ำคืน
</p>
วิธีแก้ปัญหา “บทกลอนเจ้าปัญหา” ด้วย Element <pre>
Element
<pre> จะช่วยในเรื่องของการกำหนดการจัดรูปแบบข้อความ โดยข้อความที่อยู่ภายใน <pre> จะแสดงขนาดความกว้างของตัวอักษร ขนาดของช่องว่าง และความกว้างของแต่ละบรรทัดให้เท่าๆ กัน ซึ่งปกติแล้วจะใช้ Courier
ตัวอย่าง
<p>Tag pre จะจัดรูปแบบตัวอักษร ข้อความและระยะห่างระหว่างบรรทัดให้เท่าๆ กัน</p>
<pre>
ไม่เมาเหล้าแล้วแต่เรายังเมารัก
สุดจะหักห้ามจิตคิดไฉน
ถึงเมาเหล้าเช้าสายก็หายไป
แต่เมาใจนี้ประจำทุกค่ำคืน
</pre>
สรุป
| Tag | คำอธิบาย |
|---|---|
<p> |
ใช้กำหนดย่อหน้า |
<hr> |
เส้นตรงแนวนอนเพื่อแยกข้อความหรือเนื้อหาในหน้า HTML |
<br> |
ใช้เพื่อขึ้นบรรทัดใหม่ |
<pre> |
กำหนดการจัดรูปแบบข้อความ |