HTML/CSS | Thẻ em và thẻ i

Học HTML, CSS từ Zero Tới Hero

• #Giống nhau
• #Khác nhau
• #Thẻ i
• #Thẻ em
• #Trường hợp sử dụng

Trong bài học “Các thẻ HTML thông dụng” chúng ta đã được làm quen về thẻ <i>, đoạn văn bản nằm trong thẻ này sẽ hiển thị ở dạng chữ in nghiêng. Trong bài học này, chúng ta sẽ làm quen với thẻ <em>, đoạn văn bản trong thẻ này cũng được hiển thị in nghiêng.

Vậy chúng khác nhau như thế nào? Chúng hãy cùng tìm hiểu nhé.

Giống nhau

Trình duyệt hiển thị nội dung trong 2 thẻ này giống nhau, đều là in nghiêng.

Ví dụ:

Khác nhau

Thẻ <i> và <em> khác nhau về ngữ nghĩa và mục đích sử dụng.

Thẻ i

Được sử dụng để thể hiện các phần nội dung trong một đoạn văn bản dưới kiểu chữ in nghiêng. Ví dụ như trong đoạn văn xuất các từ ngữ chuyên ngành kỹ thuật, tên một tác phẩm, trích dẫn một câu nói, nhắc tới các từ ở ngôn ngữ khác (bài viết tiếng Việt mà nhắc tới tiếng Pháp chẳng hạn), v.v.

Thẻ em

Thẻ này ở thị trường VN thường ít được sử dụng hơn thẻ <i>. Thẻ này mang ngữ nghĩa được dùng để nhấn mạnh một phần nội dung trong đoạn văn (ví dụ như nhấn trọng âm trong tiếng Anh).

Các trình đọc màn hình cũng có thể phân biệt được nội dung trong thẻ <em> để nhấn mạnh hơn vào đó.

Trường hợp sử dụng

Mặc dù thẻ <i> và thẻ <em> đều thể hiện đoạn văn dưới kiểu in nghiêng, nhưng đây lại không phải là lý do chính để chúng ta quyết định sử dụng thẻ <i> hay <em>.

Đó là theo lý thuyết, theo đúng ngữ nghĩa của 2 thẻ này. Tuy nhiên, với ngữ nghĩa này thì thị trường Việt Nam hoặc các nước không có thị phần sử dụng trình đọc màn hình hoặc không đề cao việc nhấn trọng âm thì việc tuân theo đúng ngữ nghĩa của 2 thẻ này là không cần thiết.

Trong thực tế, các bạn có thể sử dụng như sau:

• Để in nghiêng nội dung: ưu tiên dùng thẻ <i> hoặc CSS sẽ hợp lý hơn là dùng thẻ <em>.
• Để nhấn mạnh từ: dùng thẻ <em>, vì dùng thẻ <i> hoặc CSS sẽ không có ý nghĩa nhấn mạnh.

Tóm tắt

• Cả thẻ <i> và <em> đều được trình duyệt hiển thị nội dung dưới dạng chữ in nghiêng.
• Nếu xét về yếu tố ngữ nghĩa (phù hợp hơn với thị trường dùng trình đọc màn hình hoặc ngôn ngữ có quy ước nhấn trọng âm như tiếng Anh):
  • Thẻ <i> mang ngữ nghĩa thể hiện các thuật ngữ chuyên ngành, tên một tác phẩm, trích dẫn một câu nói, nhắc tới một ngôn ngữ khác trong đoạn văn, v.v.
  • Thẻ <em> mang ngữ nghĩa thể hiện việc nhấn mạnh nội dung (nhấn mạnh trọng âm, điều này hoạt động trên cả trình đọc màn hình), v.v
• Xét về thực tế thì bạn có thể sử dụng như sau:
  • Để in nghiêng nội dung: ưu tiên dùng thẻ <i> hoặc CSS sẽ hợp lý hơn là dùng thẻ <em>.
  • Để nhấn mạnh từ: dùng thẻ <em>, vì dùng thẻ <i> hoặc CSS sẽ không mang ý nghĩa nhấn mạnh.