HTML5: <i> & <em>


Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên

Tổng quan

Thẻ <i> (Italic) được dùng để định nghĩa (mang tính ngữ nghĩa) những phần văn bản trong đoạn văn và được thể hiện thành dạng chữ in nghiêng; ví dụ như những thuật ngữ kỹ thuật, nhóm từ ngữ là ngôn ngữ nước ngoài, các thuộc tính của thẻ,  ...

Thẻ <em> (Emphasis) dùng để đánh dấu văn bản có mức độ nhấn mạnh lớn. Ta có thể thiết lập thẻ <em> nằm trong thẻ <em> khác (lồng nhau) để tăng mức độ nhấn mạnh cho văn bản. Lưu ý rằng <em> sẽ thể hiện văn bản trong nó dưới dạng chữ in nghiêng; tuy nhiên nếu chỉ đơn thuần là để hiển thị văn bản ở dạng in nghiêng thì ta nên sử dụng thuộc tính font-style:italic của CSS.

Nhóm nội dung

Flow, Phrasing, Palpable.

Nội dung được phép

Phrasing.

Thẻ đóng

Cần phải có thẻ mở <i> và thẻ đóng </i>.

Bắt buộc phải có thẻ mở <em> và thẻ đóng </em>.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Phrasing.

DOM interface

<i> và <em> đều thuộc HTMLElement, HTMLSpanElement.

Thuộc tính

Thẻ <i> và <em> bao gồm Các thuộc tính Global.

Ví dụ

<!DOCTYPE html>
<html>
<body>
  <p>
    Cụm chữ Latinh <i>Veni, vidi, vici</i> thường được đề cập đến trong âm nhạc, nghệ thuật và văn học.
  </p>
  <p>
    Trong HTML5, khái niệm mức khối (block-level) trước kia nay được gọi là nội dung <em>luồng (flow)</em>.
  </p>
</body>
</html>

Kết quả:

Demo thẻ <i> & <em>

Lưu ý

Đối với những phiên bản HTML trước đây thì thẻ <i> chỉ đơn thuần chỉ là một thẻ trình bày và được dùng để hiển thị văn bản ở dạng chữ in nghiêng giống như thẻ <b> được dùng để hiển thị văn bản ở dạng chữ in đậm. Điều này giờ đây không còn đúng với phiên bản HTML hiện thời, thẻ <i> lúc này thường dùng để xác định tính ngữ nghĩa hơn là chỉ hiển thị văn bản ở dạng in nghiêng đơn thuần.

Ta có thể sử dụng thuộc tính class để xác định lý do tại sao phần tử đang được sử dụng, dó đó nếu việc trình bày cần có sự thay đổi về sau thì ta nên sử dụng một cách chọn lọc các thuộc tính CSS.

So sánh thẻ <i> và thẻ <em>

Một số nhà phát triển web ít kinh nghiệm rất dễ nhầm lẫn rằng tại sao lại có nhiều thẻ có tác dụng thể hiện sự nhấn mạnh cho văn bản đến vậy, và rất dễ nhầm lẫn giữa thẻ <i> và thẻ <em>. Vậy giữa hai thẻ <i> và <em> chúng có những điểm gì khác nhau, dưới đây sẽ chỉ ra chi tiết những điểm khác nhau để phân biệt chúng:

Xét về kết quả hiển thị trực quan thì cả <i> và <em> đều tạo chữ in nghiêng, nhưng về mặt ngữ nghĩa thì lại khác nhau. Trong khi thẻ <em> thể hiện sự nhấn mạnh ở mức độ cao (stress) đối với nội dung văn bản nằm trong nó thì thẻ <i> lại thể hiện văn bản ở mức nổi bật hơn so với mức bình thường; chẳng hạn như nếu bạn muốn làm nổi bật tên của một bộ phim hay một cuốn sách thì bạn nên dùng thẻ <i>, nếu bạn muốn nhấn mạnh đến một cụm từ nào đó như cụm từ nói đến sự cập nhật hay lỗi thời hoặc một động từ thì bạn dùng đến thẻ <em>.

Ví dụ cụ thể cho thẻ <em>: "Tôi vừa mới làm việc xong!", hoặc: "Chúng tôi phải làm gì đó cho anh". Khi đó người hoặc phần mềm đọc văn bản sẽ nhấn mạnh những từ in nghiêng khi phát âm. Lúc này ta sẽ đặt những từ "làm" và "phải" trong thẻ <em>.

Ví dụ cụ thể cho thẻ <i>: "Queen Mary đã khởi hành đêm qua". Ở đây không hề có một sự nhấn mạnh tầm quan trọng của cụm từ "Queen Mary" mà đơn thuần chỉ ra rằng đối tượng được đề cập đến không phải là một nữ hoàng có tên "Mary" mà chỉ là một con tàu có tên "Queen Mary". Vậy thì ta đặt cụm từ "Queen Mary" trong thẻ <i>. Một ví dụ khác cho thẻ <i>: "Từ the làm một bài báo".

Khả năng tương thích trình duyệt

Các trình duyệt trên máy tính cũng như điện thoại di động đều hỗ trợ <i> và <em>.

Xem thêm

· <b> & <strong>, <mark>, <cite>, <dfn>.

» Tiếp: <img>
« Trước: <html>
Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên
Copied !!!