Liên kết

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

Thẻ ký tự liên kết <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à cốt lõi của Internet. Trang web đầu tiên có 25 đường liên kết, với nội dung là "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 đều đượ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 trưởng vượt bậc kể từ khi Tim Berners-Lee công bố phần giải thích đầu tiên này vào tháng 8 năm 1991. Các đường liên kết thể hiện sự kết nối giữa hai tài nguyên, một tài nguyên trong số đó là tài liệu hiện tại. Bạn có thể tạo đường liên kết bằng <a>, <area>, <form> và <link>. Bạn đã tìm hiểu về <link> và sẽ khám phá các biểu mẫu trong một phần riêng. Ngoài ra, ứng dụng này còn có toàn bộ phần tìm hiểu 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 và 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 đường siêu liên kết là yếu tố 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í trên trang hiện tại, các trang khác trong một trang web hoặc các trang web khác nói chung. Thư viện này cũng có thể được mã hoá để 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 đề xuất trong nội dung email.

<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, có thể dùng được 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 đơn giản là //, đó là giao thức ngầm ẩn và có nghĩa là "sử dụng cùng một giao thức như hiện đang được sử dụng".

URL tương đối không bao gồm giao thức hoặc tên miền. Chúng "tương ứng" với tệp hiện tại. MLW là một trang web một trang, nhưng loạt HTML này có một số phần. Để liên kết từ trang này đến bài học về thuộc tính, URL tương đối đượ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 phân đoạn đường liên kết và sẽ liên kết với 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ợ hai đường liên kết "đầu trang": khi nhấp vào <a href="#top">Top</a> (không phân biệt chữ hoa chữ thường) hoặc chỉ đơn giản là <a href="#">Top</a> sẽ cuộn người dùng lên đầu trang, trừ phi có một phần tử có mã nhận dạng top được đặt trong cùng một kiểu chữ.

MLW là một tài liệu khá dài. Để lưu thao tác cuộn, bạn có thể thêm một đường liên kết trở lại đầu trang ở cuối mục #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 phân đoạn liên kết. Thao tác 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 trên trang chủ MLW. Trang MLW sẽ được tải; sau đó trình duyệt sẽ cuộn đến phần giáo viên mà không gửi mảnh 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 thực hiện cuộc gọi, với việc xử lý đường liên kết tuỳ thuộc vào thiết bị, hệ điều hành và ứng dụng đã cài đặt.

Đường liên kết mailto không nhất thiết phải có địa chỉ email nhưng có thể cùng với văn bản cc, bcc, subject và body để điền sẵn địa chỉ email. Theo mặc định, ứng dụng email sẽ được mở. Bạn có thể điền sẵn chủ đề và nội dung email mà không cần đị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, ở chân trang của tài liệu, chúng tôi đưa URL vào 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ó) khỏi cụm từ truy vấn. Trong truy vấn, ký hiệu và (&) phân tách các trường và dấu bằng (=) cân bằng mỗi tên trường với giá trị tương ứng. Toàn bộ chuỗi được mã hoá theo 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 trích dẫn hoặc nếu các giá trị có dấu ngoặc kép.

Ứng dụng nào được mở khi người dùng nhấp vào, nhấn hoặc nhấn Enter trên đườ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à các chế độ cài đặt mà người dùng cài đặt trên thiết bị. iPhone có thể mở FaceTime, ứng dụng điện thoại hoặc danh bạ. Nếu đã cài đặt ứng dụng trên máy tính Windows, thì bạn có thể mở được ứng dụng Skype.

Ngoài ra còn có một số loại URL khác, chẳng hạn như blobs 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 bảo mật (những trang web được phân phối qua https), bạn có thể tạo và chạy giao thức dành riêng cho ứng dụng bằng registerProtocolHandler().

Khi đưa vào các đường liên kết có khả năng mở các ứng dụng khác đã được cài đặt, bạn nên thông báo cho người dùng. Hãy đả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 họ sắp kích hoạt. Bạn có thể dùng các bộ chọn thuộc tính CSS như [href^="mailto:"], [href^="tel:"] và [href$=".pdf"] để nhắm mục tiêu các kiểu theo loại ứng dụng.

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

Thuộc tính download phải được đưa vào 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 đề xuất để lưu tài nguyên 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, bạn cũng có thể xem bản minh hoạ về <canvas> để tạo URL có thể tải xuống từ dữ liệu PNG.

Để 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 đề xuất (có thể dùng trong hệ thống tệp của người dùng làm giá trị của thuộc tính download).

Ngữ cảnh duyệt web

