Bagaimana Anda menargetkan halaman html?

Atribut elemen ini termasuk atribut global

Menyebabkan browser memperlakukan URL tertaut sebagai unduhan. Dapat digunakan dengan atau tanpa nilai

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

• Tanpa nilai, browser akan menyarankan nama file/ekstensi, yang dihasilkan dari berbagai sumber
  • Tajuk HTTP

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

    3
  • Segmen terakhir di jalur URL
  • Jenis media (dari

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

    _4 header, awal

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

    5 URL, atau

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

    6 untuk

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

    7 URL)

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

  _2. mendefinisikan nilai menyarankannya sebagai nama file.

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

  _9 dan

  <!-- <a> element links to the section below -->
  <p><a href="#Section_further_down"> Jump to the heading below </a></p>
  
  <!-- Heading to link to -->
  <h2 id="Section_further_down">Section further down</h2>
  

  0 karakter diubah menjadi garis bawah (

  <!-- <a> element links to the section below -->
  <p><a href="#Section_further_down"> Jump to the heading below </a></p>
  
  <!-- Heading to link to -->
  <h2 id="Section_further_down">Section further down</h2>
  

  1). Sistem file mungkin melarang karakter lain dalam nama file, jadi browser akan menyesuaikan nama yang disarankan jika perlu

Catatan

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

  1 hanya berfungsi untuk URL asal yang sama, atau skema

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

  7 dan

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

  5
• Cara browser menangani unduhan berbeda-beda menurut browser, pengaturan pengguna, dan faktor lainnya. Pengguna mungkin diminta sebelum pengunduhan dimulai, atau file dapat disimpan secara otomatis, atau dapat dibuka secara otomatis, baik di aplikasi eksternal atau di browser itu sendiri
• Jika header

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

  _3 memiliki informasi yang berbeda dari atribut

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

  1, perilaku yang dihasilkan mungkin berbeda
  • Jika header menentukan

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

    _2, header tersebut diprioritaskan daripada nama file yang ditentukan dalam atribut

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

    1
  • Jika tajuk menentukan disposisi

    <!-- <a> element links to the section below -->
    <p><a href="#Section_further_down"> Jump to the heading below </a></p>
    
    <!-- Heading to link to -->
    <h2 id="Section_further_down">Section further down</h2>
    

    9, Chrome dan Firefox memprioritaskan atribut tersebut dan memperlakukannya sebagai unduhan. Firefox versi lama (sebelum 82) memprioritaskan tajuk dan akan menampilkan konten sebaris

URL yang ditunjuk hyperlink. Tautan tidak terbatas pada URL berbasis HTTP — tautan dapat menggunakan skema URL apa pun yang didukung oleh browser

• Bagian halaman dengan fragmen dokumen
• Bagian teks tertentu dengan fragmen teks
• Potongan file media dengan fragmen media
• Nomor telepon dengan

  <a href="mailto:[email protected]">Send email to nowhere</a>
  

  1 URL
• Alamat email dengan

  <a href="mailto:[email protected]">Send email to nowhere</a>
  

  2 URL
• Meskipun browser web mungkin tidak mendukung skema URL lain, situs web dapat dengan

  <a href="mailto:[email protected]">Send email to nowhere</a>
  

  3

Petunjuk tentang bahasa manusia dari URL yang ditautkan. Tidak ada fungsi bawaan. Nilai yang diizinkan sama dengan atribut

<a href="mailto:[email protected]">Send email to nowhere</a>

Daftar URL yang dipisahkan spasi. Saat tautan diikuti, browser akan mengirimkan

<a href="mailto:[email protected]">Send email to nowhere</a>

<a href="mailto:[email protected]">Send email to nowhere</a>

Berapa banyak perujuk yang akan dikirim saat mengikuti tautan

• <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  _0. Header

  <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  1 tidak akan dikirim

• <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  _2. Header

  <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  _1 tidak akan dikirim ke asal tanpa TLS (HTTPS)

• <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  _4. Perujuk yang dikirim akan dibatasi pada asal halaman rujukan. skema, host, dan portnya

• <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  _5. Perujuk yang dikirim ke asal lain akan dibatasi pada skema, host, dan port. Navigasi pada asal yang sama akan tetap menyertakan jalur

• <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  _6. Perujuk akan dikirim untuk asal yang sama, tetapi permintaan lintas asal tidak akan berisi informasi perujuk

• <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  _7. Hanya kirim asal dokumen sebagai perujuk ketika tingkat keamanan protokol tetap sama (HTTPS→HTTPS), tetapi jangan kirimkan ke tujuan yang kurang aman (HTTPS→HTTP)

• <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  _8 (standar). Kirim URL lengkap saat melakukan permintaan asal yang sama, hanya kirim asal saat tingkat keamanan protokol tetap sama (HTTPS→HTTPS), dan jangan kirimkan header ke tujuan yang kurang aman (HTTPS→HTTP)

• <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  _9. Perujuk akan menyertakan asal dan jalur (tetapi bukan fragmen, kata sandi, atau nama pengguna). Nilai ini tidak aman, karena membocorkan asal dan jalur dari sumber daya yang dilindungi TLS ke asal yang tidak aman

Hubungan URL tertaut sebagai tipe tautan yang dipisahkan spasi

