HTML New Line: การขึ้นบรรทัดใหม่ด้วย <br> และ <pre>

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

คุณเคยต้องการเพิ่มบรรทัดใหม่บนหน้าเว็บหรือไม่? คุณไม่สามารถเพิ่มบรรทัดใหม่ได้โดยแค่กด Enter แทนที่จะต้องใช้แท็ก HTML ที่สร้างขึ้นเพื่อวัตถุประสงค์สร้างบรรทัดใหม่

ในบทช่วยสอนนี้ เราจะพูดถึงแท็ก HTML <br> และ <pre> ทั้งสองแท็กช่วยเพิ่มบรรทัดใหม่ในข้อความ HTML เริ่มกันเลย

HTML New Line: <br> และ <pre>

บางครั้งเมื่อเราเขียน HTML เราต้องเพิ่มการขึ้นบรรทัดหรือช่องว่างไปยัง UI ช่องว่างเหล่านี้ทำให้หน้าเว็บอ่านง่ายขึ้น มี 2 วิธีในการเพิ่มบรรทัดใหม่ใน HTML:

• แท็ก <br>: สร้างการขึ้นบรรทัด (line break)
• แท็ก <pre>: จัดรูปแบบข้อความให้ตรงกับที่เขียนในโค้ด

แท็ก HTML <br>

เราสามารถเพิ่มบรรทัดใหม่ในข้อความได้โดยใช้แท็ก <br> แท็กนี้ที่รู้จักในชื่อ break return element จะแทรกบรรทัดใหม่หลังองค์ประกอบก่อนหน้า

ไวยากรณ์ของแท็กนี้คือ:

<p> Test<br> </p>

แท็ก <br> เพิ่มบรรทัดใหม่หลังคำว่า "Test" แท็กนี้ไม่มีแท็กปิด แทนที่จะต้องเพิ่ม <br> ที่ตำแหน่งใดก็ตามที่คุณต้องการบรรทัดใหม่ มาดูตัวอย่างโดยละเอียด:

นี่คือการใช้หลังแต่ละบรรทัดในที่อยู่:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line Breaks</title>
</head>
<body>
  <div>
    <p>Lorem ipsum dolor sit amet...</p>
    <address>
      <span>123 Main St</span><br>
      <span>Hometown, USA</span><br>
      <span>23455-2345</span>
    </address>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</body>
</html>

ในโค้ดนี้ เราใช้แท็ก <br> หลังแท็ก HTML <span> ในแท็ก <address> ซึ่งเพิ่มบรรทัดใหม่ให้แต่ละส่วนของที่อยู่

แท็ก HTML <pre>

แท็ก HTML <pre> แทรกข้อความที่จัดรูปแบบไว้ล่วงหน้า (preformatted text) ลงในโค้ดของคุณ แท็กนี้จะแทรกข้อความตรงตามที่เราป้อนในมาร์กอัป ดังนั้น การขึ้นบรรทัดในข้อความจะปรากฏในโค้ดสุดท้าย

ต่างจากแท็ก <br> องค์ประกอบ <pre> มีทั้งแท็กเปิดและแท็กปิด นี่คือไวยากรณ์ของแท็ก <pre> ในโค้ด HTML:

<pre> This is a sentence. </pre>

โค้ดนี้จัดรูปแบบข้อความ "This is a sentence" ให้ตรงกับที่ปรากฏระหว่างแท็ก <pre>

ข้อสังเกตของแท็ก <pre> คือ ทุกอย่างจะถูกป้อน ตรงตาม ที่คุณเขียนในโค้ด

ข้อความที่คัดลอก-วาง (copy/pasted) ไม่มีการขึ้นบรรทัด ดังนั้นข้อความที่คัดลอก-วางอาจไม่ปรากฏตามที่คาดหวัง คอมไพเลอร์อ่านมันเป็นบรรทัดเดียวต่อเนื่อง โดยการเพิ่มการขึ้นบรรทัดจริง (กดปุ่ม Return หรือ Enter) จะทำให้พฤติกรรมที่คาดหวังเกิดขึ้น

มา看看ตัวอย่างโดยละเอียดของแท็ก <pre>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line Breaks</title>
</head>
<body style="max-width: 800px; width: 100%;">
  <pre style="width: 100%;">
    <p style="width: 800px;"> Lorem, ipsum dolor sit amet... </p>
    <address>
      2345 Main St.
      Hometown, Anywhere, USA
      12345-3456
    </address>
    <p style="width: 800px; height: 500px; background: pink;"> ... </p>
  </pre>
</body>
</html>

เราเพิ่มแท็ก <pre> ทันทีหลังแท็ก <body> ในโค้ดของเรา ข้อความทั้งหมดภายในแท็ก — แท็กย่อหน้า HTML และแท็ก <address> — ถูกจัดรูปแบบตามที่ปรากฏในโค้ด

เราไม่ต้องใช้แท็ก <br> ในที่อยู่ เนื่องจากเราแทรกบรรทัดใหม่โดยใช้ปุ่ม Enter ในโค้ด

ปกติแล้ว จะไม่สามารถเพิ่มบรรทัดใหม่ในเอกสารได้ แต่เพราะเราใช้แท็ก <pre> การขึ้นบรรทัดที่สร้างด้วยปุ่ม Enter จึงปรากฏในเอกสารสุดท้าย

สรุป

มี 2 วิธีในการแทรกการขึ้นบรรทัดใน HTML: <br> และ <pre> แท็ก <br> มีประโยชน์หากคุณต้องการเพิ่มบรรทัดใหม่เดี่ยวในตำแหน่งเฉพาะ ส่วน <pre> เหมาะกว่าหากคุณมีบล็อกข้อความที่ต้องการให้ปรากฏเหมือนในโค้ดของคุณ

ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเขียนโค้ด HTML? เรามี คู่มือ How to Learn HTML ซึ่งรายการหลักสูตรและทรัพยากรชั้นนำที่คุณสามารถใช้เพื่อพัฒนาความรู้