Liên kết

Trong phần giới thiệu về thuộc tính, chúng tôi đã chia sẻ một ví dụ về cách thêm thuộc tính vào thẻ mở. Ví dụ này sử dụng thẻ <a>, nhưng không thảo luận về phần tử cũng như các thuộc tính cụ thể được giới thiệu trong ví dụ đó.

Thẻ neo <a> cùng với thuộc tính href sẽ tạo ra một siêu liên kết. Đường liên kết là nền tảng của Internet. Trang web đầu tiên có 25 đường liên kết, với nội dung "Mọi thứ trên mạng về W3 đều được liên kết trực tiếp hoặc gián tiếp đến tài liệu này". Rất có thể, mọi thứ trên mạng về W3 cũng được liên kết trực tiếp hoặc gián tiếp từ tài liệu này.

Sức mạnh của web và thẻ <a> đã tăng lên đáng kể kể từ khi Tim Berners-Lee xuất bản nội dung giải thích đầu tiên này vào tháng 8 năm 1991. Đường liên kết thể hiện mối kết nối giữa hai tài nguyên, trong đó có một tài nguyên là tài liệu hiện tại. <a>, <area>, <form> và <link> có thể tạo đường liên kết. Bạn đã tìm hiểu về <link> và sẽ khám phá biểu mẫu trong một phần riêng. Ngoài ra, còn có một phần học tập về biểu mẫu. Trong phiên này, bạn sẽ tìm hiểu về thẻ <a> gồm một chữ cái nhưng không hề đơn giản.

Thuộc tính href

Mặc dù không bắt buộc, nhưng thuộc tính href có trong hầu hết các thẻ <a>. Việc cung cấp địa chỉ của siêu liên kết sẽ biến <a> thành một đường liên kết. Thuộc tính href được dùng để tạo siêu liên kết đến các vị trí trong trang hiện tại, các trang khác trong một trang web hoặc các trang web khác. Mã này cũng có thể được lập trình để tải tệp xuống hoặc gửi email đến một địa chỉ cụ thể, thậm chí bao gồm cả tiêu đề và nội dung email được đề xuất.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

Đường liên kết đầu tiên bao gồm một URL tuyệt đối. Bạn có thể dùng URL này trên mọi trang web trên thế giới để chuyển đến trang chủ của MLW. URL tuyệt đối bao gồm một giao thức, trong trường hợp này là https:// và một tên miền. Khi giao thức được viết là //, đó là một giao thức ngầm và có nghĩa là "sử dụng cùng một giao thức đang được sử dụng".

URL tương đối không chứa giao thức hoặc tên miền. Chúng "tương đối" so với tệp hiện tại. MLW là một trang web một trang, nhưng chuỗi HTML này có nhiều phần. Để liên kết từ trang này đến bài học về thuộc tính, một URL tương đối sẽ được sử dụng <a href="../attributes/">Attributes</a>.

Đường liên kết thứ hai chỉ là một giá trị nhận dạng đoạn liên kết và sẽ liên kết đến phần tử có id="teachers", (nếu có) trên trang hiện tại. Các trình duyệt cũng hỗ trợ 2 đường liên kết "đầu trang": khi người dùng nhấp vào <a href="#top">Top</a> (không phân biệt chữ hoa chữ thường) hoặc thậm chí chỉ <a href="#">Top</a>, họ sẽ được đưa trở lại đầu trang, trừ phi có một phần tử có mã nhận dạng top được đặt trong cùng một trường hợp chữ cái.

MLW là một tài liệu khá dài. Để tiết kiệm thời gian di chuyển, bạn có thể thêm một đường liên kết quay lại đầu trang từ cuối phần #teachers:

<a href="#top">Go to top.</a>

Đường liên kết thứ ba kết hợp hai giá trị: đường liên kết này chứa một URL tuyệt đối, theo sau là một đoạn liên kết. Điều này cho phép liên kết trực tiếp đến một phần trong URL đã xác định, trong trường hợp này là phần #teachers của trang chủ MLW. Trang MLW tải và trình duyệt di chuyển đến phần giáo viên mà không gửi đoạn trong yêu cầu HTTP.

