Thẻ Code trong HTML: Cách Dùng, Ví Dụ & Phân Biệt với Thẻ Pre

Bạn đang xây dựng một blog hướng dẫn lập trình và loay hoay không biết làm sao để hiển thị code cho đẹp mắt? Thẻ <code> trong HTML chính là chìa khóa bạn cần. Nó giúp trình duyệt hiểu rằng đây là một đoạn mã nguồn, từ đó định dạng khác biệt so với văn bản thông thường. Trong bài viết này, Da I Kin sẽ cùng bạn tìm hiểu chi tiết cách dùng thẻ <code>, phân biệt nó với thẻ <pre>, và khám phá thêm các thẻ ngữ nghĩa liên quan để việc chèn code vào HTML trở nên chuyên nghiệp hơn bao giờ hết.

Thẻ code trong HTML là gì?

Thẻ <code> là một thẻ ngữ nghĩa trong HTML. Mục đích chính của nó rất đơn giản: đánh dấu một đoạn mã nguồn máy tính ngay trong dòng văn bản. Khi bạn bọc một đoạn text bằng thẻ <code>, bạn đang nói với trình duyệt rằng, “Này, phần này không phải là văn bản thông thường, nó là code đấy!”

Công dụng chính: Đánh dấu mã nguồn trong văn bản

Công dụng cốt lõi của thẻ <code> là để phân biệt về mặt ngữ nghĩa giữa code và văn bản thường. Hầu hết các trình duyệt mặc định sẽ hiển thị nội dung bên trong thẻ <code> bằng một phông chữ đơn cách (monospace) như Courier hoặc Monaco. Điều này giúp các đoạn mã nổi bật và dễ đọc hơn hẳn.

Nó cực kỳ hữu ích khi bạn viết các bài hướng dẫn kỹ thuật, tài liệu lập trình, hoặc bất kỳ nội dung nào cần đề cập đến tên hàm, thuộc tính CSS, hay một dòng lệnh ngắn.

Cú pháp và cách sử dụng cơ bản

Cú pháp của thẻ <code> vô cùng đơn giản. Bạn chỉ cần đặt đoạn mã nguồn của mình vào giữa cặp thẻ mở ` và thẻ đóng `.

Ví dụ, trong một câu văn bình thường:

<p>Để khai báo một biến trong JavaScript, hãy sử dụng từ khóa <code>let</code>.</p>

Kết quả hiển thị sẽ làm cho từ let có phông chữ khác biệt, giúp người đọc ngay lập tức nhận ra đó là một phần của cú pháp lập trình. Rất trực quan và hiệu quả phải không nào?

Phân biệt thẻ code và thẻ pre: Cặp đôi hoàn hảo để hiển thị code

Khi nói về định dạng code trong HTML, nhiều người thường nhầm lẫn giữa thẻ <code> và thẻ <pre>. Thực tế, chúng có chức năng khác nhau nhưng lại kết hợp với nhau một cách hoàn hảo. Hãy cùng Da I Kin làm rõ nhé.

Điểm khác biệt cốt lõi giữa code và pre

Để dễ hình dung, bạn có thể xem sự khác biệt chính qua các điểm sau:

• Loại thẻ: <code> là thẻ nội tuyến (inline), nó nằm gọn trong một dòng văn bản. Ngược lại, <pre> là thẻ khối (block), nó sẽ chiếm toàn bộ chiều rộng và luôn bắt đầu trên một dòng mới.
• Định dạng: <code> chỉ thay đổi phông chữ của văn bản thành monospace. Trong khi đó, <pre> giữ nguyên tất cả các định dạng về khoảng trắng và ngắt dòng.
• Mục đích sử dụng: <code> lý tưởng cho các đoạn mã ngắn, tên biến, tên hàm. <pre> được sinh ra để hiển thị các khối mã (code block) lớn, gồm nhiều dòng lệnh.

Tại sao nên kết hợp pre và code?

Đây chính là bí quyết để hiển thị code trên website một cách chuyên nghiệp nhất. Việc lồng thẻ <code> vào bên trong thẻ <pre> mang lại lợi ích từ cả hai:

1. Thẻ <pre>: Đảm nhận việc giữ nguyên cấu trúc, thụt đầu dòng, và xuống dòng của khối code.
2. Thẻ <code>: Cung cấp ý nghĩa ngữ nghĩa, thông báo cho trình duyệt và các công cụ tìm kiếm rằng nội dung bên trong là mã nguồn máy tính.

Sự kết hợp <pre>...</pre> này được coi là tiêu chuẩn vàng khi bạn muốn trình bày một đoạn code hoàn chỉnh, giúp mã nguồn vừa giữ đúng định dạng, vừa đúng về mặt ngữ nghĩa.

Hướng dẫn chi tiết cách hiển thị code trên website (Kèm ví dụ)

