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

ใน HTML5 แท็ก <code> ใช้สำหรับการแสดงโค้ดโปรแกรมหรือข้อความที่มีรูปแบบเป็นโค้ด ซึ่งเป็นส่วนหนึ่งของข้อความที่อยู่ในหน้าเว็บ แท็กนี้ช่วยในการจัดรูปแบบข้อความให้เหมาะสมสำหรับการแสดงโค้ด โดยส่วนใหญ่จะใช้เพื่อแสดงโค้ดที่มีลักษณะเป็นโค้ดโปรแกรม ไม่ว่าจะเป็นภาษาใดก็ตาม เช่น HTML, JavaScript, Python, PHP เป็นต้น

รูปแบบการใช้งานของแท็ก <code>

การใช้งานพื้นฐาน ใช้แท็ก <code> เพื่อใส่โค้ดโปรแกรมภายในบรรทัดเดียว

<p>Here is a simple HTML code: <code><p>Hello World</p></code></p>

ผลลัพธ์

Here is a simple HTML code: <p>Hello World</p>

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

<pre><code>
function greet() {
    console.log("Hello, World!");
}
</code></pre>

การใช้กับภาษาโปรแกรมต่างๆ แท็ก <code> ใช้แสดงโค้ดได้หลายภาษา ตัวอย่างเช่น โค้ด Python

<p>Here is a simple Python code:</p>
<pre><code>
def hello_world():
    print("Hello, World!")
</code></pre>

การเน้นคำภายในโค้ด หากต้องการเน้นคำใดคำหนึ่งภายในโค้ดสามารถใช้แท็ก <strong> หรือ <em> ร่วมกับแท็ก <code> เช่น

<p>The function <code><strong>myFunction</strong>()</code> does the following:</p>

สรุป

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