HTML Spaces (การเว้นวรรค)

   อัปเดตล่าสุด Nov. 15, 2024

HTML บนเว็บเบราว์เซอร์นั้นจะละเว้นช่องว่างไว้ ซึ่งหมายความว่าหากเราเพิ่มช่องว่างหลายช่องระหว่างคำหรือ HTML Elements ช่องว่างเหล่านั้นจะถูกรวมเป็นแค่ช่องว่างเดียว เมื่อต้องการแทรกช่องว่างใน HTML


ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<title>How to insert spaces into HTML</title>
</head>
<body>
<p>We are DH Learning, we'll help you learn HTML fast</p>
<p>We are DH Learning, we'll help you learn HTML fast</p>
<p>We are DH Learning, we'll help you learn HTML fast</p>
<p>We are DH Learning, we'll help you learn HTML fast</p>
</body>
</html>


จากโค้ดด้านบนจะเห็นว่าแม้ว่าเราจะเคาะกี่ครั้ง แต่สุดท้ายแล้วจะถูกรรวมเป็น 1 space อยู่ดี

โดยจะได้ผลลัพธ์ด้งนี้

We are DH Learning, we'll help you learn HTML fast

We are DH Learning, we'll help you learn HTML fast

We are DH Learning, we'll help you learn HTML fast

We are DH Learning, we'll help you learn HTML fast


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

1. ใช้คำสั่ง &nbsp; สำหรับเว้นวรรค HTML

การใช้คำสั่ง   &nbsp;   นี่เป็น วิธีการเว้นวรรคหรือเพิ่มช่องว่างที่เรียบง่ายที่สุดเลยก็ว่าได้ครับ

<!DOCTYPE html>
<html>
<head>
<title>How to insert spaces into HTML</title>
</head>
<body>
<p>We are DH Learning, we'll help you learn HTML fast</p>
<p>We are &nbsp;&nbsp;DH Learning, we'll help you learn HTML fast</p>
</body>
</html>


จะได้ผลลัพธ์

We are DH Learning, we'll help you learn HTML fast

We are DH Learning, we'll help you learn HTML fast

จะสังเกตเห็นว่าคำว่า DH นั้นจะมีช่องว่างเว้นวรรคแล้วเรียบร้อยด้วยคำสั่ง  &nbsp;


2. ใช้ <pre>

การใช้คำสั่ง pre ถือว่าเป็นอีกตัวเลือกที่น่าสนใจเพราะอะไรลองดูโค้ดต่อไปนี้ครับ (เดี๋ยวมาเขียนต่อครับ)




คอร์สเรียนแนะนำ

SEO for Web Developer 2024

คอร์สใหม่ล่าสุด สอนแบบ official ที่แรกและที่เดียว ย่อยมาให้แล้วจากประสบการณ์ก…

พัฒนาเว็บไซต์ด้วย Django Python

คอร์สอบรม เรียนทำเว็บ ด้วย Django สุดยอด web framework อันดับ 1 ที่ได้รับ…