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

HTML5 การใช้งาน pre Tag

แท็ก <pre> ใน HTML5 ใช้สำหรับการแสดงข้อความหรือเนื้อหาที่จัดรูปแบบไว้ล่วงหน้า (Preformatted Text) โดยข้อความในแท็กนี้จะรักษาช่องว่าง (spaces), การขึ้นบรรทัดใหม่ (new lines) และการจัดรูปแบบอื่น ๆ ที่ถูกใส่ไว้ในตัวโค้ด HTML โดยไม่ถูกปรับเปลี่ยนตามปกติที่เบราว์เซอร์จะแปลงตัวหนังสือ

การใช้งานพื้นฐานของ <pre>

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

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pre Tag Example</title>
</head>
<body>

<h2>Example of Preformatted Text:</h2>

<pre>
  This is a preformatted text.
  Notice that spaces and newlines
  are preserved.
  
     1. Indentation is kept.
     2. Line breaks are also kept.
</pre>

</body>
</html>

ผลลัพธ์: เบราว์เซอร์จะแสดงผลข้อความตามที่เราเขียนไว้ในแท็ก <pre> โดยรักษาช่องว่างและการขึ้นบรรทัด

การประยุกต์ใช้งาน

การแสดงผลโค้ดโปรแกรม: ใช้สำหรับแสดงผลโค้ดที่ต้องการให้รักษารูปแบบต้นฉบับ เช่น โค้ด HTML, CSS หรือโค้ดโปรแกรมภาษาอื่น ๆ

HTML
<pre>
<code>
function helloWorld() {
    console.log("Hello, world!");
}
</code>
</pre>

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

การแสดงผลข้อมูลแบบตารางที่ไม่มีการจัดตาราง: สามารถใช้แท็ก <pre> สำหรับการแสดงข้อมูลตารางที่ไม่มีการจัดรูปแบบด้วยแท็ก <table>

HTML
<pre>
Name        Age       Position
------------------------------
John Doe    28        Developer
Jane Smith  34        Designer
</pre>

ผลลัพธ์: ข้อมูลจะถูกแสดงในลักษณะตารางแบบที่เขียนไว้ โดยรักษาระยะห่างและการจัดเรียงตามที่เราต้องการ

แสดงไฟล์ log หรือข้อมูลดิบจากระบบ: สำหรับกรณีที่ต้องการแสดงผลข้อมูลแบบไฟล์ log หรือข้อมูลดิบอื่น ๆ แท็ก <pre> จะเป็นทางเลือกที่ดีในการแสดงเนื้อหาที่ไม่ต้องการให้มีการเปลี่ยนแปลงใด ๆ

HTML
<pre>
[INFO] Starting application...
[WARN] Low disk space.
[ERROR] Unable to save file.
</pre>

การแสดงผลข้อมูลภาษาเขียนที่ต้องการการจัดระยะพิเศษ: ถ้าเรามีเนื้อหาที่ต้องการจัดระยะหรือจัดเว้นบรรทัดให้เหมือนต้นฉบับ เช่น บทกวี หรือร้อยกรองที่ต้องรักษารูปแบบเดิม

HTML
<pre>
Roses are red,
Violets are blue,
This text is formatted,
Just for you.
</pre>

สรุปการใช้งาน

แท็ก <pre> มีความสำคัญในการแสดงผลข้อความที่ต้องการให้รักษารูปแบบการจัดการเว้นวรรคและขึ้นบรรทัดตามที่เขียนใน HTML โดยเหมาะกับการใช้งานหลากหลายประเภท เช่น การแสดงผลโค้ดโปรแกรม ข้อมูลตารางที่ไม่มีการจัดรูปแบบ การแสดงข้อมูล log และการแสดงบทกวีหรือข้อมูลอื่น ๆ ที่ต้องการรักษาระยะ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