Lý thuyết là vậy, nhưng thực hành trông sẽ như thế nào? Dưới đây là hai ví dụ thẻ code HTML phổ biến nhất mà bạn sẽ sử dụng hàng ngày.

Ví dụ 1: Hiển thị một đoạn code ngắn nội tuyến (inline)

Khi bạn chỉ muốn đề cập đến một tên thẻ, một thuộc tính, hoặc một giá trị ngắn trong câu văn, hãy dùng thẻ <code> một mình. Cách này giúp nội dung của bạn liền mạch và dễ theo dõi.

Mã HTML:

<p>Thẻ <code>&lt;img&gt;</code> trong HTML được dùng để chèn hình ảnh. Đừng quên thêm thuộc tính <code>alt</code> để đảm bảo tính truy cập cho website nhé.</p>

Trong ví dụ trên, các từ khóa <img> và alt sẽ được định dạng khác biệt, giúp người đọc nhận biết ngay lập tức. Lưu ý, bạn cần dùng < và > để hiển thị các dấu < và > trên trang web.

Ví dụ 2: Tạo một hộp code hoàn chỉnh cho cả khối lệnh (block)

Khi bạn cần trình bày một đoạn mã CSS, JavaScript hay bất kỳ ngôn ngữ nào có nhiều dòng, hãy sử dụng cặp đôi quyền lực <pre><code>. Đây là cách tốt nhất để chèn code vào HTML mà vẫn giữ nguyên định dạng.

Mã HTML:

<pre><code>
function sayHello() {
  console.log("Chào mừng bạn đến với Da I Kin!");
}
sayHello();
</code></pre>

Kết quả: Trình duyệt sẽ hiển thị khối code trên với đầy đủ các dấu xuống dòng và thụt đầu dòng, tạo thành một hộp code rõ ràng và chuyên nghiệp. Hầu hết các thư viện tô màu cú pháp (syntax highlighting) cũng yêu cầu cấu trúc này để hoạt động chính xác.

Các thẻ HTML ngữ nghĩa liên quan khác

Ngoài <code>, HTML còn cung cấp một số thẻ ngữ nghĩa khác để biểu thị các loại nội dung kỹ thuật đặc thù. Việc sử dụng đúng các thẻ này sẽ giúp trang web của bạn có ngữ nghĩa tốt hơn.

Thẻ kbd

Thẻ <kbd> (keyboard input) được dùng để đánh dấu văn bản mà người dùng nhập vào thông qua bàn phím. Trình duyệt thường hiển thị nó bằng phông chữ monospace mặc định.

• Ví dụ: Để lưu tài liệu, bạn hãy nhấn tổ hợp phím Ctrl + S.

Thẻ samp

Thẻ <samp> (sample output) dùng để biểu thị kết quả hoặc đầu ra mẫu từ một chương trình máy tính hoặc một kịch bản (script).

• Ví dụ: Nếu bạn nhập sai lệnh, hệ thống sẽ báo lỗi: Command not found.

Thẻ var

Thẻ <var> (variable) dùng để đánh dấu một biến trong một biểu thức toán học hoặc một đoạn văn bản lập trình. Trình duyệt thường hiển thị nội dung này bằng chữ in nghiêng.

• Ví dụ: Trong phương trình ax² + bx + c = 0, x là biến số cần tìm.

Câu hỏi thường gặp (FAQ)

Dưới đây là một vài câu hỏi mà Da I Kin thường nhận được liên quan đến thẻ <code> và việc hiển thị mã nguồn trên website.

code {
  background-color: #f1f1f1;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: Consolas, 'Courier New', monospace;
}

pre code {
  display: block;
  background-color: #2d2d2d;
  color: #f1f1f1;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto; /* Thêm thanh cuộn ngang nếu code quá dài */
}

Lời kết

Việc sử dụng thẻ <code> đúng cách không chỉ giúp hiển thị code trên website một cách rõ ràng, mà còn cải thiện ngữ nghĩa cho trang của bạn. Hãy nhớ quy tắc đơn giản: dùng <code> cho các đoạn mã ngắn trong dòng và kết hợp <pre><code> cho các khối mã lớn.

Áp dụng những kỹ thuật này sẽ giúp các bài viết kỹ thuật của bạn trở nên chuyên nghiệp và thân thiện hơn rất nhiều với người đọc.

Bạn thấy việc sử dụng các thẻ này có dễ dàng không? Nếu có bất kỳ câu hỏi nào về thẻ code trong HTML, đừng ngần ngại để lại bình luận bên dưới nhé!

Và nếu bạn đang tìm kiếm một đơn vị thiết kế website chuyên nghiệp để thể hiện ý tưởng của mình, Da I Kin luôn sẵn sàng đồng hành. Hãy liên hệ với chúng tôi để được tư vấn chi tiết!