Hướng dẫn what is the html tag for a link? - thẻ html cho một liên kết là gì?

Thử nó

Thuộc tính

Các thuộc tính của yếu tố này bao gồm các thuộc tính toàn cầu.

a {
  display: block;
  margin-bottom: 0.5em;
}

Khiến trình duyệt coi URL được liên kết là tải về. Có thể được sử dụng có hoặc không có giá trị:

• Không có giá trị, trình duyệt sẽ đề xuất tên tệp/tiện ích mở rộng, được tạo từ nhiều nguồn khác nhau:
  • Tiêu đề

    a {
      display: block;
      margin-bottom: 0.5em;
    }
    

    8 HTTP
  • Phân đoạn cuối cùng trong đường dẫn URL
  • Loại phương tiện (từ tiêu đề

    a {
      display: block;
      margin-bottom: 0.5em;
    }
    

    9, bắt đầu URL

    
    <p><a href="#Section_further_down"> Jump to the heading below a>p>
    
    
    <h2 id="Section_further_down">Section further downh2>
    

    0 hoặc

    
    <p><a href="#Section_further_down"> Jump to the heading below a>p>
    
    
    <h2 id="Section_further_down">Section further downh2>
    

    1 cho URL

    
    <p><a href="#Section_further_down"> Jump to the heading below a>p>
    
    
    <h2 id="Section_further_down">Section further downh2>
    

    2)
• Xác định một giá trị cho thấy nó là tên tệp.

  
  <p><a href="#Section_further_down"> Jump to the heading below a>p>
  
  
  <h2 id="Section_further_down">Section further downh2>
  

  3 và

  
  <p><a href="#Section_further_down"> Jump to the heading below a>p>
  
  
  <h2 id="Section_further_down">Section further downh2>
  

  4 Các ký tự được chuyển đổi thành dấu gạch dưới (

  
  <p><a href="#Section_further_down"> Jump to the heading below a>p>
  
  
  <h2 id="Section_further_down">Section further downh2>
  

  5). Hệ thống tập tin có thể cấm các ký tự khác trong tên tệp, vì vậy trình duyệt sẽ điều chỉnh tên được đề xuất nếu cần thiết.

Note:

• a {
    display: block;
    margin-bottom: 0.5em;
  }
  

  7 chỉ hoạt động cho các URL đồng có nguồn gốc hoặc các chương trình

  
  <p><a href="#Section_further_down"> Jump to the heading below a>p>
  
  
  <h2 id="Section_further_down">Section further downh2>
  

  2 và

  
  <p><a href="#Section_further_down"> Jump to the heading below a>p>
  
  
  <h2 id="Section_further_down">Section further downh2>
  

  0.
• Cách các trình duyệt xử lý tải xuống thay đổi theo trình duyệt, cài đặt người dùng và các yếu tố khác. Người dùng có thể được nhắc trước khi tải xuống bắt đầu hoặc tệp có thể được lưu tự động hoặc nó có thể tự động mở, trong một ứng dụng bên ngoài hoặc trong chính trình duyệt.
• Nếu tiêu đề

  a {
    display: block;
    margin-bottom: 0.5em;
  }
  

  8 có thông tin khác nhau từ thuộc tính

  a {
    display: block;
    margin-bottom: 0.5em;
  }
  

  7, hành vi kết quả có thể khác nhau:
  • Nếu tiêu đề chỉ định

    <a href="mailto:">Send email to nowherea>
    

    1, nó sẽ được ưu tiên hơn tên tệp được chỉ định trong thuộc tính

    a {
      display: block;
      margin-bottom: 0.5em;
    }
    

    7.
  • Nếu tiêu đề chỉ định một cách xử lý

    <a href="mailto:">Send email to nowherea>
    

    3, Chrome và Firefox ưu tiên thuộc tính và coi nó là một bản tải xuống. Các phiên bản Firefox cũ (trước 82) ưu tiên tiêu đề và sẽ hiển thị nội dung nội dung.

a {
  display: block;
  margin-bottom: 0.5em;
}