Thuộc tính target cho phép xác định ngữ cảnh duyệt web để di chuyển trên đường liên kết (và gửi biểu mẫu. Bốn từ khoá có tiền tố không phân biệt chữ hoa chữ thường và có dấu gạch dưới được thảo luận bằng phần tử <base>. Chúng bao gồm _self mặc định, tức là cửa sổ hiện tại, _blank, mở đường liên kết trong một thẻ mới, _parent (là thẻ mẹ nếu đường liên kết hiện tại được lồng trong một đối tượng hoặc iframe) và _top là đối tượng cấp trên trên cùng, đặc biệt hữu ích nếu đường liên kết hiện tại được lồng sâu. _top và _parent giống với _self nếu đường liên kết không được lồng. Thuộc tính target không giới hạn ở 4 từ khoá chính sau: mọi thuật ngữ đều có thể dùng.

Mọi ngữ cảnh duyệt web – về cơ bản là mỗi thẻ trình duyệt – đều có tên ngữ cảnh duyệt web. Các đường liên kết có thể mở đường liên kết trong thẻ hiện tại, một thẻ mới chưa có tên, hoặc một thẻ mới hoặc hiện có. 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 và chọn "Mở trong thẻ mới". Nhà phát triển có thể buộc thực thi việc này bằng cách thêm target="_blank".

Một đường liên kết có target="_blank" sẽ được mở trong một thẻ mới có tên rỗng, mở một thẻ mới, chưa đặt tên với mỗi lượt nhấp vào đường liên kết. Thao tác này có thể tạo nhiều thẻ mới. Có 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ở trong 15 thẻ riêng biệt. Bạn có thể khắc phục vấn đề này bằng cách đặt tên cho ngữ cảnh thẻ. Khi bạn thêm thuộc tính target 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 vào đường liên kết này sẽ mở biểu mẫu đăng ký trong một thẻ reg mới. Nhấp vào liên kết này thêm 15 lần nữa sẽ tải lại đăng ký trong ngữ cảnh duyệt web reg mà không cần mở thêm thẻ nào.

Thuộc tính rel kiểm soát các 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 điểm giá trị thuộc tính rel mà thẻ <a> hỗ trợ.

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

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à các bản dịch sẽ bao gồm thuộc tính hreflang. Nếu nội dung ở giữa các thẻ mở và đóng bằng một ngôn ngữ không phả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ó đường siêu liên kết là ngôn ngữ khác, hãy thêm thuộc tính hreflang.

Trong ví dụ này, chúng tôi đưa URL của trang đã dịch vào dưới dạng giá trị của href, rel="alternate" để cho biết đây 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 loại bằng 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 ở đị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>

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

Một cách để theo dõi hoạt động 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 được phân tách bằng dấu cách (bắt đầu bằng https) 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 gửi các yêu cầu POST có nội dung PING đến các URL được liệt kê dưới dạng giá trị của thuộc tính ping.

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

• Luôn xem xét trải nghiệm người dùng khi viết HTML. Đường liên kết nên 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ãy đảm bảo hình thức của các đường liên kết đủ khác với văn bản xung quanh để người dùng có thể dễ dàng xác định các đường liên kết với phần còn lại của nội dung, đảm bảo rằng chỉ màu sắc không phải là cách duy nhất để phân biệt giữa văn bản và nội dung xung quanh.
• Luôn bao gồm các kiểu tiêu điểm; điều này cho phép trình điều hướng bằng bàn phím biết họ đang ở đâu khi duyệt qua nội dung của bạn.
• Nội dung ở giữa <a> mở và đóng </a> là tên mặc định có thể truy cập của đườ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ày. Nếu nội dung của đường liên kết là một hình ảnh, thì nội dung mô tả alt là tên thành phần hỗ trợ tiếp cận. Cho dù tên thành phần hỗ trợ tiếp cận đến từ thuộc tính alt hay một nhóm nhỏ các từ trong một khối văn bản, hãy đảm bảo thuộc tính này cung cấp thông tin về đích đến của đường liên kết. Văn bản liên kết nên mô tả nhiều hơn so với "nhấp vào đây" hoặc "thông tin khác"; đ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ả của công cụ tìm kiếm của bạn!
• Đừng đưa nội dung tương tác (chẳng hạn như <button> hoặc <input>) vào trong một đường liên kết. Bạn cũng không được lồng một đườ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àm tâm đ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, thao tác nhấn phím Enter khi đặt tiêu điểm vào phần tử <a> sẽ kích hoạt thuộc tính này.
• Đường liên kết không bị giới hạn ở HTML. Bạn cũng có thể sử dụng phần tử a trong một SVG, tạo một đường liên kết có 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 mọi kiến thức về đường liên kết. Phần tiếp theo trình bày về danh sách mà chúng ta cần tìm hiểu để có thể nhóm các danh sách đó lại với nhau nhằm tạo danh sách đường liên kết (còn 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.