เมื่อสร้างหน้าเว็บที่มีการแสดงโค้ดหรือข้อความที่เกี่ยวข้องกับโปรแกรม การใช้ HTML Computer Code Elements จะช่วยให้ข้อความดูโดดเด่นและสื่อความหมายได้ชัดเจน
ในบทความนี้ เราจะพูดถึง HTML Computer Code Elements เช่น <code>, <pre>, <kbd> และอื่น ๆ พร้อมตัวอย่างการใช้งานแบบเข้าใจง่าย!
HTML Computer Code Elements คืออะไร?
HTML Computer Code Elements คือกลุ่มของแท็กที่ช่วยให้เราสามารถแสดงข้อความที่เกี่ยวกับโค้ด, การป้อนข้อมูล, หรือผลลัพธ์ของโค้ดในรูปแบบที่เข้าใจง่าย และเหมาะสำหรับการแสดงผลในหน้าเว็บ
แท็กที่ใช้แสดงโค้ดใน HTML
<code>
ใช้แสดงโค้ดแบบสั้นหรือคำสั่งโปรแกรม
<p>To print in Python, use <code>print()</code> function.</p>
ผลลัพธ์:
To print in Python, use print() function.
<pre>
ใช้สำหรับโค้ดหรือข้อความที่ต้องการคงรูปแบบช่องว่างและขึ้นบรรทัดใหม่ตามที่เขียน
<pre>
def hello():
print("Hello, World!")
</pre>
ผลลัพธ์:
def hello():
print("Hello, World!")
<kbd>
<kbd> ย่อมาจาก "keyboard" เป็น HTML element ที่ใช้สำหรับแสดงข้อความที่ต้องการสื่อถึงการ ป้อนข้อมูลผ่านคีย์บอร์ด หรืออุปกรณ์ input อื่น ๆ เช่น การกดปุ่มบนคีย์บอร์ด, คำสั่งที่ต้องพิมพ์ในเทอร์มินัล หรือ shortcut keys
ใช้แสดงข้อความที่ต้องป้อนจากคีย์บอร์ด
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save the file.</p>
ผลลัพธ์:
Press Ctrl + S to save the file.
<samp>
<samp> ย่อมาจาก "sample output" เป็น HTML element ที่ใช้แสดงผลลัพธ์ตัวอย่างจากโปรแกรมหรือระบบ เช่น ข้อความ error, ข้อมูลที่ได้จากโปรแกรม, หรือ output ที่แสดงในเทอร์มินัล
ใช้แสดงผลลัพธ์ที่ได้จากโปรแกรม
<p>Output: <samp>Hello, World!</samp></p>
ผลลัพธ์:
Output: Hello, World!
<var>
<var> เป็น HTML element ที่ใช้แสดงตัวแปร (variables) ในโปรแกรม, สูตรคณิตศาสตร์, หรือเนื้อหาที่เกี่ยวข้องกับการเขียนโค้ด
ใช้สำหรับตัวแปรหรือค่าที่เปลี่ยนแปลงได้
<p>The area of a circle is <code>π</code> * <var>r</var><sup>2</sup>.</p>
ผลลัพธ์:
The area of a circle is π * r².
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Code Elements Example</title>
</head>
<body>
<h1>Python Code Example</h1>
<p>Here’s a simple Python function:</p>
<pre>
def add(a, b):
return a + b
</pre>
<p>To run this, open your terminal and type:</p>
<p><kbd>python</kbd> <kbd>script.py</kbd></p>
<p>If the input is <var>a</var> = 3 and <var>b</var> = 5, the output will be:</p>
<p><samp>8</samp></p>
</body>
</html>
ข้อดี
- อ่านง่าย: ทำให้โค้ดหรือข้อมูลดูโดดเด่นและเข้าใจง่าย
- จัดรูปแบบอัตโนมัติ: ช่วยแยกข้อความธรรมดากับโค้ดออกจากกัน
- เข้ากับมาตรฐาน SEO: Semantic Elements ทำให้ Search Engine เข้าใจเนื้อหาได้ดีขึ้น
สรุป
การใช้ HTML Computer Code Elements เช่น <code>, <pre>, <kbd>, <samp> และ <var> ช่วยเพิ่มความชัดเจนในการแสดงผลโค้ดและข้อความที่เกี่ยวกับโปรแกรม หากคุณเป็น dev หรือ blogger ที่เขียนบทความเกี่ยวกับการเขียนโปรแกรม การใช้แท็กเหล่านี้จะช่วยยกระดับการนำเสนอเนื้อหาให้ดูมืออาชีพและเข้าใจง่ายมากขึ้น