HTML Entity và Comment trong HTML & CSS

Chào mừng các bạn đã đến với bài đầu tiên của series HTML & CSS nâng cao!

Liệu các bạn đã từng hỏi làm cách nào để tạo ra một ký tự đặc biệt kiểu như ¶ , © hoặc § khi soạn thảo 1 trang HTML. Hay liệu bạn có từng hỏi rằng nếu một file HTML/CSS có đến vài nghìn dòng code thì làm cách nào để có thể đánh dấu code nhằm giúp lập trình viên có thể dễ dàng nhận diện mục đích, chức năng, phân đoạn nội dung… của các dòng code đã viết trong quá trình soạn thảo, trong khi người xem (visitor) sẽ không thể nhìn thấy những đánh dấu này. Câu trả lời sẽ nằm trong nội dung bài giảng này.

Nào chúng ta cùng bắt đầu thôi!

HTML Entity (Thực thể HTML)

HTML Entity (Thực thể HTML) là gì?

Như đã đề cập trong Bài 2 của Series HTML & CSS căn bản, bản chất của cú pháp HTML là sự liên kết theo mối quan hệ cha – con của các phần tử HTML, trong đó mỗi phần tử HTML tồn tại dưới dạng Nested (phần tử có chứa nội dung hay còn gọi là cặp thẻ <tag></tag>) và Empty (phần tử rỗng hay còn gọi là thẻ đơn <tag/>). Tuy nhiên, trong HTML còn một loại cú pháp đặc biệt tách biệt khỏi những nguyên tắc trên, được dùng để tạo ra một số ký tự đặc biệt (Ví dụ: < , > , & , ©…). Đó chính là HTML Entity (tạm dịch là thực thể HTML).

Vì sao có sự tồn tại của HTML Entity?

Nếu ta viết một phần tử thẻ <a></a> trong một file soạn thảo HTML, nó sẽ được render thành một liên kết. Vậy làm cách nào để ta có thể viết nguyên văn các ký tự <a></a> để người dùng (visitor) có thể xem trên nội dung của một trang HTML, giống như cách hoccode.org thường làm để các bạn có thể xem các mẫu code? Đó chính là nguyên nhân cho sự ra đời của HTML Entity.

Cách viết HTML Entity (cú pháp) như thế nào?

Có 2 cách để ta có thể tạo một HTML Entity trong quá trình soạn thảo code HTML

Cách 1
Cách 2

Cú pháp: & + Tên Entity

Ví dụ:

< → <

> →>

€ → €

Cú pháp: &# + Mã số Entity

Ví dụ:

&#60 → <

&#62 →>

&#128 → €

Lưu ý:

Một số HTML Entity chỉ có Mã Số Entity mà không có Tên Entity. Ví dụ, để dùng HTML tạo ra ký tự

{

ta chỉ có thể dùng cú pháp theo cách 2 (Mã số entity): &#123.
Tên Entity luôn có tận cùng là dấu ; trong khi mã số Entity thì không có.

Làm thế nào để tra cứu HTML Entity?

Chắc hẳn sau khi xem qua cú pháp của HTML Entity, bạn sẽ tự hỏi rằng làm cách nào để biết tên hay mã số Entity để áp dụng vào thực tế? Chắc chắn rằng chúng ta không thể luôn nhớ chính xác từng tên hay mã số Entity, mà dù có nhớ chính xác thì cũng không thể nhớ hết chúng, bởi có đến hàng trăm HTML Entity đã và đang tồn tại. Và cách duy nhất để ta có thể xác định được tên hay mã số Entity cần dùng là thông qua tra cứu.

Bạn có thể click vào đây để xem danh sách đầy đủ tất cả các HTML Entity.

Bạn có thể Google search với từ khoá: HTML Entity complete list.

Hãy lưu một trang danh sách mà bạn cho là tốt nhất vào bookmark của trình duyệt để tiện tra cứu cho những trường hợp mà bạn sẽ cần đến trong tương lai.

Nếu viết sai cú pháp HTML Entity thì ảnh hưởng như thế nào?

Trường hợp nếu bạn viết sai cú pháp của một hay nhiều HTML Entity thì chỉ có 2 khả năng xảy ra:

HTML Entity đó sẽ không xuất hiện dưới dạng symbol hay ký tự mà bạn mong muốn (HTML Entity không hoạt động)
HTML Entity đó sẽ xuất hiện dưới dạng một symbol hay ký tự của một HTML Entity khác (nhầm lẫn HTML Entity)

Việc viết sai cú pháp của HTML Entity hoàn toàn không ảnh hưởng đến bố cục của trang HTML đó.

Comment trong HTML & CSS

Comment trong HTML & CSS là gì?

Trong trong HTML & CSS nói riêng và lập trình nói chung, comment là một phương pháp giúp lập trình viên có thể đánh dấu, ghi chú trên file soạn thảo code mà không ảnh hưởng đến nội dung hay hoạt động của các dòng code.

Đây cũng chính là câu trả lời cho câu hỏi thứ 2 đã được nêu ở đầu bài.

Cách để tạo comment (cú pháp comment) trong HTML & CSS như thế nào?

Để tạo comment trong HTML & CSS rất đơn giản, ta chỉ cần tuân theo cú pháp sau đây:

HTML
CSS

<!– Nội dung comment (ghi chú, đánh dấu…) –!>

Ví dụ:

...
<!-- Bắt đầu thanh Menu chính --!>
<nav id="main-menu">
<ul>
<li><a href="/home.html">Trang chủ</a></li>

<li><a href="/gioi-thieu.html">Giới thiệu</a></li>
</ul>
</nav>
<!-- Kết thúc thanh Menu chính --!>
...

/* Nội dung comment (ghi chú, đánh dấu…) */

Ví dụ:

... /* Style cho thanh menu chính */
#main-menu {
background: #ccc;
box-shadow: 0 0 20px rgba(150,68,1,.45);
}
#main-menu > ul {
list-style: none;
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 0px;
text-align: center;
} /* Style cho thanh menu chính */
...

Bắt đầu bằng tổ hợp ký tự <!–

Kết thúc bằng tổ hợp ký tự –!>

Bắt đầu bằng tổ hợp ký tự /*

Kết thúc bằng tổ hợp ký tự */

Lưu ý:

Sai sót trong cú pháp comment có thể khiến một đoạn mã HTML hay CSS không hoạt động, từ đó dẫn đến phá vỡ bố cục trang, mất đi những định dạng phong cách, hiệu ứng…
Bạn có thể comment với độ dài bao nhiêu tuỳ thích (không giới hạn độ dài comment)
Bạn có thể tạo vô số comment trong 1 file HTML hay CSS tuỳ thích (không giới hạn số lượng comment)

Như vậy, ta đã tìm hiểu qua 2 tính năng hữu dụng & thú vị trong HTML & CSS rồi. Nếu có điểm nào trong nội dung mà chúng tớ làm chưa tốt, hay bạn chưa thể hiểu được, hãy để lại thông qua công cụ bình luận bên dưới. Ngoài ra, nếu bạn thấy bài viết hay và hữu ích, hãy để lại 1 like, share hay đánh giá nhé.

Chúc các bạn có một ngày làm việc và học tập hiệu quả!

Comment trong HTML & CSS

mtoplist