URL mà siêu liên kết chỉ đến. Các liên kết không bị giới hạn trong các URL dựa trên HTTP-chúng có thể sử dụng bất kỳ chương trình URL nào được hỗ trợ bởi các trình duyệt:

• Các phần của một trang có URL phân đoạn
• Các mảnh tệp phương tiện với các đoạn phương tiện
• Số điện thoại có URL

  <a href="mailto:">Send email to nowherea>
  

  5
• Địa chỉ email với URL

  <a href="mailto:">Send email to nowherea>
  

  6
• Mặc dù các trình duyệt web có thể không hỗ trợ các sơ đồ URL khác, các trang web có thể với

  <a href="mailto:">Send email to nowherea>
  

  7

<a href="mailto:">Send email to nowherea>

Gợi ý về ngôn ngữ của con người của URL được liên kết. Không có chức năng tích hợp. Các giá trị được phép giống như thuộc tính toàn cầu

<a href="mailto:">Send email to nowherea>

<a href="tel:+49.157.0156">+49 157 0156a>
<a href="tel:+1(555)5309">(555) 5309a>

Một danh sách các URL được phân tách không gian. Khi liên kết được theo dõi, trình duyệt sẽ gửi các yêu cầu

<a href="tel:+49.157.0156">+49 157 0156a>
<a href="tel:+1(555)5309">(555) 5309a>

<a href="tel:+49.157.0156">+49 157 0156a>
<a href="tel:+1(555)5309">(555) 5309a>

<a href="tel:+49.157.0156">+49 157 0156a>
<a href="tel:+1(555)5309">(555) 5309a>

Bao nhiêu người giới thiệu để gửi khi theo liên kết.

• <a href="tel:+49.157.0156">+49 157 0156a>
  <a href="tel:+1(555)5309">(555) 5309a>
  

  4: Tiêu đề

  <a href="tel:+49.157.0156">+49 157 0156a>
  <a href="tel:+1(555)5309">(555) 5309a>
  

  5 sẽ không được gửi.

• <a href="tel:+49.157.0156">+49 157 0156a>
  <a href="tel:+1(555)5309">(555) 5309a>
  

  6: Tiêu đề

  <a href="tel:+49.157.0156">+49 157 0156a>
  <a href="tel:+1(555)5309">(555) 5309a>
  

  5 sẽ không được gửi đến nguồn gốc mà không có TLS (https).

• <a href="tel:+49.157.0156">+49 157 0156a>
  <a href="tel:+1(555)5309">(555) 5309a>
  

  8: Người giới thiệu đã gửi sẽ được giới hạn trong nguồn gốc của trang giới thiệu: sơ đồ, máy chủ và cổng của nó.

• <a href="tel:+49.157.0156">+49 157 0156a>
  <a href="tel:+1(555)5309">(555) 5309a>
  

  9: Người giới thiệu được gửi đến nguồn gốc khác sẽ được giới hạn trong chương trình, máy chủ và cổng. Điều hướng trên cùng một nguồn gốc vẫn sẽ bao gồm đường dẫn.

• <p>
    Paint by holding down the mouse button and moving it.
    <a href="" download="my_painting.png">Download my paintinga>
  p>
  
  <canvas width="300" height="300">canvas>
  

  0: Người giới thiệu sẽ được gửi cho cùng một nguồn gốc, nhưng các yêu cầu có nguồn gốc chéo sẽ không chứa thông tin giới thiệu.

• <p>
    Paint by holding down the mouse button and moving it.
    <a href="" download="my_painting.png">Download my paintinga>
  p>
  
  <canvas width="300" height="300">canvas>
  

  1: Chỉ gửi nguồn gốc của tài liệu dưới dạng người giới thiệu khi mức bảo mật giao thức vẫn giữ nguyên (HTTPS → HTTPS), nhưng không gửi nó đến đích ít an toàn hơn (HTTPS → HTTP).