Thuộc tính href có thể bắt đầu bằng mailto: hoặc tel: để gửi email hoặc gọi điện, việc xử lý đường liên kết sẽ tuỳ thuộc vào thiết bị, hệ điều hành và các ứng dụng đã cài đặt.

Đường liên kết mailto không cần phải có địa chỉ email, nhưng có thể có, cùng với văn bản cc, bcc, subject và body để điền sẵn email. Theo mặc định, một ứng dụng email sẽ được mở. Bạn có thể điền sẵn tiêu đề và nội dung email mà không có địa chỉ email để cho phép khách truy cập trang web mời bạn bè của họ. Trong đường liên kết của chúng tôi, ở chân trang của tài liệu, chúng tôi có URL đến trang đăng ký:

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

Dấu chấm hỏi (?) phân tách mailto: và địa chỉ email (nếu có) với cụm từ tìm kiếm. Trong truy vấn, dấu và (&) phân tách các trường và dấu bằng (=) so sánh mỗi tên trường với giá trị của trường đó. Toàn bộ chuỗi được mã hoá theo tỷ lệ phần trăm, điều này chắc chắn là cần thiết nếu giá trị href không được đặt trong dấu ngoặc kép hoặc nếu các giá trị có chứa dấu ngoặc kép.

Ứng dụng nào sẽ mở khi người dùng nhấp, nhấn hoặc nhấn Enter vào một đường liên kết tel tuỳ thuộc vào hệ điều hành, các ứng dụng đã cài đặt và chế độ cài đặt mà người dùng có trên thiết bị của họ. iPhone có thể mở FaceTime, ứng dụng điện thoại hoặc danh bạ. Skype có thể mở trên máy tính Windows nếu bạn đã cài đặt.

Có một số loại URL khác, chẳng hạn như blob và URL dữ liệu (xem ví dụ trong phần thảo luận về thuộc tính download). Đối với các trang web an toàn (những trang web được phân phát qua https), bạn có thể tạo và chạy các giao thức dành riêng cho ứng dụng bằng registerProtocolHandler().

Khi thêm các đường liên kết có khả năng mở các ứng dụng đã cài đặt khác, bạn nên cho người dùng biết. Đảm bảo văn bản giữa thẻ mở và thẻ đóng cho người dùng biết loại đường liên kết mà họ sắp kích hoạt. Bạn có thể sử dụng bộ chọn thuộc tính CSS (chẳng hạn như [href^="mailto:"], [href^="tel:"] và [href$=".pdf"]) để nhắm đến các kiểu theo loại ứng dụng.

Tài nguyên có thể tải xuống

Bạn nên thêm thuộc tính download khi href trỏ đến một tài nguyên có thể tải xuống. Giá trị của thuộc tính tải xuống là tên tệp được đề xuất cho tài nguyên cần lưu trong hệ thống tệp cục bộ của người dùng. SVGOMG, Trình tối ưu hoá SVG, sử dụng thuộc tính download để đề xuất tên tệp cho blob có thể tải xuống mà trình tối ưu hoá tạo ra. Khi hal.svg được tối ưu hoá, thẻ mở đường liên kết tải xuống của SVGOMG sẽ tương tự như:

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

Ngoài ra, còn có một bản minh hoạ về <canvas> tạo ra một URL dữ liệu PNG có thể tải xuống.

Để liên kết đến một tài nguyên có thể tải xuống, hãy thêm URL của tài sản làm giá trị của thuộc tính href và tên tệp được đề xuất cho người dùng làm giá trị của thuộc tính download.

Bối cảnh duyệt web

Thuộc tính target cho phép xác định bối cảnh duyệt xem cho hoạt động điều hướng bằng đường liên kết (và gửi biểu mẫu). Bốn từ khoá không phân biệt chữ hoa chữ thường, có tiền tố là dấu gạch dưới đã được thảo luận với phần tử <base>. Nội dung như vậy bao gồm:

