HTML Hide Element: Thuộc tính Hidden là gì & Cách sử dụng

HTML Hide Element là gì?

Thuộc tính hidden trong HTML cho biết phần tử chưa hoặc không còn phù hợp. Nếu bạn đánh dấu một phần tử là “hidden,” bạn đang báo cho trình duyệt không hiển thị phần tử đó với người dùng. Ngay cả khi họ đang dùng screen reader.

Thuộc tính hidden có dạng như sau:

<p hidden>Đoạn văn này nên bị ẩn.</p>
<p>Đoạn văn này không nên bị ẩn.</p>

Trong ví dụ trên, trình duyệt sẽ không hiển thị dòng văn bản đầu tiên nhưng sẽ hiển thị dòng thứ hai.

Thuộc tính HTML hide cho phép nhà phát triển kiểm soát khả năng hiển thị của các phần tử trên trang. Điều này giúp tối ưu trải nghiệm người dùng bằng cách ngăn nội dung không liên quan làm rối trang web cho đến khi nội dung đó trở nên phù hợp hoặc khi người dùng tương tác với các phần cụ thể trên trang.

Ví dụ, nếu người dùng nhấn vào một nút hoặc bật menu thả xuống. JavaScript có thể kích hoạt đoạn code JavaScript để loại bỏ thuộc tính hidden và hiển thị nội dung.

Lưu ý

Thuộc tính HTML hidden không phải lúc nào cũng là lựa chọn phù hợp. Chúng ta sẽ khám phá các kỹ thuật khác ở phần sau của bài viết.

Cách sử dụng thuộc tính HTML Hidden

Bạn có thể áp dụng HTML hide element trong mã HTML của một thành phần để làm nó không hiển thị trên trang web.

Để làm điều này, thêm “hidden” vào phần tử bạn muốn ẩn. Ví dụ với một tiêu đề và đoạn văn bạn muốn ẩn sẽ trông như sau:

<div hidden>
<h1>Tiêu đề này bị ẩn</h1>
<p>Đoạn văn này cũng bị ẩn</p>
</div>

Thuộc tính này hoạt động trên các trình duyệt chính như Chrome, Edge, Firefox và Safari.

Cách thuộc tính HTML Hide hoạt động

Thuộc tính HTML hide làm cho bất kỳ phần tử nào trên trang web trở nên vô hình với người dùng mà không xóa nó khỏi tài liệu HTML, cho phép bạn kiểm soát khả năng hiển thị nội dung trên trang.

Khi thêm thuộc tính hidden vào một phần tử, trình duyệt sẽ áp dụng thuộc tính CSS sau:

display: none;

Trang sẽ được hiển thị như thể phần tử đó không tồn tại, khiến phần tử trở nên vô hình với người xem.

Tuy nhiên, phần tử vẫn tồn tại trong DOM (Document Object Model), nghĩa là bạn có thể truy cập và thao tác với nó bằng JavaScript.

Giả sử bạn có một trang web với nút "Read More". Bạn có thể đánh dấu phần nội dung chi tiết với thuộc tính hidden để làm nó không hiển thị.

Sau đó, khi người dùng nhấn nút "Read More", một hàm JavaScript có thể loại bỏ thuộc tính hidden khỏi phần nội dung chi tiết, làm cho nó hiển thị và người dùng có thể truy cập.

Lưu ý

Thuộc tính “hidden” trong HTML là một thuộc tính toàn cục, nghĩa là bạn có thể dùng nó với bất kỳ phần tử HTML nào. Nó cũng là thuộc tính boolean, nên chỉ cần xuất hiện trên phần tử là có hiệu lực và không cần giá trị cụ thể.

Tại sao bạn lại muốn ẩn một phần tử HTML?

Việc học cách ẩn phần tử HTML giúp bạn:

• Giảm sự lộn xộn trên giao diện
• Ưu tiên nội dung
• Tạo thiết kế responsive

Các phần tử ẩn giúp bạn giảm thiểu sự phân tâm trên trang để chỉ trình bày những thông tin quan trọng nhất với người dùng. Ví dụ, bạn có thể ẩn các cài đặt nâng cao hoặc thông tin bổ sung sau các liên kết hoặc nút bấm có thể nhấp.

Điều này cho phép người dùng tự chọn xem họ có muốn tìm hiểu thêm hay không mà không cần rời khỏi trang. Giống như phần này trên trang chủ Semrush cho phép người dùng chọn các khía cạnh khác nhau của bộ công cụ để tìm hiểu thêm:

Bạn cũng có thể thu hút sự chú ý vào những thông tin hoặc hành động quan trọng mà bạn muốn người dùng thực hiện bằng cách ẩn những phần tử ít quan trọng hơn. Ví dụ như hiển thị nổi bật nút đăng ký trong khi ẩn các câu hỏi thường gặp chi tiết dưới dạng thả xuống.

Để tập trung vào các lời kêu gọi hành động (CTAs). Người dùng vẫn có thể tìm hiểu thêm bằng cách nhấn vào các mục thả xuống.