• <p>
    Paint by holding down the mouse button and moving it.
    <a href="" download="my_painting.png">Download my paintinga>
  p>
  
  <canvas width="300" height="300">canvas>
  

  2 (mặc định): Gửi URL đầy đủ khi thực hiện yêu cầu đồng nghĩa, chỉ gửi nguồn gốc khi mức bảo mật giao thức vẫn giữ nguyên (HTTPS → HTTPS) và không gửi tiêu đề đến đích ít an toàn hơn (HTTPS → HTTP).

• <p>
    Paint by holding down the mouse button and moving it.
    <a href="" download="my_painting.png">Download my paintinga>
  p>
  
  <canvas width="300" height="300">canvas>
  

  3: Người giới thiệu sẽ bao gồm nguồn gốc và đường dẫn (nhưng không phải là đoạn, mật khẩu hoặc tên người dùng). Giá trị này không an toàn, bởi vì nó rò rỉ nguồn gốc và đường dẫn từ các tài nguyên được bảo vệ TLS đến nguồn gốc không an toàn.This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my paintinga>
p>

<canvas width="300" height="300">canvas>

Mối quan hệ của URL được liên kết là các loại liên kết được phân tách không gian.

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my paintinga>
p>

<canvas width="300" height="300">canvas>

Nơi hiển thị URL được liên kết, làm tên cho bối cảnh duyệt web (một tab, cửa sổ hoặc

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my paintinga>
p>

<canvas width="300" height="300">canvas>

• <p>
    Paint by holding down the mouse button and moving it.
    <a href="" download="my_painting.png">Download my paintinga>
  p>
  
  <canvas width="300" height="300">canvas>
  

  7: Bối cảnh duyệt web hiện tại. (Mặc định)

• <p>
    Paint by holding down the mouse button and moving it.
    <a href="" download="my_painting.png">Download my paintinga>
  p>
  
  <canvas width="300" height="300">canvas>
  

  8: Thường là một tab mới, nhưng người dùng có thể định cấu hình các trình duyệt để mở một cửa sổ mới thay thế.

• <p>
    Paint by holding down the mouse button and moving it.
    <a href="" download="my_painting.png">Download my paintinga>
  p>
  
  <canvas width="300" height="300">canvas>
  

  9: Bối cảnh duyệt cha mẹ của hiện tại. Nếu không có cha mẹ, hành xử như

  <p>
    Paint by holding down the mouse button and moving it.
    <a href="" download="my_painting.png">Download my paintinga>
  p>
  
  <canvas width="300" height="300">canvas>
  

  7.

• html {
    font-family: sans-serif;
  }
  canvas {
    background: #fff;
    border: 1px dashed;
  }
  a {
    display: inline-block;
    background: #69c;
    color: #fff;
    padding: 5px 10px;
  }
  

  1: Bối cảnh duyệt trên cùng (bối cảnh "cao nhất" là tổ tiên của hiện tại). Nếu không có tổ tiên, hành xử như

  <p>
    Paint by holding down the mouse button and moving it.
    <a href="" download="my_painting.png">Download my paintinga>
  p>
  
  <canvas width="300" height="300">canvas>
  

  7.

Lưu ý: Cài đặt

html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}

a {
  display: block;
  margin-bottom: 0.5em;
}

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my paintinga>
p>

<canvas width="300" height="300">canvas>

html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}

html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}

html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}

a {
  display: block;
  margin-bottom: 0.5em;
}

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my paintinga>
p>

<canvas width="300" height="300">canvas>

html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}

html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}

html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}

Gợi ý ở định dạng URL được liên kết với loại MIME. Không có chức năng tích hợp.

Thuộc tính không dùng nữa

html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}

Gợi ý về mã hóa ký tự của URL được liên kết.

Lưu ý: Thuộc tính này không được sử dụng và không nên được sử dụng bởi các tác giả. Sử dụng tiêu đề HTTP

a {
  display: block;
  margin-bottom: 0.5em;
}

a {
  display: block;
  margin-bottom: 0.5em;
}

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI*2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener('mousemove', (event) =>
  draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () => isDrawing = true);
canvas.addEventListener('mouseup', () => isDrawing = false);

document.querySelector('a').addEventListener('click', (event) =>
  event.target.href = canvas.toDataURL()
);