Tempat menampilkan URL tertaut, sebagai nama untuk konteks penelusuran (tab, jendela, atau

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my painting</a>
</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 painting</a>
  </p>
  
  <canvas width="300" height="300"></canvas>
  

  3. konteks penelusuran saat ini. (Bawaan)

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

  4. biasanya tab baru, tetapi pengguna dapat mengonfigurasi browser untuk membuka jendela baru

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

  5. konteks penjelajahan induk dari yang sekarang. Jika tidak ada orang tua, berperilaku seperti

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

  3

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

  7. konteks penelusuran teratas (konteks "tertinggi" yang merupakan leluhur dari konteks saat ini). Jika tidak ada leluhur, berperilaku seperti

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

  3

Catatan. Menyetel

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

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

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

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my painting</a>
</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;
}

Petunjuk tentang format URL linkedin dengan tipe MIME. Tidak ada fungsi bawaan

Tidak digunakan lagi

Diisyaratkan pada pengkodean karakter dari URL yang ditautkan

Catatan. Atribut ini sudah usang dan tidak boleh digunakan oleh penulis. Gunakan header HTTP

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

Digunakan dengan. Daftar koordinat yang dipisahkan koma

Diperlukan untuk menentukan kemungkinan lokasi target di halaman. Dalam HTML4. 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())
  );

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

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

Catatan. Gunakan atribut global sebagai gantinya

Ditentukan tautan balik; . Tidak digunakan lagi karena sangat membingungkan

Bentuk wilayah hyperlink di peta gambar

Catatan. Gunakan elemen

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())
  );

HTML

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

Hasil

HTML

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

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

Hasil

<!-- <a> element links to the section below -->
<p><a href="#Section_further_down"> Jump to the heading below </a></p>

<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>

Catatan. Anda dapat menggunakan

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())
  );

Untuk membuat tautan yang terbuka di program email pengguna agar mereka dapat mengirim pesan baru, gunakan skema

<a href="mailto:[email protected]">Send email to nowhere</a>

<a href="mailto:[email protected]">Send email to nowhere</a>

Untuk detail tentang

<a href="mailto:[email protected]">Send email to nowhere</a>

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

<a href="mailto:[email protected]">Send email to nowhere</a>

• Perangkat seluler otomatis memanggil nomor tersebut
• Sebagian besar sistem operasi memiliki program yang dapat melakukan panggilan, seperti Skype atau FaceTime
• Situs web dapat melakukan panggilan telepon dengan

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

  3, seperti

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

  4
• Perilaku lain termasuk menyimpan nomor ke kontak, atau mengirim nomor ke perangkat lain

Lihat RFC 3966 untuk sintaks, fitur tambahan, dan detail lainnya tentang skema URL

<a href="mailto:[email protected]">Send email to nowhere</a>

Untuk menyimpan konten elemen

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

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

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

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

Contoh aplikasi melukis dengan tautan simpan

HTML

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

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

CSS

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

JavaScript

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())
  );

Hasil

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

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

Menggunakan

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

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

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

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;
}

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my painting</a>
</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;
}

Konten di dalam tautan harus menunjukkan ke mana tautan itu pergi, bahkan di luar konteks

Tidak dapat diakses, teks tautan lemah

Kesalahan umum yang menyedihkan adalah hanya menautkan kata "klik di sini" atau "di sini"

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

Teks tautan yang kuat

Untungnya, ini adalah perbaikan yang mudah, dan sebenarnya lebih pendek dari versi yang tidak dapat diakses

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

Perangkat lunak bantu memiliki pintasan untuk mencantumkan semua tautan di halaman. Namun, teks tautan yang kuat menguntungkan semua pengguna — pintasan "daftarkan semua tautan" mengemulasi cara pengguna yang dapat melihat memindai halaman dengan cepat

Elemen jangkar sering disalahgunakan sebagai tombol palsu dengan menyetel

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

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

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

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

Nilai

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

Gunakan

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

Tautan yang terbuka di tab/jendela baru melalui

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

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

Orang yang mengalami kondisi penglihatan rendah, bernavigasi dengan bantuan teknologi pembacaan layar, atau dengan masalah kognitif mungkin bingung saat tab, jendela, atau aplikasi baru terbuka secara tidak terduga. Perangkat lunak pembaca layar yang lebih lama bahkan mungkin tidak mengumumkan perilaku tersebut

Tautan yang membuka tab/jendela baru

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

Tautkan ke sumber daya non-HTML

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

Jika sebuah ikon digunakan untuk menandakan perilaku tautan, pastikan ikon tersebut memilikinya

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

• WebAIM. Tautan dan Hiperteks - Tautan Hiperteks
• G200. Membuka jendela dan tab baru dari tautan hanya jika diperlukan
• G201. Memberikan peringatan lanjutan kepada pengguna saat membuka jendela baru

Tautan lewati adalah tautan yang ditempatkan sedini mungkin di

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

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

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

Tautan lewati memungkinkan pengguna keyboard melewati konten yang berulang di beberapa halaman, seperti navigasi tajuk

Tautan lewati sangat berguna bagi orang yang bernavigasi dengan bantuan teknologi bantuan seperti kontrol pengalih, perintah suara, atau tongkat mulut/tongkat kepala, di mana tindakan berpindah melalui tautan berulang bisa melelahkan

• WebAIM. Tautan "Lewati Navigasi".
• Bagaimana caranya. Gunakan tautan Lewati Navigasi
• Memahami Kriteria Sukses 2. 4. 1

Ukuran

Elemen interaktif, seperti tautan, ditempatkan dalam kedekatan visual harus memiliki ruang yang memisahkannya. Penspasian membantu orang dengan masalah kontrol motorik, yang mungkin secara tidak sengaja mengaktifkan konten interaktif yang salah

Bagaimana cara menargetkan halaman baru dalam HTML?

Bagaimana cara menargetkan halaman teratas dalam HTML?

Apa itu tautan target dalam HTML?

Apakah Target adalah tag dalam HTML?