Cafedev chia sẻ về HTML chứa một số phần tử để định nghĩa văn bản với ý nghĩa đặc biệt.

Ví dụ:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

Copy and chạy code

1. Các phần tử định dạng(Formatting) trong HTML

Các phần tử định dạng được thiết kế để hiển thị các loại văn bản đặc biệt:

  • <b> – Chữ in đậm
  • <strong> – Văn bản quan trọng
  • <i> – Văn bản in nghiêng
  • <em> – Văn bản nhấn mạnh
  • <mark> – Đã đánh dấu văn bản
  • <small> – Văn bản nhỏ hơn
  • <del> – Đã xóa văn bản
  • <ins> – Đã chèn văn bản
  • <sub> – Văn bản đăng ký
  • <sup> – Văn bản siêu mẫu

2. Thẻ <b> và <strong> trong HTML

Phần tử <b> HTML định nghĩa văn bản in đậm mà không có bất kỳ tầm quan trọng nào.

 <b>This text is bold</b> 

Copy and chạy code

Phần tử <strong> trong HTML xác định văn bản có tầm quan trọng mạnh mẽ. Nội dung bên trong thường được hiển thị in đậm.

 <strong>This text is important!</strong> 

Copy and chạy code

3. Thẻ <i> và <em> trong HTML

Phần tử <i> định nghĩa một phần văn bản theo giọng nói hoặc tâm trạng. Nội dung bên trong thường được hiển thị bằng chữ nghiêng.

Mẹo: Thẻ <i> thường được sử dụng để chỉ thuật ngữ kỹ thuật, cụm từ từ ngôn ngữ khác, ý nghĩ, tên tàu, v.v.

 <i>This text is italic</i> 

Copy and chạy code

Phần tử <em> xác định văn bản nhấn mạnh. Nội dung bên trong thường được hiển thị bằng chữ nghiêng.

 <em>This text is emphasized</em> 

4. Phần tử <small>

Phần tử <small> định nghĩa văn bản nhỏ hơn:

<small>This is some smaller text.</small>

Copy and chạy code

5. Phần tử <mark>

Phần tử <mark> xác định văn bản cần được đánh dấu hoặc tô sáng

<p>Do not forget to buy <mark>milk</mark> today.</p>

Copy and chạy code

6. Phần tử <del>

Phần tử<del> phần tử xác định văn bản đã bị xóa khỏi một tài liệu. Các trình duyệt thường sẽ cho thấy một dòng thông qua văn bản đã xóa:

<p>My favorite color is <del>blue</del> red.</p>

Copy and chạy code

7. Phần tử <ins>

Phần tử <ins> xác định văn bản đã được chèn vào tài liệu. Trình duyệt thường sẽ gạch chân văn bản được chèn:

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

8. Phần tử <sub>

Phần tử <sub> xác định văn bản đăng ký. Văn bản đăng ký xuất hiện một nửa ký tự bên dưới dòng bình thường và đôi khi được hiển thị trong một phông chữ nhỏ hơn. Văn bản đăng ký có thể được sử dụng cho các công thức hóa học, như H2O:

<p>This is <sub>subscripted</sub> text.</p>

Copy and chạy code

9. Phần tử <sup>

Phần tử <sup> xác định văn bản siêu ký tự. Văn bản siêu ký tự xuất hiện một nửa ký tự phía trên dòng bình thường và đôi khi được hiển thị ở phông chữ nhỏ hơn. Văn bản siêu mẫu có thể được sử dụng cho chú thích, như WWW [1]:

<p>This is <sup>superscripted</sup> text.</p>

Copy and chạy code

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!