Thẻ code trong HTML và lí do sử dụng thẻ code?

Thẻ code trong HTML là thẻ được gắn vào một đoạn code, giúp trình duyệt web đọc hiểu được đoạn dữ liệu đó một cách chính xác nhất. Cùng tìm hiểu định nghĩa cụ thể cũng như công dụng của thẻ <code> trong bài viết sau đây.

Thẻ code trong HTML giúp định nghĩa các dòng code
Nguồn: code.org

1. Thẻ code trong HTML là gì?

Thẻ code trong HTML (thẻ <code>) được dùng để đánh dấu các dòng code cho đoạn dữ liệu nó chứa. Nội dung bên trong thẻ code sẽ được mặc định sử dụng font chữ monospace của trình duyệt. 

Thẻ code nằm trong nhóm thẻ giúp định dạng dữ liệu. Cụ thể, nó giúp dữ liệu được hiển thị chính xác với định dạng ban đầu.

2. Tại sao phải dùng thẻ code và các thẻ định dạng dữ liệu khác trong HTML?

Lý do nằm ở sự khác biệt về định dạng văn bản giữa trình duyệt web và trình soạn thảo văn bản thông thường.

Trong bất cứ trình soạn thảo văn bản nào (ví dụ như Microsoft Word), các khoảng trắng được hiển thị đầy đủ với các phim Space hay phím Tab. Tương tự, các dòng hay các đoạn được ngăn cách với nhau bằng cách gõ Enter hoặc chèn Page break.

Thẻ code trong html giúp định dạng đoạn code đúng với ban đầu
Nguồn: elegantthemes

Nhưng khi đoạn văn bản với nhiều khoảng trắng như vậy được trình duyệt web đọc trên tệp HTML và CSS, các ký tự khoảng trắng và phím Enter sẽ bị bỏ qua. Do đó, để dữ liệu hiển thị trên trang web chính xác, ta cần thêm thẻ code cũng như một số thẻ định dạng dữ liệu khác. 

Nhờ có các thẻ này, trình duyệt sẽ nhận dạng được đoạn văn bản và giữ nguyên nội dung ban đầu thay vì tự động lược bớt các ký tự khoảng trắng hay ngắt đoạn. 

3. Một số thẻ định dạng dữ liệu khác trong HTML

Bên cạnh thẻ code trong HTML, còn một số thẻ định dạng dữ liệu khác cũng giúp cho đoạn văn bản được hiển thị đúng định dạng ban đầu.

Thẻ <kbd> 

Thẻ <kbd> báo cho người sử dụng nhập vào từ bàn phím :

Ví dụ: <kbd>Tự học HTML | Bài 1: HTML là gì?</kbd>

Kết quả: Tự học HTML | Bài 1: HTML là gì?

Thẻ code trong html thuộc nhóm thẻ định dạng dữ liệu
Nguồn: economist.com

Thẻ <pre>

Đặt thẻ <pre> sẽ giúp bạn giữ nguyên toàn bộ định dạng của đoạn văn bản nằm trong nó

Ví dụ

<!DOCTYPE html>

<html>

<body>

    <pre>Thẻ code trong HTML 

(thẻ <code>) được dùng để            định nghĩa các dòng code 

cho đoạn dữ liệu nó chứa. 

Nội dung bên trong thẻ code sẽ được            mặc định sử dụng font chữ 

monospace của 

trình duyệt.</pre>

</body>

</html>

Kết quả: Ta sẽ được đoạn văn bản giữ nguyên định dạng ban đầu như sau

Thẻ code trong HTML

(thẻ <code>) được dùng để            định nghĩa các dòng code 

cho đoạn dữ liệu nó chứa. 

Nội dung bên trong thẻ code sẽ được            mặc định sử dụng font chữ 

monospace của 

trình duyệt

Ngoài thẻ <pre> và thẻ <kbd> ta còn một vài thẻ khác như <samp> giúp định nghĩa cho đầu ra máy tính hay thẻ <var> giúp định nghĩa một biến.

Trên đây là một số hiểu biết cơ bản về thẻ <code>. Để dữ liệu đoạn code được đọc và hiển thị chính xác thì việc sử dụng thẻ code trong HTML là điều bắt buộc.

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

https://vn.got-it.ai/blog/wp-content/uploads/2021/04/1_QAG9RXQyyMAY7i9OYo84FA.png
Got It Vietnam
February 06, 2021
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
Những code HTML cơ bản nhất

Những code HTML cơ bản nhất

Loại code HTML cơ bản dễ học nhất hiện nay là gì? Những người lập trình viên mới vào nghề thường khá lúng túng không biết nên bắt đầu học từ đâu và học gì dễ hiểu dễ thực hành nhất. Bài viết này sẽ chia sẻ đến bạn những thẻ HTML đơn giản và […]
Ngôn ngữ HTML là gì? Tìm hiểu cấu trúc HTML

Ngôn ngữ HTML là gì? Tìm hiểu cấu trúc HTML

Cấu trúc HTML mạch lạc, khoa học giúp cho website hoạt động ổn định. Hiện nay, mỗi website đều được xây dựng với những cấu trúc khác nhau. Vậy khi phát triển website, lập trình viên nên xây dựng cấu trúc ngôn ngữ web HTML như thế nào? Got It sẽ chia sẻ những thông […]
Giới thiệu về HTML – ngôn ngữ web phổ biến nhất hiện nay

Giới thiệu về HTML – ngôn ngữ web phổ biến nhất hiện nay

Những thông tin giới thiệu về HTML sẽ giúp những người mới học lập trình trau dồi kiến thức cơ bản. Hiện nay có rất nhiều loại ngôn ngữ web mới với những ưu điểm nổi bật, nhưng HTML vẫn là loại ngôn ngữ được nhiều lập trình viên ưu tiên sử dụng. Cùng tìm […]
Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style

Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style

Style trong HTML là một thuộc tính đặc biệt dùng để khai báo các định dạng cho thẻ HTML như màu sắc, font chữ, cỡ chữ, màu nền,… Bài viết này sẽ chia sẻ những kiến thức cơ bản về thẻ style và một số thuộc tính của thẻ này.    Mục lục1. Thẻ style trong […]
Stylesheet là gì? Chức năng và lợi ích của Stylesheet

Stylesheet là gì? Chức năng và lợi ích của Stylesheet

Trước đây, khi mỗi trang web được hiển thị, người ta không thể thay đổi bất cứ thứ gì trên đó. Bài viết này sẽ chia sẻ kiến thức Stylesheet là gì và khả năng hỗ trợ của nó trong HTML động nhằm thực hiện những thay đổi trên trang. Mục lục1. Khái niệm Stylesheet […]
Hướng dẫn cách chèn thẻ video trong HTML

Hướng dẫn cách chèn thẻ video trong HTML

Thẻ video trong HTML là câu lệnh được sử dụng để chèn “trình xem phim” cho một website nào đó. Dòng lệnh này không quá khó để thực hiện. Tuy nhiên, chúng vẫn cần độ chính xác cao nhằm tối ưu hóa website của bạn một cách tốt nhất. Cách chèn thẻ video trong HTML […]