Thẻ code trong HTML
Bùi Tấn Lực - 864
- 27/09/2025
Chức năng của Thẻ code trong HTML
Thẻ code trong HTML dùng để chứa các đoạn code, một từ khóa, hoặc một đoạn văn bản được coi là mã máy tính và có thể css những đoạn code đó, font mặc định trong thẻ code monospace.
Cú pháp của Thẻ code trong HTML
<code>vanbanhoachtml</code>
vanbanhoachtml: Văn bản hoặc HTML.
Ví dụ Thẻ code trong HTML
Thẻ code mặc định trong HTML
<h1>Thẻ code mặc định trong HTML</h1>
<!--font mặc định là monospace-->
<p>CSS <code><span class="classspan">color</span></code> là một thuộc tính dùng để quy định màu sắc của văn bản, nền, đường viền, và các yếu tố khác trên trang web</p>
Css cho thẻ code trong HTML
<!DOCTYPE html>
<html>
<head>
<title>Css cho thẻ code trong HTML</title>
<style>
code {
font-family: Consolas,"courier new";
color: crimson;
background-color: #f1f1f1;
padding: 2px;
font-size: 105%;
}
</style>
</head>
<body>
<h1>Css cho thẻ code trong HTML</h1>
<!--font mặc định là monospace-->
<p>CSS <code><span class="classspan">color</span></code> là một thuộc tính dùng để quy định màu sắc của văn bản, nền, đường viền, và các yếu tố khác trên trang web</p>
</body>
</html>
Lưu ý khi sử dụng thẻ code trong HTML
Khi sử dụng thẻ code trong HTML, cần hiểu rõ mục đích của thẻ này để trình bày mã nguồn đúng cách. Thẻ code phù hợp với những đoạn mã ngắn nằm trong nội dung văn bản, giúp trình duyệt nhận biết đây là phần mã lập trình cần được hiển thị khác với nội dung thông thường.
Không nên lạm dụng thẻ code cho toàn bộ đoạn mã dài vì thẻ này không có chức năng giữ nguyên xuống dòng hoặc khoảng trắng. Với các đoạn mã nhiều dòng, nên kết hợp cùng thẻ pre để đảm bảo cách hiển thị chính xác và dễ theo dõi hơn.
Phân biệt thẻ code với thẻ pre trong HTML
Thẻ code và thẻ pre thường được sử dụng cùng nhau nhưng có vai trò khác nhau. Thẻ code dùng để đánh dấu nội dung là một đoạn mã, trong khi thẻ pre giúp giữ nguyên định dạng ban đầu của nội dung như khoảng trắng, xuống dòng và căn chỉnh.
Ví dụ, khi hiển thị một câu lệnh ngắn trong đoạn văn, chỉ cần dùng thẻ code. Nhưng với một đoạn mã gồm nhiều dòng, việc đặt code bên trong pre sẽ giúp mã nguồn hiển thị rõ ràng hơn.
<p>Đây là nội dung được hiển thị bằng HTML</p>
Trong ví dụ trên, thẻ code đảm nhận việc xác định phần nội dung là mã HTML, còn thẻ pre giúp trình bày đoạn mã theo đúng cấu trúc ban đầu.
Khi nào nên sử dụng thẻ code trong nội dung website
Thẻ code nên được sử dụng khi website cần hiển thị các đoạn mã nhỏ trong bài viết, tài liệu hướng dẫn hoặc nội dung liên quan đến lập trình. Việc sử dụng đúng thẻ giúp người đọc dễ nhận biết đâu là câu lệnh, tên biến, thuộc tính hoặc đoạn mã cần sao chép.
- Hiển thị tên thẻ HTML, thuộc tính hoặc câu lệnh ngắn trong bài viết.
- Trình bày đoạn mã minh họa nằm trong phần giải thích.
- Làm nổi bật các thuật ngữ kỹ thuật liên quan đến lập trình.
Đối với các bài viết hướng dẫn lập trình trên website, việc kết hợp code và pre hợp lý sẽ giúp nội dung chuyên nghiệp hơn, đồng thời cải thiện trải nghiệm đọc khi người dùng cần tham khảo hoặc sao chép mã nguồn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ code trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
