Marquee HTML là gì? cú pháp, cách sử dụng và ví dụ minh họa trực quan

3. Cú pháp cơ bản của thẻ marquee HTML

Cú pháp để sử dụng thẻ <marquee> rất đơn giản:

<marquee>Nội dung cần cuộn</marquee>

Mặc định: Khi không có thuộc tính nào được thêm vào, nội dung sẽ cuộn từ phải sang trái một cách liên tục.

4. Các thuộc tính phổ biến của thẻ marquee HTML

Để kiểm soát cách nội dung cuộn, thẻ <marquee> đi kèm với nhiều thuộc tính. Dưới đây là những thuộc tính thường dùng:

Ví dụ:

<marquee direction="right" behavior="alternate" scrollamount="4">
  <span style="color: blue; font-weight: bold;">Thông báo mới: Trang web đã cập nhật!</span>
</marquee>

<marquee direction="right" scrollamount="10" loop="3" onmouseover="this.stop()" onmouseout="this.start()">
  Thông báo này sẽ dừng khi bạn rê chuột vào!
</marquee>

5. Lý do KHÔNG nên sử dụng thẻ marquee HTML

Mặc dù có vẻ tiện lợi, nhưng thẻ <marquee> đã bị lỗi thời (deprecated) và không được khuyến khích sử dụng trong HTML5 vì những lý do quan trọng sau:

1. Vấn đề về Khả năng Truy cập (Accessibility):
   • Nội dung chuyển động nhanh có thể gây khó khăn cho người dùng mắc chứng khó đọc hoặc rối loạn thị giác.
   • Nó cũng là một yếu tố gây xao nhãng nghiêm trọng cho hầu hết người đọc, làm giảm khả năng tập trung vào nội dung chính.
   • Các công cụ hỗ trợ đọc (screen readers) có thể gặp vấn đề khi xử lý nội dung cuộn.
2. Không phải là chuẩn HTML:
   • Nó là một phần tử độc quyền của Microsoft (từng được hỗ trợ mạnh trong Internet Explorer) và không bao giờ trở thành một phần của đặc tả HTML chính thức. Điều này có thể dẫn đến hiệu suất không đồng nhất trên các trình duyệt khác nhau.
3. Thay thế tốt hơn bằng CSS và JavaScript:
   • Ngày nay, các hiệu ứng chuyển động và cuộn được tạo ra bằng cách sử dụng CSS Animations hoặc JavaScript để đảm bảo hiệu suất tốt hơn, kiểm soát chính xác hơn, và đặc biệt là tuân thủ các tiêu chuẩn web hiện đại.

Xem thêm:

• Elixir là gì? Giải mã toàn tập về “thần dược” trong thế giới lập trình
• ENV là gì? Hướng Dẫn Chi Tiết Về Biến Môi Trường và File .env
• Iteration là gì? Giải mã khái niệm cốt lõi trong lập trình và phát triển sản phẩm

Giải pháp hiện đại thay thế:

Thay vì dùng <marquee>, các nhà phát triển sử dụng kết hợp HTML, CSS và JavaScript để tạo ra hiệu ứng chuyển động tương tự, thường sử dụng kỹ thuật CSS Keyframes và thuộc tính animation.

Ví dụ (dùng CSS thay cho Marquee):

/* CSS */
@keyframes scrolling-text {
  from { transform: translateX(100%); } /* Bắt đầu từ ngoài bên phải */
  to { transform: translateX(-100%); }  /* Kết thúc ở ngoài bên trái */
}
.modern-marquee {
  overflow: hidden;
  white-space: nowrap;
}

.modern-marquee span {
  display: inline-block;
  animation: scrolling-text 10s linear infinite; /* 10s là thời gian chạy, linear là tốc độ cố định, infinite là lặp vô hạn */
}

Trên đây, mình đã giải thích rõ marquee HTML là gì? nếu muốn tạo hiệu ứng chuyển động tương tự, bạn nên sử dụng CSS (ví dụ: @keyframes và animation) thay vì thẻ <marquee> đã lỗi thời. Bạn cảm nhận sao về marquee HTML như thế nào hãy comment phía dưới nhé.