Được sử dụng với thuộc tính

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI*2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener('mousemove', (event) =>
  draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () => isDrawing = true);
canvas.addEventListener('mouseup', () => isDrawing = false);

document.querySelector('a').addEventListener('click', (event) =>
  event.target.href = canvas.toDataURL()
);

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI*2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener('mousemove', (event) =>
  draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () => isDrawing = true);
canvas.addEventListener('mouseup', () => isDrawing = false);

document.querySelector('a').addEventListener('click', (event) =>
  event.target.href = canvas.toDataURL()
);

Được yêu cầu xác định một vị trí mục tiêu có thể trong một trang. Trong HTML 4.01,

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI*2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener('mousemove', (event) =>
  draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () => isDrawing = true);
canvas.addEventListener('mouseup', () => isDrawing = false);

document.querySelector('a').addEventListener('click', (event) =>
  event.target.href = canvas.toDataURL()
);

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI*2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener('mousemove', (event) =>
  draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () => isDrawing = true);
canvas.addEventListener('mouseup', () => isDrawing = false);

document.querySelector('a').addEventListener('click', (event) =>
  event.target.href = canvas.toDataURL()
);

a {
  display: block;
  margin-bottom: 0.5em;
}

Lưu ý: Sử dụng thuộc tính toàn cầu

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI*2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener('mousemove', (event) =>
  draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () => isDrawing = true);
canvas.addEventListener('mouseup', () => isDrawing = false);

document.querySelector('a').addEventListener('click', (event) =>
  event.target.href = canvas.toDataURL()
);

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI*2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener('mousemove', (event) =>
  draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () => isDrawing = true);
canvas.addEventListener('mouseup', () => isDrawing = false);

document.querySelector('a').addEventListener('click', (event) =>
  event.target.href = canvas.toDataURL()
);

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI*2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener('mousemove', (event) =>
  draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () => isDrawing = true);
canvas.addEventListener('mouseup', () => isDrawing = false);

document.querySelector('a').addEventListener('click', (event) =>
  event.target.href = canvas.toDataURL()
);

Chỉ định một liên kết ngược; ngược lại với thuộc tính

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my paintinga>
p>

<canvas width="300" height="300">canvas>

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI*2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener('mousemove', (event) =>
  draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () => isDrawing = true);
canvas.addEventListener('mouseup', () => isDrawing = false);

document.querySelector('a').addEventListener('click', (event) =>
  event.target.href = canvas.toDataURL()
);

Hình dạng của vùng siêu liên kết trong bản đồ hình ảnh.

Lưu ý: Thay vào đó, sử dụng phần tử

<p>
  Learn more about our products <a href="/products">herea>.
p>

<p>
  Learn more about our products <a href="/products">herea>.
p>

Đặc tính

<p>
  Learn more about our products <a href="/products">herea>.
p>

a {
  display: block;
  margin-bottom: 0.5em;
}

a {
  display: block;
  margin-bottom: 0.5em;
}

a {
  display: block;
  margin-bottom: 0.5em;
}

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

Ví dụ

Liên kết với một url tuyệt đối

HTML

<a href="https://www.mozilla.com"> Mozilla a>

Kết quả

Liên kết với các URL tương đối

HTML

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

a {
  display: block;
  margin-bottom: 0.5em;
}

Kết quả

Liên kết với các URL tương đối

<p><a href="#Section_further_down"> Jump to the heading below a>p>


<h2 id="Section_further_down">Section further downh2>

Liên kết với một phần tử trên cùng một trang

Liên kết đến một địa chỉ email

<a href="mailto:">Send email to nowherea>

Để tạo các liên kết mở trong chương trình email của người dùng để cho phép họ gửi tin nhắn mới, hãy sử dụng sơ đồ

<a href="mailto:">Send email to nowherea>

Để biết chi tiết về URL Send email to nowhere 6, chẳng hạn như bao gồm một chủ đề hoặc cơ thể, xem liên kết email hoặc RFC 6068.

