Liên kết giữ chỗ HTML5 cho là gì?
idUp cho đến HTML5, thẻ đã yêu cầu một thuộc tính: href. Nhưng HTML5 làm cho ngay cả thuộc tính đó tùy chọn. Khi bạn viết một thẻ mà không có bất kỳ thuộc tính nào, nó được gọi là liên kết giữ chỗ.
Một liên kết giữ chỗ trông như thế này:
Trước đóSử dụng liên kết giữ chỗ trong quá trình phát triển
Gần như tất cả các nhà thiết kế web đã tạo ra các liên kết giữ chỗ cùng một lúc trong khi thiết kế và xây dựng một trang web. Trước HTML5, chúng ta sẽ viết:
văn bản liên kếtlàm trình giữ chỗ. Và tôi đã gửi các trang web mockup cho khách hàng với những trình giữ chỗ đó chỉ để khách hàng hỏi tôi "tại sao các liên kết trong văn bản không hoạt động?"
Vấn đề với việc sử dụng thẻ bắt đầu bằng # (#) làm liên kết giữ chỗ là liên kết có thể nhấp và điều này có thể gây nhầm lẫn cho khách hàng của bạn. Và, nếu ai đó quên cập nhật chúng với các URL chính xác, các liên kết đó có thể xuất hiện trên trang web trực tiếp do chúng không liên kết với bất kỳ điều gì.
Thay vào đó, bạn nên bắt đầu sử dụng một thẻ không có bất kỳ thuộc tính nào. Bạn có thể tạo kiểu cho chúng trông giống như bất kỳ liên kết nào khác trên trang của bạn, nhưng chúng sẽ không thể nhấp được vì chúng chỉ là trình giữ chỗ.
Sử dụng liên kết trình giữ chỗ trên trang web trực tiếp
Nhưng các liên kết giữ chỗ có một vị trí trong thiết kế web không chỉ là phát triển. Một nơi mà một liên kết giữ chỗ có thể tỏa sáng là trong điều hướng. Trong nhiều trường hợp, danh sách điều hướng trang web có một số cách để chỉ ra trang bạn đang truy cập. Chúng thường được gọi là chỉ số “bạn đang ở đây”.
Hầu hết các trang web dựa vào các thuộc tính id trên phần tử cần đánh dấu "bạn đang ở đây", nhưng một số sử dụng thuộc tính lớp là tốt. Tuy nhiên, bất kỳ thuộc tính nào bạn sử dụng, bạn cần phải thực hiện một loạt công việc cho mỗi trang có điều hướng trên đó, thêm và xóa thuộc tính khỏi các phần tử chính xác.
Với liên kết trình giữ chỗ, bạn có thể viết điều hướng của mình theo bất kỳ cách nào bạn muốn và sau đó chỉ cần xóa thuộc tính href khỏi liên kết thích hợp khi bạn thêm điều hướng vào trang. Tôi lưu trữ toàn bộ danh sách điều hướng của mình dưới dạng đoạn trích trong trình chỉnh sửa, vì vậy, chỉ cần sao chép nhanh và sau đó xóa href. Bạn cũng có thể nhận CMS của bạn để làm điều tương tự.
Và bên cạnh việc thêm kiểu dáng đặc biệt (tôi sẽ chỉ cho bạn cách bên dưới) vào liên kết trình giữ chỗ, liên kết không thể nhấp được. Vì vậy, khách hàng không bị nhầm lẫn khi nghĩ rằng họ có thể nhận được thứ gì đó khác nếu họ nhấp vào liên kết điều hướng hiện tại của họ.
Tạo liên kết giữ chỗ kiểu dáng
Các liên kết giữ chỗ dễ dàng tạo kiểu và tạo kiểu khác với các liên kết khác trên trang web của bạn. Chỉ cần chắc chắn tạo kiểu cho cả thẻ và thẻ a: link. Ví dụ:
một {color: red; font-weight: bold; text-decoration: none; } a: link {color: blue; font-weight: bình thường; text-decoration: gạch dưới; }CSS này sẽ làm cho các liên kết giữ chỗ đậm và đỏ, không có gạch dưới. Mặc dù các liên kết thông thường sẽ có trọng lượng bình thường, màu xanh dương và gạch dưới.
Hãy nhớ đặt lại bất kỳ kiểu nào bạn không muốn được chuyển từ thẻ. Ví dụ: tôi đặt trọng số phông chữ để in đậm cho các liên kết giữ chỗ, vì vậy tôi phải đặt nó thành:
font-weight: bình thường;cho các liên kết tiêu chuẩn. Điều này cũng đúng với văn bản-trang trí, bằng cách loại bỏ nó với một bộ chọn, nó sẽ được gỡ bỏ cho a: bộ chọn liên kết nếu tôi đã không đặt nó trở lại.