• (Mặc định) _self: Mở đường liên kết trong cửa sổ hiện tại.
• _blank: Mở đường liên kết trong thẻ mới.
• _parent: Mở đường liên kết trong đối tượng mẹ hoặc iframe.
• _top: Mở đường liên kết trong phần tử gốc trên cùng. Điều này đặc biệt hữu ích nếu đường liên kết được lồng sâu.

Nếu đường liên kết không được lồng, _top và _parent sẽ hoạt động giống như _self. Thuộc tính target không giới hạn ở 4 cụm từ khoá này: bạn có thể sử dụng bất kỳ cụm từ nào.

Mỗi ngữ cảnh duyệt web (hoặc mỗi thẻ trình duyệt) đều có một tên ngữ cảnh duyệt web. Đường liên kết có thể mở đường liên kết trong thẻ hiện tại, thẻ mới chưa đặt tên hoặc thẻ mới hoặc thẻ hiện có đã đặt tên. Theo mặc định, tên là chuỗi trống.

Để mở một đường liên kết trong thẻ mới, người dùng có thể nhấp chuột phải rồi chọn "Mở trong thẻ mới". Nhà phát triển có thể buộc thực hiện việc này bằng cách thêm target="_blank".

Đường liên kết có target="_blank" sẽ mở trong một thẻ mới có tên rỗng, mở một thẻ mới, chưa đặt tên mỗi khi bạn nhấp vào đường liên kết. Thao tác này có thể tạo ra nhiều thẻ mới. Quá nhiều thẻ. Ví dụ: nếu người dùng nhấp vào <a href="registration.html" target="_blank">Register Now</a> 15 lần, biểu mẫu đăng ký sẽ mở ra trong 15 thẻ riêng biệt. Bạn có thể khắc phục vấn đề này bằng cách cung cấp tên bối cảnh thẻ. Bằng cách thêm targetthuộc tính có giá trị phân biệt chữ hoa chữ thường, chẳng hạn như <a href="registration.html" target="reg">Register Now</a>, lượt nhấp đầu tiên sẽ mở biểu mẫu đăng ký trong thẻ reg mới. Nếu bạn nhấp vào đường liên kết này thêm 15 lần, quá trình đăng ký sẽ tải lại trong bối cảnh duyệt web reg mà không mở thêm bất kỳ thẻ nào.

Thuộc tính rel kiểm soát những loại đường liên kết mà đường liên kết tạo ra, xác định mối quan hệ giữa tài liệu hiện tại và tài nguyên được liên kết trong siêu liên kết. Giá trị của thuộc tính phải là một danh sách được phân tách bằng dấu cách trên một hoặc nhiều giá trị điểm số của thuộc tính rel do thẻ <a> hỗ trợ.

Bạn có thể thêm từ khoá nofollow nếu không muốn các trình thu thập thông tin đi theo đường liên kết. Bạn có thể thêm giá trị external để cho biết rằng đường liên kết chuyển hướng đến một URL bên ngoài và không phải là một trang trong miền hiện tại. Từ khoá help cho biết siêu liên kết sẽ cung cấp thông tin trợ giúp theo ngữ cảnh. Khi di chuột lên một đường liên kết có giá trị rel này, bạn sẽ thấy con trỏ trợ giúp thay vì con trỏ chỉ báo thông thường. Đừng chỉ sử dụng giá trị này để lấy con trỏ trợ giúp; thay vào đó, hãy sử dụng thuộc tính CSS cursor. Bạn có thể dùng các giá trị prev và next trên các đường liên kết trỏ đến tài liệu trước và tài liệu tiếp theo trong một loạt tài liệu.

Tương tự như <link rel="alternative">, ý nghĩa của <a rel="alternative"> phụ thuộc vào các thuộc tính khác. Các lựa chọn thay thế cho nguồn cấp dữ liệu RSS cũng sẽ bao gồm type="application/rss+xml" hoặc type="application/atom+xml, các định dạng thay thế sẽ bao gồm thuộc tính type và bản dịch sẽ bao gồm thuộc tính hreflang. Nếu nội dung giữa thẻ mở và thẻ đóng có ngôn ngữ khác với ngôn ngữ chính của tài liệu, hãy thêm thuộc tính lang. Nếu ngôn ngữ của tài liệu được siêu liên kết là một ngôn ngữ khác, hãy thêm thuộc tính hreflang.

