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

HTML5 การใช้งาน Code Element

ใน HTML5 องค์ประกอบ <code> ถูกใช้เพื่อแสดงข้อความที่เป็นโค้ดคอมพิวเตอร์หรือโค้ดโปรแกรม ซึ่งโดยทั่วไปจะเป็นข้อความที่ต้องการให้แตกต่างจากข้อความธรรมดา เพื่อระบุว่าเป็นคำสั่งของโปรแกรมหรือภาษาโปรแกรมใดๆ

การใช้งาน <code> ใน HTML5

แสดงโค้ดในบรรทัดเดียวกันกับข้อความ (Inline code): <code> ใช้เพื่อแสดงโค้ดคอมพิวเตอร์ที่อยู่ในบรรทัดเดียวกันกับข้อความทั่วไป

ตัวอย่าง

HTML
<p>To display a message, use the <code>console.log()</code> function in JavaScript.</p>

ผลลัพธ์: To display a message, use the console.log() function in JavaScript.

แสดงโค้ดหลายบรรทัดในรูปแบบบล็อก (Code block): หากต้องการแสดงโค้ดหลายบรรทัดหรือโค้ดบล็อกขนาดใหญ่ มักจะใช้ร่วมกับแท็ก <pre> ซึ่งเป็นการเก็บการจัดรูปแบบ (เช่นการเว้นวรรค) และแสดงโค้ดในลักษณะตามจริง

ตัวอย่าง

HTML
<pre><code>
function greet(name) {
    console.log("Hello, " + name);
}
greet("Alice");
</code></pre>

ผลลัพธ์

function greet(name) {
    console.log("Hello, " + name);
}
greet("Alice");

การแสดงโค้ดภายในฟอร์แมตอื่น ๆ (Nested Code): เราสามารถใช้ <code> ร่วมกับแท็กอื่นๆ เช่น <p>, <blockquote>, หรือ <div> เพื่อแสดงโค้ดในส่วนต่างๆ ของหน้าเว็บไซต์

ตัวอย่าง

HTML
<blockquote>
  You can use the <code><a></code> tag to create links in HTML.
</blockquote>

ผลลัพธ์: You can use the <a> tag to create links in HTML.

การใช้ <kbd> ร่วมกับ <code>: เมื่อแสดงโค้ดที่ต้องการให้ผู้ใช้พิมพ์ผ่านคีย์บอร์ด สามารถใช้ <kbd> ร่วมกับ <code> เพื่อเน้นว่าเป็นการพิมพ์คำสั่ง

ตัวอย่าง

HTML
<p>Press <kbd><code>Ctrl + C</code></kbd> to copy the selected text.</p>

ผลลัพธ์: Press Ctrl + C to copy the selected text.

การใช้ร่วมกับ <samp> แสดงผลลัพธ์จากโค้ด: <samp> ใช้สำหรับแสดงผลลัพธ์ของโค้ดที่รัน

ตัวอย่าง

HTML
<p>The output of the command <code>ls</code> will be: <samp>file1.txt file2.txt</samp></p>

ผลลัพธ์: The output of the command ls will be: file1.txt file2.txt

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

  • การเขียนเอกสารสอนการเขียนโปรแกรม: สามารถใช้ <code> เพื่อเน้นส่วนของโค้ดหรือคำสั่งต่างๆ ที่สำคัญในเอกสารสอนการเขียนโปรแกรมหรือเอกสารประกอบซอฟต์แวร์
  • การสร้างคู่มือการใช้งานโปรแกรม: ใช้แสดงโค้ดหรือคำสั่งคอมพิวเตอร์ที่ผู้ใช้ต้องพิมพ์หรือปฏิบัติตาม
  • การเขียนบล็อกหรือบทความทางเทคนิค: การนำเสนอและอธิบายโค้ดเพื่อให้ผู้อ่านสามารถเข้าใจได้ง่าย

โดยสรุป องค์ประกอบ <code> ใน HTML5 เป็นเครื่องมือที่มีประโยชน์ในการแสดงโค้ดคอมพิวเตอร์ ซึ่งสามารถปรับใช้ร่วมกับองค์ประกอบอื่นๆ เพื่อสร้างรูปแบบการแสดงผลที่หลากหลายตามความต้องการ

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

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