Bạn cũng có thể ẩn các phần tử HTML có thể xuất hiện trên desktop nhưng gây trải nghiệm rối trên mobile, như thanh bên hoặc menu phụ.

Thuộc tính hide trong HTML là cách đơn giản, mang tính ngữ nghĩa để chỉ trình duyệt không hiển thị phần tử. Tuy nhiên, các kỹ thuật khác có thể cho phép kiểm soát tốt hơn khi ẩn phần tử và ảnh hưởng của nó tới bố cục cũng như khả năng hiển thị của trang web.

Các kỹ thuật khác để ẩn phần tử trong thiết kế web

Các kỹ thuật khác nhau để ẩn phần tử trong thiết kế web bao gồm dùng CSS và JavaScript. Mỗi phương pháp có ưu điểm riêng phù hợp với từng trường hợp sử dụng.

Việc chọn giữa các phương pháp này phụ thuộc vào sở thích của bạn, bao gồm cách phần tử tương tác với bố cục, liệu có quan tâm đến accessibility hay không, và có cần hiệu ứng animation hay không.

Sử dụng CSS Display

Bạn có thể dùng thuộc tính “display” với giá trị “none” để ẩn phần tử bằng CSS. Phương pháp này sẽ loại bỏ phần tử khỏi luồng tài liệu, nghĩa là nó không chiếm không gian và người dùng không nhìn thấy.

Có hai cách dùng display trong CSS. Cách đầu là dùng inline CSS, bạn thêm thuộc tính “style” với giá trị “display: none;” trực tiếp trong phần tử HTML.

Ví dụ:

<p style="display: none;">This text is hidden.</p>

Cách thứ hai là dùng CSS bên ngoài hoặc nội bộ. Trong file CSS hoặc thẻ <style>, bạn chọn phần tử muốn ẩn bằng class, id hoặc selector bất kỳ rồi đặt “display: none;” cho selector đó.

Ví dụ:

.hidden-text {
display: none;
}

Sau đó, trong HTML của bạn, dùng class “hidden-text” cho bất kỳ phần tử nào bạn muốn ẩn:

<p class="hidden-text">This text is hidden.</p>

Khi bạn đặt một phần tử thành “display: none;” thì phần tử đó sẽ không chiếm không gian và các phần tử khác có thể dịch chuyển để lấp khoảng trống.

Các phần tử có thuộc tính “display: none;” sẽ không hiển thị với screen readers và các công nghệ hỗ trợ khác. Vì vậy, nội dung đó sẽ không tiếp cận được với người dùng dựa vào những công nghệ này. Hãy cân nhắc kỹ khi dùng thuộc tính này để đảm bảo bạn không ẩn nội dung cần phải tiếp cận với tất cả người dùng.

Visibility: Hidden và Opacity

Thuộc tính “visibility: hidden;” giữ phần tử trong luồng tài liệu (vẫn chiếm không gian) nhưng làm nó không hiển thị. Người dùng cũng không thể tương tác với phần tử này.

Trong khi đó, thuộc tính “opacity: 0;” làm phần tử hoàn toàn trong suốt nhưng vẫn có thể tương tác và vẫn chiếm không gian.

Dưới đây là ví dụ về mã CSS sử dụng cả hai thuộc tính visibility và opacity:

.hidden-visibility {
visibility: hidden;
}
.transparent-opacity {
opacity: 0;
}

Cả hai phần tử đều không hiển thị với người dùng. Người dùng không thể tương tác với phần tử .hidden-visibility, nhưng có thể tương tác với phần tử .transparent-opacity.

Trong thiết kế web, “visibility: hidden;” là lựa chọn lý tưởng để giữ cấu trúc bố cục trong khi ẩn phần tử, vì nó vẫn giữ nguyên không gian của phần tử.

Bạn có thể dùng thuộc tính “opacity: 0;” khi muốn tạo hiệu ứng chuyển mượt mà sang trạng thái không nhìn thấy được.

Bạn có thể ẩn phần tử bằng “opacity: 0;” để sáng tạo trong thiết kế, nhưng điều này có thể gây nhầm lẫn cho người dùng nếu không thực hiện cẩn thận. Ví dụ, người dùng có thể vô tình nhấn vào một nút hoàn toàn trong suốt và bị chuyển đến trang không mong muốn.

Các công cụ tìm kiếm cũng có thể xem việc dùng “opacity: 0;” để ẩn nội dung như một hành vi spamđặc biệt nếu đó là cố gắng thao túng thứ hạng. Điều này có thể ảnh hưởng tiêu cực đến thứ hạng website của bạn hoặc dẫn đến hình phạt, như việc công cụ tìm kiếm loại bỏ trang web của bạn khỏi kết quả tìm kiếm hoàn toàn.

Đọc thêm: Cách nhận biết và khắc phục hình phạt từ Google

Kỹ thuật JavaScript để ẩn nội dung động

JavaScript cung cấp cách linh hoạt để hiển thị phần tử khi cần, cho phép bạn hiển thị nội dung trang web dựa trên tương tác người dùng hoặc điều kiện cụ thể.