Trong ví dụ này, chúng tôi thêm URL của trang được dịch làm giá trị của href, rel="alternate" để cho biết đó là phiên bản thay thế của một trang web; thuộc tính hreflang cung cấp ngôn ngữ của bản dịch:

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

Nếu bản dịch tiếng Pháp là một tệp PDF, bạn có thể cung cấp thuộc tính type với loại MIME PDF của tài nguyên được liên kết. Mặc dù loại MIME chỉ mang tính chất tư vấn, nhưng bạn nên thông báo cho người dùng rằng một đường liên kết sẽ mở một tài liệu có định dạng khác.

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

Theo dõi lượt nhấp vào đường liên kết

Một cách để theo dõi lượt tương tác của người dùng là ping một URL khi người dùng nhấp vào một đường liên kết. Thuộc tính ping (nếu có) bao gồm một danh sách các URL bảo mật (bắt đầu bằng https) được phân tách bằng dấu cách. Danh sách này sẽ được thông báo hoặc ping nếu người dùng kích hoạt siêu liên kết. Trình duyệt sẽ gửi các yêu cầu POST có nội dung PING đến các URL được liệt kê làm giá trị của thuộc tính ping.

Mẹo về trải nghiệm người dùng

• Luôn cân nhắc trải nghiệm người dùng khi viết HTML. Đường liên kết phải cung cấp đủ thông tin về tài nguyên được liên kết để người dùng biết họ đang nhấp vào nội dung gì.
• Trong một khối văn bản, hình thức của các đường liên kết phải khác biệt đủ với văn bản xung quanh để người dùng có thể dễ dàng xác định đường liên kết với nội dung khác. Sử dụng nhiều chỉ báo trực quan, chẳng hạn như màu sắc và đường gạch chân. Chỉ màu sắc thôi là chưa đủ.
• Luôn thêm kiểu tiêu điểm. Điều này giúp người dùng chỉ sử dụng bàn phím biết vị trí của họ khi nhấn phím Tab để chuyển qua nội dung của bạn.
• Nội dung giữa thẻ mở <a> và thẻ đóng </a> là tên mặc định mà người dùng có thể truy cập vào đường liên kết và phải thông báo cho người dùng về đích đến hoặc mục đích của đường liên kết. Nếu nội dung của một đường liên kết là hình ảnh, thì nội dung mô tả alt là tên có thể truy cập. Văn bản trong đường liên kết và văn bản alt phải mang tính mô tả hơn so với "nhấp vào đây" hoặc "thông tin khác". Thay vào đó, đường liên kết phải cung cấp cho người dùng thông tin về nơi họ sẽ đến khi kích hoạt đường liên kết. Điều này rất quan trọng đối với người dùng trình đọc màn hình và kết quả trên công cụ tìm kiếm.
• Đừng thêm nội dung tương tác, chẳng hạn như <button> hoặc <input>, vào bên trong một đường liên kết. Đừng lồng ghép đường liên kết trong <button> hoặc <label>. Mặc dù trang HTML vẫn sẽ hiển thị, nhưng việc lồng các phần tử có thể lấy tiêu điểm và có thể nhấp vào bên trong các phần tử tương tác sẽ tạo ra trải nghiệm người dùng kém.
• Nếu có thuộc tính href, việc nhấn phím Enter khi tiêu điểm ở phần tử <a> sẽ kích hoạt phần tử đó.
• Đường liên kết không chỉ giới hạn ở HTML. Phần tử a cũng có thể được dùng trong SVG, tạo thành một đường liên kết bằng thuộc tính "href" hoặc "xlink:href".

Đường liên kết và JavaScript

Thuộc tính links trả về một HTMLCollection khớp với các phần tử a và area có thuộc tính href.

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

Trong phần này, bạn đã tìm hiểu tất cả về đường liên kết. Phần tiếp theo đề cập đến danh sách. Chúng ta cần tìm hiểu về danh sách để có thể tạo danh sách các đường liên kết, còn được gọi là điều hướng.

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về đường liên kết.