<a href="tel:+49.157.0156">+49 157 0156a>
<a href="tel:+1(555)5309">(555) 5309a>

Liên kết với số điện thoại

• <a href="mailto:">Send email to nowherea>
  

  5 Hành vi liên kết thay đổi theo khả năng của thiết bị:
• Thiết bị di động tự động số.
• Hầu hết các hệ điều hành đều có các chương trình có thể thực hiện các cuộc gọi, như Skype hoặc FaceTime.
• Các trang web có thể gọi điện thoại với

  <a href="//example.com">Scheme-relative URLa>
  <a href="/en-US/docs/Web/HTML">Origin-relative URLa>
  <a href="./p">Directory-relative URLa>
  

  11, chẳng hạn như

  <a href="//example.com">Scheme-relative URLa>
  <a href="/en-US/docs/Web/HTML">Origin-relative URLa>
  <a href="./p">Directory-relative URLa>
  

  12.

Các hành vi khác bao gồm lưu số vào danh bạ hoặc gửi số đến một thiết bị khác.

Xem RFC 3966 để biết cú pháp, các tính năng bổ sung và các chi tiết khác về sơ đồ URL Send email to nowhere 5.

Sử dụng thuộc tính tải xuống để lưu A dưới dạng PNG

Để lưu nội dung của phần tử

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

14 dưới dạng hình ảnh, bạn có thể tạo một liên kết trong đó

a {
  display: block;
  margin-bottom: 0.5em;
}

3 là dữ liệu Canvas dưới dạng URL

<p><a href="#Section_further_down"> Jump to the heading below a>p>


<h2 id="Section_further_down">Section further downh2>

0 được tạo bằng JavaScript và thuộc tính

a {
  display: block;
  margin-bottom: 0.5em;
}

7 cung cấp tên tệp cho tệp PNG đã tải xuống:

HTML

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my paintinga>
p>

<canvas width="300" height="300">canvas>

<a href="https://www.mozilla.com"> Mozilla a>

html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}

Kết quả

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI*2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener('mousemove', (event) =>
  draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () => isDrawing = true);
canvas.addEventListener('mouseup', () => isDrawing = false);

document.querySelector('a').addEventListener('click', (event) =>
  event.target.href = canvas.toDataURL()
);

Kết quả

Liên kết với các URL tương đối

Liên kết với một phần tử trên cùng một trang

Liên kết đến một địa chỉ email

Để tạo các liên kết mở trong chương trình email của người dùng để cho phép họ gửi tin nhắn mới, hãy sử dụng sơ đồ Send email to nowhere 6:

Để biết chi tiết về URL Send email to nowhere 6, chẳng hạn như bao gồm một chủ đề hoặc cơ thể, xem liên kết email hoặc RFC 6068.

Liên kết với số điện thoại, even out of context.

<a href="mailto:">Send email to nowherea>

5 Hành vi liên kết thay đổi theo khả năng của thiết bị:

Thiết bị di động tự động số.

<p>
  Learn more about our products <a href="/products">herea>.
p>

Để biết chi tiết về URL

<a href="mailto:">Send email to nowherea>

6, chẳng hạn như bao gồm một chủ đề hoặc cơ thể, xem liên kết email hoặc RFC 6068.

Liên kết với số điện thoại

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

Phần mềm hỗ trợ có các phím tắt để liệt kê tất cả các liên kết trên một trang. Tuy nhiên, văn bản liên kết mạnh có lợi cho tất cả người dùng - phím tắt "Danh sách tất cả các liên kết" mô phỏng cách người dùng nhìn thấy nhanh chóng quét các trang.

Sự kiện onclick

Các phần tử neo thường bị lạm dụng dưới dạng các nút giả bằng cách đặt

a {
  display: block;
  margin-bottom: 0.5em;
}

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

Các giá trị

a {
  display: block;
  margin-bottom: 0.5em;
}

Sử dụng

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

Liên kết bên ngoài và liên kết với các tài nguyên không phải HTML

Các liên kết mở trong một tab/cửa sổ mới thông qua

html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}