JavaScript thao tác các phần tử HTML bằng cách thay đổi style hoặc thuộc tính của chúng. Để ẩn phần tử, bạn có thể điều chỉnh thuộc tính display thành “none” để ẩn và đặt lại thành “block” hoặc “inline” (tùy thuộc giá trị hiển thị mặc định của phần tử) để hiển thị lại.

Một số trường hợp sử dụng để ẩn hoặc hiện động bao gồm:

• Tương tác của người dùng: Ví dụ như nhấn nút, di chuột qua một phần tử hoặc gửi biểu mẫu. Chẳng hạn, ẩn biểu mẫu sau khi gửi để hiển thị thông báo thành công.
• Điều kiện tải trang: Thiết lập các phần tử xuất hiện hoặc biến mất dựa trên tình huống khi trang được tải. Ví dụ như thời gian trong ngày hoặc vị trí của người dùng.
• Phản hồi với dữ liệu: Thay đổi khả năng hiển thị nội dung để hiển thị hoạt ảnh tải trong khi chờ dữ liệu. Bạn có thể ẩn hoạt ảnh khi dữ liệu đã xuất hiện.

Ẩn nội dung cho trình duyệt nhưng không cho screen readers

Trong hầu hết trường hợp tiêu chuẩn, nội dung bạn hiển thị cho người dùng trên trình duyệt nên có sẵn cho những người dùng thiết bị như screen readers. Đây thường là thực hành tốt về website accessibility.

Nhưng nếu bạn muốn ẩn nội dung trên trình duyệt mà không ẩn với screen readers, một cách là đặt nội dung ra ngoài màn hình. Bạn không nên làm điều này với các phần tử có thể điều hướng, như liên kết.

Để làm điều này, trước tiên tạo một lớp CSS như sau:

.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

Bạn có thể đặt tên lớp “.sr-only” khác nếu cần.

Bạn sẽ dùng lớp này để đặt phần tử HTML bạn muốn ẩn ra ngoài màn hình, như sau:

<div class="sr-only">This text is hidden off-screen.</div>

Screen readers sẽ đọc phần này như thể nó vẫn là một phần của nội dung trang. Tuy nhiên, nó sẽ được đặt rất xa về bên trái màn hình, nên người dùng nhìn thấy sẽ không thấy trên trình duyệt.

Rủi ro khi ẩn phần tử HTML

Việc ẩn phần tử trên website sai cách có thể ảnh hưởng tiêu cực đến khả năng hiển thị của bạn trên kết quả tìm kiếm.

Các công cụ tìm kiếm có thể xem nội dung ẩn như một cách thao túng kết quả tìm kiếm bằng cách ẩn nội dung với người dùng nhưng lại hiển thị với công cụ tìm kiếm.

Việc đặt một lượng lớn keyword-stuffed văn bản ra ngoài màn hình hoặc dùng CSS để làm chữ cùng màu với nền là kỹ thuật mà các spammer từng sử dụng trong những ngày đầu của Google.

Nhưng giờ đây các công cụ tìm kiếm có thể coi những hành vi này là cố gắng thao túng thứ hạng, có thể dẫn đến hình phạt.

Vì vậy, hãy cẩn thận khi ẩn phần tử HTML. Thêm vào đó, dùng mã sai cách khi cố gắng ẩn phần tử có thể gây ra sự cố kỹ thuật cho website của bạn.

Khắc phục các vấn đề Technical SEO với Site Audit

Việc kiểm tra site định kỳ giúp bạn phát hiện và giải quyết các vấn đề SEO, bao gồm cả những lỗi có thể xảy ra khi bạn cố gắng ẩn phần tử HTML.

Công cụ miễn phí của chúng tôi SEO checker phát hiện nhanh các vấn đề SEO phổ biến. Để kiểm tra định kỳ với các khuyến nghị toàn diện trên toàn site, hãy dùng Semrush Site Audit.

Truy cập công cụ, nhập tên miền của bạn và nhấn nút “Start Audit”.

Bạn sẽ thấy một menu nơi bạn có thể cấu hình các thiết lập audit.

Mẹo chuyên nghiệp

Hãy sử dụng hướng dẫn cấu hình Site Audit để được hỗ trợ cấu hình công cụ cho website của bạn.

Khi bạn đã sẵn sàng, hãy nhấn “Start Site Audit”.”

Khi audit hoàn tất, bạn sẽ thấy báo cáo chi tiết về tổng thể sức khỏe website. Để biết thêm chi tiết, hãy nhấn vào tab “Issues”.

Tab này sẽ hiển thị các vấn đề trên website của bạn. Bạn có thể nhấn vào chữ “Why and how to fix it” bên cạnh mỗi vấn đề để tìm hiểu về nó và cách khắc phục.

Khắc phục các vấn đề kỹ thuật của website bằng cách thử dùng công cụ Site Audit miễn phí.

Bài viết này được cập nhật năm 2024. Một số đoạn trích từ bài gốc của Connor Lahey có thể vẫn còn.