Thẻ link trong HTML
Trần Thị Vân - 1185
- 09/07/2025
Chức năng của Thẻ link trong HTML
Thẻ link trong HTML dùng để nhúng nhiều kiểu khác nhau và dùng để chia ra nhiều loại khác nhau như thẻ canonical, stylesheet dùng để nhúng file css, image/x-icon dùng để nhúng file favicon,...
Cú pháp của Thẻ link trong HTML
<link rel="loai" href="lienket">
lienket: Liên kết tới 1 file hoặc là url của website.
loai: Loại (Ví dụ: stylesheet, canonical,......)
Ví dụ thực tế các Thẻ link trong HTML
<head>
<link href="https://webmoi.vn/upload/company/favicon-15570482444.png" rel="shortcut icon" type="image/x-icon" >
<link rel="canonical" href="https://webmoi.vn/blog/" >
<link rel="stylesheet" href="styles.css">
</head>
Ở trên là ví dụ của thẻ link cho loại: canonical, faivon, css.
Các ứng dụng phổ biến của thẻ link trong HTML
Liên kết tệp CSS cho website
Ứng dụng phổ biến nhất của thẻ link là kết nối trang HTML với tệp CSS bên ngoài. Việc tách mã CSS thành một tệp riêng giúp quản lý giao diện dễ dàng hơn, giảm trùng lặp mã nguồn và thuận tiện khi cập nhật thiết kế. Chỉ cần chỉnh sửa một tệp CSS, toàn bộ các trang đang sử dụng đều được áp dụng thay đổi.
<link rel="stylesheet" href="styles.css">
Khai báo biểu tượng favicon
Thẻ link còn được sử dụng để khai báo favicon, giúp website hiển thị biểu tượng trên tab trình duyệt, danh sách đánh dấu và một số giao diện khác. Một favicon rõ ràng góp phần tăng khả năng nhận diện thương hiệu và tạo sự chuyên nghiệp cho trang web.
<link rel="icon" href="favicon.ico" type="image/x-icon">
Khai báo liên kết canonical cho SEO
Khi nhiều URL có nội dung tương tự hoặc giống nhau, thẻ link với thuộc tính rel="canonical" giúp xác định URL chuẩn để công cụ tìm kiếm ưu tiên lập chỉ mục. Điều này góp phần hạn chế tình trạng trùng lặp nội dung và tập trung giá trị SEO vào đúng địa chỉ mong muốn.
<link rel="canonical" href="https://example.com/bai-viet">
Tải trước tài nguyên bằng preload và prefetch
Thuộc tính preload cho phép trình duyệt ưu tiên tải trước các tài nguyên quan trọng để cải thiện tốc độ hiển thị. Trong khi đó, prefetch hỗ trợ tải trước những tài nguyên có khả năng được sử dụng ở các lần điều hướng tiếp theo, giúp trải nghiệm chuyển trang diễn ra mượt mà hơn.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="trang-tiep-theo.html">
Kết nối sớm đến máy chủ với preconnect và dns-prefetch
Đối với các tài nguyên được tải từ máy chủ bên ngoài, thẻ link có thể thiết lập kết nối hoặc phân giải DNS trước khi tài nguyên thực sự được yêu cầu. Cách làm này giúp giảm thời gian chờ, đặc biệt khi website sử dụng phông chữ, CDN hoặc các dịch vụ của bên thứ ba.
<link rel="preconnect" href="https://example-cdn.com">
<link rel="dns-prefetch" href="//example-cdn.com">
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ link trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