Những người gặp phải điều kiện tầm nhìn thấp, điều hướng với sự trợ giúp của công nghệ đọc màn hình hoặc với các mối quan tâm nhận thức có thể bị nhầm lẫn khi một tab mới, cửa sổ hoặc ứng dụng mở ra bất ngờ. Phần mềm đọc màn hình cũ hơn thậm chí có thể không công bố hành vi.

Liên kết mở một tab/cửa sổ mới

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

Liên kết với tài nguyên không phải HTML

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

Nếu một biểu tượng được sử dụng để biểu thị hành vi liên kết, hãy đảm bảo nó có văn bản alt:

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

• Webaim: Liên kết và Siêu văn bản - Liên kết siêu văn bản
• MDN / Hiểu WCAG, Hướng dẫn 3.2
• G200: Chỉ mở các cửa sổ và tab mới từ một liên kết chỉ khi cần thiết
• G201: CẢNH BÁO CẢNH BÁO CẢNH BÁO khi mở cửa sổ mới

Bỏ qua các liên kết

Liên kết bỏ qua là một liên kết được đặt càng sớm càng tốt trong nội dung

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

Bỏ qua các liên kết cho phép người dùng bàn phím bỏ qua nội dung được lặp lại trong nhiều trang, chẳng hạn như điều hướng tiêu đề.

Các liên kết bỏ qua đặc biệt hữu ích cho những người điều hướng với sự trợ giúp của công nghệ hỗ trợ như điều khiển chuyển đổi, lệnh thoại hoặc gậy miệng/đũa đầu, trong đó hành động di chuyển qua các liên kết lặp đi lặp lại có thể gây tốn nhiều công sức.

• Webaim: Liên kết "Bỏ qua điều hướng"
• Cách làm: Sử dụng các liên kết điều hướng bỏ qua
• MDN / Hiểu WCAG, Hướng dẫn 2.4 Giải thích
• Hiểu tiêu chí thành công 2.4.1

Kích thước và sự gần gũi

Kích thước

Các yếu tố tương tác, như các liên kết, sẽ cung cấp một khu vực đủ lớn để dễ dàng kích hoạt chúng. Điều này giúp nhiều người, bao gồm cả những người có vấn đề điều khiển động cơ và những người sử dụng các đầu vào không chính xác như màn hình cảm ứng. Nên kích thước tối thiểu 44 × 44 pixel CSS.

Các liên kết chỉ có văn bản trong nội dung văn xuôi được miễn yêu cầu này, nhưng vẫn là một ý tưởng tốt để đảm bảo đủ văn bản được liên kết với nhau để dễ dàng được kích hoạt.

• Hiểu tiêu chí thành công 2.5.5: Kích thước mục tiêu
• Kích thước mục tiêu và 2.5.5
• Kiểm tra nhanh: Các mục tiêu cảm ứng lớn

Sự gần gũi

Các yếu tố tương tác, giống như các liên kết, được đặt trong sự gần gũi trực quan nên có không gian ngăn cách chúng. Khoảng cách giúp những người có vấn đề điều khiển động cơ, những người có thể vô tình kích hoạt nội dung tương tác sai.

Khoảng cách có thể được tạo bằng các thuộc tính CSS như

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

• Bàn tay và sự run rẩy khổng lồ

Xem thêm

• <a href="//example.com">Scheme-relative URLa>
  <a href="/en-US/docs/Web/HTML">Origin-relative URLa>
  <a href="./p">Directory-relative URLa>
  

  6 tương tự như

  a {
    display: block;
    margin-bottom: 0.5em;
  }
  

  2, nhưng đối với các siêu liên kết siêu dữ liệu là vô hình đối với người dùng.

• <a href="//example.com">Scheme-relative URLa>
  <a href="/en-US/docs/Web/HTML">Origin-relative URLa>
  <a href="./p">Directory-relative URLa>
  

  37 là một lớp giả CSS sẽ khớp với các phần tử

  a {
    display: block;
    margin-bottom: 0.5em;
  }
  

  2 với các thuộc tính

  a {
    display: block;
    margin-bottom: 0.5em;
  }
  

  3 hợp lệ.