Trong hướng dẫn cực nhanh này, bạn sẽ học cách hiển thị văn bản mô tả ngắn gọn (như chú giải công cụ) khi người dùng của bạn di chuột qua một phần tử, như hình ảnh hoặc liên kết.
Cách thêm chú giải công cụ mất vài giây. Bạn chỉ cần sử dụng thuộc tính tiêu đề HTML:title .
Hiển thị văn bản khi di chuột (di chuột qua phần tử)
Dưới đây là một ví dụ cơ bản về hình ảnh của Khối lập phương Rubik. Di chuột qua hình ảnh này và trong vài giây thông tin bổ sung về Khối lập phương Rubik sẽ bật lên:
Đây là đánh dấu HTML cho phần tử hình ảnh ở trên:
<img
src="url-to-image-file"
title="The Rubik's Cube. A 3-D combination puzzle toy invented in 1974 by Hungarian sculptor Ernő Rubik."
alt="A Rubik’s Cube"
/>Giả sử bạn muốn hiển thị chú giải công cụ khi người dùng của bạn di chuột qua phần tử liên kết / liên kết.
Di chuyển chuột qua liên kết này để hiển thị chú giải công cụ
Các bài báo mới nhất
Và đánh dấu HTML:
<a href="https://techstacker.com" title="Link to TechStacker’s front page"
>Latest articles</a
>
Thats tất cả để có nó. Bạn có thể thêm title thuộc tính cho bất kỳ phần tử HTML nào.
Tại sao có hiển thị văn bản khi người dùng của bạn di chuột qua một phần tử có lợi không?
Giả sử bạn có một yếu tố có thể gây nhầm lẫn cho một số người do tính đơn giản của nó. Một ví dụ có thể là một biểu tượng. Hầu hết mọi người không thể nhận ra nhiều hơn một số biểu tượng, nhưng thực sự có hàng nghìn biểu tượng khác nhau được trưng bày, chỉ tính riêng ở thế giới phương Tây.
Bằng cách chỉ cần thêm thuộc tính tiêu đề vào biểu tượng (ví dụ:bên trong phần tử hình ảnh), mọi người có tùy chọn nhận được mô tả rõ ràng về chức năng của biểu tượng bao giờ nó tồn tại trong giao diện người dùng của bạn.
Bây giờ bạn có thể tự nghĩ, có bao nhiêu người biết rằng việc di chuột qua một phần tử đôi khi sẽ tiết lộ thêm thông tin?
Đó là một câu hỏi tuyệt vời. Câu trả lời là nó phụ thuộc vào đối tượng mục tiêu của bạn. Hầu hết những người am hiểu về công nghệ đều biết trực giác rằng di chuột + chờ 1-2 giây thường sẽ tiết lộ thêm thông tin về chủ đề.
Nhưng điều gì sẽ xảy ra nếu đối tượng của bạn chủ yếu bao gồm những người không hiểu biết về công nghệ hoặc có lẽ chỉ là những người không duyệt nhiều trên web?
Chà, hành động mặc định của tôi là áp dụng lời khuyên phổ quát của Luke Wroblewski:
Rõ ràng luôn thắng.
Nếu một biểu tượng không rõ ràng hoặc ít nhất là không rõ ràng đối với một tỷ lệ phần trăm cao, thì bạn tạo một biểu tượng tốt hơn hoặc ghép nối biểu tượng đó với một mô tả ngắn gọn.
Nhưng dù sao, việc thêm thuộc tính tiêu đề và tất nhiên, thuộc tính ALT (dành cho trình đọc màn hình, dành cho người khiếm thị) chỉ có những mặt ưu việt. Bạn không cần phải thêm nó vào mọi thứ, nhưng nếu bạn nghi ngờ, bạn cũng có thể làm điều đó.
Như một phần thưởng bổ sung, ít nhất các thuộc tính ALT cũng có tác động đến SEO, ít nhất là gián tiếp, nhưng có lẽ cũng trực tiếp.
Làm thế nào như vậy? Chà, mô tả ALT thuộc danh mục khả năng truy cập, mà Google không giấu giếm có tác động đến cách họ đánh giá chất lượng trang web của bạn, điều này sẽ ảnh hưởng đến sức mạnh xếp hạng SEO của bạn.
Đối với thuộc tính title, nó đã từng tác động đến SEO, nhưng dựa trên nghiên cứu mới nhất của tôi, không rõ liệu nó có còn hoạt động cho đến ngày nay hay không. Nhưng một lần nữa, không có nhược điểm rõ ràng khi sử dụng thuộc tính title, chỉ có những nhược điểm.
Phương pháp chú giải công cụ thay thế
Bạn có thể cần một phiên bản tùy chỉnh hơn của thuộc tính tiêu đề / chú giải công cụ HTML tích hợp sẵn. Trong trường hợp đó, bạn có thể sử dụng JavaScript và CSS cho cả chú giải công cụ thời gian và kiểu cho các trường hợp sử dụng khác nhau. Tôi sẽ đề cập đến kỹ năng hữu ích đó trong một hướng dẫn trong tương lai (nó nằm trong danh sách cần viết của tôi!).