1. Giới thiệu

Trong HTML, có nhiều phần tử được sử dụng để hiển thị mã máy tính, bao gồm các đoạn mã nguồn, kết quả đầu ra, hoặc tên biến. Các phần tử này giúp định dạng văn bản để nó trông giống mã code, giúp người đọc dễ dàng nhận diện và hiểu được các dòng mã. Các phần tử này không chỉ quan trọng trong việc hiển thị mã mà còn hỗ trợ trong việc làm tài liệu hướng dẫn lập trình, ghi chú, và các trang web học tập.

Trong bài viết này, chúng ta sẽ tìm hiểu các phần tử HTML được sử dụng để hiển thị mã máy tính và cách chúng được sử dụng trong thực tế.

2. Các phần tử HTML dùng để hiển thị mã máy tính

a. <code> – Phần tử để hiển thị mã

Phần tử <code> được sử dụng để định dạng một đoạn văn bản như là mã máy tính. Nội dung bên trong <code> thường được hiển thị với một font chữ đơn cách (monospace) giúp dễ phân biệt với văn bản thông thường.

Ví dụ:

html
Thử online
<p>Hàm trong JavaScript có thể được viết như sau: <code>function myFunction() { ... }</code></p>

Kết quả:

Hàm trong JavaScript có thể được viết như sau: function myFunction() { ... }

b. <pre> – Phần tử định dạng trước

Phần tử <pre> được sử dụng để giữ nguyên định dạng của văn bản, bao gồm cả khoảng trắng, dòng xuống (new lines), và tab. Điều này rất hữu ích khi bạn muốn hiển thị các đoạn mã nguồn với định dạng như khi bạn viết trong trình soạn thảo mã.

Ví dụ:

html
Thử online
<pre>
function myFunction() {
    console.log("Xin chào, CodeTutHub!");
}
</pre>

Kết quả: Đoạn mã sẽ giữ nguyên định dạng và hiển thị với font chữ đơn cách.

c. <samp> – Phần tử hiển thị kết quả đầu ra

Phần tử <samp> được sử dụng để hiển thị kết quả đầu ra từ chương trình hoặc đoạn mã. Nó thường được sử dụng để mô phỏng kết quả in ra của chương trình hoặc hiển thị các đoạn phản hồi từ hệ thống.

Ví dụ:

html
Thử online
<p>Chương trình in ra kết quả: <samp>Hello, world!</samp></p>

Kết quả:

Chương trình in ra kết quả: Hello, world!

d. <kbd> – Phần tử hiển thị thao tác bàn phím

Phần tử <kbd> được sử dụng để biểu diễn một chuỗi các ký tự mà người dùng cần nhập từ bàn phím. Điều này thường được sử dụng trong các tài liệu hướng dẫn, nơi bạn muốn hiển thị các phím hoặc tổ hợp phím.

Ví dụ:

html
Thử online
<p>Nhấn <kbd>Ctrl</kbd> + <kbd>C</kbd> để sao chép văn bản.</p>

Kết quả:

Nhấn Ctrl + C để sao chép văn bản.

e. <var> – Phần tử hiển thị biến

Phần tử <var> được sử dụng để biểu diễn một biến hoặc tham số trong biểu thức toán học hoặc lập trình. Văn bản trong <var> thường được hiển thị với kiểu chữ nghiêng.

Ví dụ:

html
Thử online
<p>Biến <var>x</var> đại diện cho giá trị chưa được xác định.</p>

Kết quả:

Biến x đại diện cho giá trị chưa được xác định.

3. Kết hợp các phần tử HTML để hiển thị mã code

Trong nhiều trường hợp, bạn cần kết hợp các phần tử <code>, <pre>, <kbd>, và <var> để hiển thị một cách rõ ràng và chính xác mã nguồn cùng với các hướng dẫn về đầu vào và kết quả.

Ví dụ kết hợp các phần tử:

html
Thử online
<pre>
<code>
let userName = prompt("Xin chào! Nhập tên của bạn:");
console.log("Tên của bạn là " + userName);
</code>
</pre>
<p>Kết quả của đoạn mã sẽ là: <samp>Tên của bạn là [tên người dùng]</samp></p>
<p>Nhấn <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> để mở Developer Tools và xem kết quả trong Console.</p>

4. Ví dụ thực tế sử dụng các phần tử code

Dưới đây là một ví dụ thực tế về việc sử dụng các phần tử HTML code để hiển thị một đoạn mã JavaScript và hướng dẫn người dùng cách chạy mã đó:

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hiển thị mã code trong HTML - codetuthub.com</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        pre {
            background-color: #f4f4f4;
            padding: 10px;
            border: 1px solid #ddd;
            overflow-x: auto;
        }
        code {
            font-family: "Courier New", Courier, monospace;
        }
    </style>
</head>
<body>

<h1>Ví dụ: Sử dụng HTML để hiển thị mã JavaScript</h1>

<p>Đoạn mã sau yêu cầu người dùng nhập tên và hiển thị thông báo chào mừng:</p>

<pre>
<code>
let userName = prompt("Xin chào! Nhập tên của bạn:");
console.log("Tên của bạn là " + userName);
</code>
</pre>

<p>Chạy đoạn mã và mở <kbd>Console</kbd> trong <kbd>Developer Tools</kbd> để xem kết quả.</p>

</body>
</html>

Trong ví dụ này:

  • <pre> giữ nguyên định dạng và giúp hiển thị mã trên nhiều dòng.
  • <code> giúp định dạng đoạn mã nguồn với font chữ đơn cách.
  • <kbd> biểu diễn các tổ hợp phím mà người dùng cần nhấn.

5. Kết luận

Sử dụng các HTML code elements như <code>, <pre>, <samp>, <kbd>, và <var> là cách tốt nhất để trình bày mã máy tính, kết quả đầu ra và các thao tác liên quan đến lập trình trên trang web của bạn. Những phần tử này không chỉ giúp hiển thị mã một cách dễ hiểu mà còn làm cho tài liệu của bạn trở nên chuyên nghiệp hơn.

Hãy áp dụng những kiến thức này vào các dự án tài liệu kỹ thuật, hướng dẫn lập trình hoặc các trang web chia sẻ mã nguồn để cải thiện trải nghiệm người dùng khi làm việc với mã máy tính!