HTML – Hypertext Markup Language là một ngôn ngữ thiết kế web đã được định sẵn. Khi kết hợp với các ngôn ngữ lập trình khác như CSS – cascading style sheets và JS – javascript, chúng ta có thể tạo ra nhiều ứng dụng web động để giải quyết các vấn đề hàng ngày.
Hidden và aria-hidden trong HTML
Ngoài các công nghệ được đề cập ở trên, HTML sử dụng các công nghệ như ARIA – một ứng dụng Internet giàu tính khả dụng, giúp nhà phát triển tạo nội dung web thân thiện cho những người có khả năng nhất định.
Tuy nhiên, với những lợi ích đó cũng đi kèm với một số hạn chế. Để bắt đầu, cả HTML và ARIA đều chứa một số từ khóa tương tự nhau, gây ra sự nhầm lẫn lớn trong số người mới bắt đầu. Ví dụ, từ khóa “hidden” có trong cả HTML và ARIA.
Tổng quan Hidden và aria-hidden trong HTML
Thuộc tính hidden của HTML được sử dụng đặc biệt cho các phần tử không được hiển thị cho người dùng cho đến khi hoặc trừ khi một số điều kiện hoặc tiêu chí được đáp ứng, tức là các phần tử mà nội dung của chúng không liên quan đến người dùng cụ thể.
Ví dụ, nếu chúng ta sử dụng thuộc tính hidden, trình duyệt sẽ không hiển thị nội dung của phần tử nhưng bằng cách sử dụng các hoạt động JavaScript nhất định, chúng ta có thể dễ dàng truy cập vào các thuộc tính ẩn và khi người dùng đáp ứng một số điều kiện, javascript sẽ cho phép trình duyệt hiển thị nội dung của thuộc tính ẩn này.
Cú pháp:
<element hidden>Ví dụ:
<!DOCTYPE html>
<html>
<body>
<h2>Hidden Attribute</h2>
<p>This paragraph is not hidden.</p>
<p hidden>This paragraph is hidden.</p>
</body>
</html>Ví dụ về sử dụng thuộc tính hidden và truy cập các phần tử với JavaScript:
<!DOCTYPE html>
<html>
<body>
<p>This is not hidden.</p>
<p id="demo" hidden>This is hidden.</p>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
document.getElementById("demo").removeAttribute("hidden");
}
</script>
</body>
</html>Thuộc tính aria-hidden là thuộc tính được sử dụng để chỉ ra cho người dùng về tầm quan trọng của nội dung mà họ đang đọc, liệu nội dung này có nên được tập trung vào hay bị bỏ qua. Nó biểu thị rằng các phần tử và các phần tử con của chúng sẽ không được hiển thị hoặc truy cập bởi khách hàng theo định nghĩa của nhà lập trình.
Trong thuộc tính aria-hidden, phần tử không được loại bỏ khỏi trình duyệt; thay vào đó, chúng bị loại bỏ khỏi cây truy cậptrong khả năng tiếp cận và các công nghệ hỗ trợ nhưng vẫn hiển thị trong trang web.
Cú pháp:
<element aria-hidden="true/false">Ví dụ:
<!DOCTYPE html>
<html>
<body>
<h2>ARIA Hidden Attribute</h2>
<p>This paragraph is not hidden.</p>
<p aria-hidden="true">This paragraph is hidden.</p>
</body>
</html>Ai sẽ dùng Hidden và aria-hidden trong HTML?
Hidden và aria-hidden là hai thuộc tính rất hữu ích cho nhà phát triển web để cung cấp giao diện người dùng tốt hơn cho mọi người, bao gồm những người có khả năng giới hạn. Những người sử dụng trình đọc màn hình hoặc các công nghệ hỗ trợ khác sẽ khó khăn hơn khi trang web có chứa các phần tử không liên quan đến nội dung hoặc các phần tử không cần thiết.
Hướng dẫn Hidden và aria-hidden trong HTML
Để sử dụng Hidden và aria-hidden trong HTML, chỉ cần thêm thuộc tính “hidden” hoặc “aria-hidden” vào phần tử HTML. Khi sử dụng thuộc tính aria-hidden, bạn cũng có thể cung cấp giá trị “true” hoặc “false” để xác định xem phần tử có bị ẩn hay không.
Ưu và nhược điểm Hidden và aria-hidden trong HTML
Ưu điểm
- Cải thiện trải nghiệm người dùng: Hidden và aria-hidden giúp cung cấp giao diện người dùng tốt hơn cho mọi người, bao gồm những người có khả năng giới hạn. Những người sử dụng trình đọc màn hình hoặc các công nghệ hỗ trợ khác sẽ khó khăn hơn khi trang web có chứa các phần tử không liên quan đến nội dung hoặc các phần tử không cần thiết.
- Cải thiện SEO: Sử dụng hidden và aria-hidden có thể giúp cải thiện SEO của trang web bằng cách giảm số lượng phần tử không cần thiết trên trang web.
Nhược điểm
- Khó sử dụng: Đối với những người mới bắt đầu hoặc không có kinh nghiệm về lập trình web, việc sử dụng hidden và aria-hidden có thể gây khó khăn.
- Tài liệu hạn chế: Hiện tại, tài liệu về hidden và aria-hidden trong HTML vẫn còn hạn chế, vì vậy, việc sử dụng chúng đòi hỏi sự nghiên cứu kỹ lưỡng và tìm hiểu thêm.
Lời khuyên Hidden và aria-hidden trong HTML
- Sử dụng hidden và aria-hidden vào các phần tử không liên quan đến nội dung hoặc các phần tử không cần thiết để cải thiện trải nghiệm người dùng và SEO.
- Nên cẩn thận khi sử dụng hidden và aria-hidden, vì việc sử dụng chúng không đúng cách có thể làm giảm trải nghiệm người dùng.
- Tìm hiểu kỹ về cách sử dụng hidden và aria-hidden trong HTML trước khi áp dụng vào trang web của bạn.
Tổng kết
Trong bài viết này, chúng ta đã tìm hiểu về sự khác biệt giữa thuộc tính “hidden” và “aria-hidden” trong HTML, cách sử dụng chúng và ưu và nhược điểm của việc sử dụng chúng.
Hidden và aria-hidden là hai thuộc tính quan trọng trong HTML, được sử dụng để cải thiện trải nghiệm người dùng và SEO của trang web. Tuy nhiên, việc sử dụng chúng đòi hỏi sự nghiên cứu kỹ lưỡng và tìm hiểu thêm, đặc biệt là đối với những người mới bắt đầu hoặc không có kinh nghiệm về lập trình web.
Vì vậy, khi sử dụng hidden và aria-hidden, cần đảm bảo rằng chúng được sử dụng đúng cách để tránh tình trạng gây ra nhầm lẫn cho người dùng hoặc ảnh hưởng đến khả năng tiếp cận của họ đối với nội dung trên trang web.
Hidden và aria-hidden là gì?
Hidden và aria-hidden là hai thuộctính trong HTML, được sử dụng để ẩn các phần tử không liên quan đến nội dung hoặc không cần thiết trên trang web.
Chúng ta sử dụng hidden và aria-hidden để làm gì?
Hidden và aria-hidden được sử dụng để cải thiện trải nghiệm người dùng và SEO của trang web.
Thuộc tính hidden có tác dụng như thế nào?
Khi sử dụng thuộc tính hidden, các phần tử sẽ được ẩn khỏi người dùng cho đến khi một số điều kiện được thỏa mãn.
Thuộc tính aria-hidden có tác dụng như thế nào?
Khi sử dụng thuộc tính aria-hidden, các phần tử sẽ không hiển thị trong khả năng tiếp cận và các công nghệ hỗ trợ, nhưng vẫn hiển thị trong trang web.
Sử dụng hidden và aria-hidden có nhược điểm gì?
Khó sử dụng đối với những người mới bắt đầu hoặc không có kinh nghiệm về lập trình web và tài liệu về hidden và aria-hidden trong HTML hiện vẫn còn hạn chế.