Rentang di dalam jangkar atau jangkar di dalam rentang atau tidak masalah?

109

Saya ingin bersarang spandan amenandai. Haruskah saya

  1. Taruh <span>di dalam<a>
  2. Taruh <a>di dalam<span>
  3. Tidak masalah?
html css semantic-markup Salman A
sumber

Jawaban:

110

3 - Tidak masalah.

TAPI, saya cenderung hanya menggunakan bagian <span>dalam <a>jika itu hanya untuk sebagian dari isi tag yaitu

<a href="#">some <span class="red">text</span></a>

Daripada:

<a href="#"><span class="red">some text</span></a>

Yang jelas seharusnya:

<a href="#" class="red">some text</a>
Jon Hadley
sumber
1
Saya baru-baru ini menemukan masalah ruang putih dengan text-overflow: elipsis dan overflow: hidden, yang dapat diselesaikan dengan menambahkan elemen blok-sebaris ke tombol navigasi saya. Saya mendapatkan <a> <span> Teks </span> </a>. Jadi saya pikir (atau berharap;)) tidak apa-apa melakukan ini ketika Anda benar-benar membutuhkannya.
CunningFatalist
Saya akan memilih opsi 2 karena itu penting. Penanda harus hanya untuk penahan dan bukan untuk memuat elemen (praktik terbaik). Bayangkan sebuah situasi, di mana Anda membuat petak dan jangkar yang dapat diklik adalah elemen induk dari komponen petak dan di dalam komponen tersebut terdapat tautan untuk gambar, dan lebih banyak gambar. Perayap Google akan menjadi gila dan pada akhirnya, itu tidak baik untuk situs Anda.
Imam Bux
33

Ini benar-benar valid (setidaknya menurut standar HTML 4.01 dan XHTML 1.0) untuk bersarang baik <span>di dalam <a>atau <a>di dalam a <span>.

Hanya untuk membuktikannya kepada diri Anda sendiri, Anda selalu dapat memeriksanya di Layanan Validasi Markup W3C

Saya mencoba memvalidasi:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
    <head>
      <title>Title</title>
    </head>
    <body>
       <p>
         <a href="http://www.google.com/"><span>Google</span></a>
       </p>
    </body>
  </html>

Dan juga sama seperti di atas, tetapi dengan bagian <a>dalam<span>

yaitu

<span><a href="http://www.google.com">Google</a></span>

dengan kedua doctypes HTML 4.01 dan XHTML 1.0, dan keduanya berhasil lolos validasi!

Satu-satunya hal yang perlu diperhatikan adalah memastikan bahwa Anda menutup tag dengan urutan yang benar. Jadi jika Anda memulai dengan <span>kemudian an <a>, pastikan Anda menutup <a>tag terlebih dahulu sebelum menutup <span>dan sebaliknya.

CraigTP
sumber
20

Tidak masalah - keduanya diperbolehkan masuk satu sama lain.

Greg
sumber
Tapi <a> adalah level blok dan <span> adalah elemen level inline dan elemen level Block tidak bisa masuk ke dalam elemen inline. Saya pikir itu dalam validasi w3c
Jitendra Vyas
26
Tidak, keduanya sebaris
Greg
16

itu tergantung pada apa yang ingin Anda markup.

  • jika Anda ingin link di dalam span, masukkan ke <a>dalamnya <span>.
  • jika Anda ingin menandai sesuatu di tautan, masukkan <span>ke<a>
rajutan
sumber
16

SPAN adalah wadah sebaris GENERIC . Tidak masalah apakah an aada di dalam spanatau spandi dalam akarena keduanya adalah elemen sebaris. Jangan ragu untuk melakukan apa pun yang menurut Anda logis.

Salman A
sumber
2

Itu tergantung pada untuk apa rentang itu. Jika ini mengacu pada teks tautan, dan bukan fakta bahwa itu adalah tautan, pilih # 1. Jika rentang merujuk ke tautan secara keseluruhan, pilih # 2. Kecuali Anda menjelaskan apa yang diwakili oleh rentang tersebut, tidak ada jawaban yang lebih dari itu. Keduanya adalah elemen sebaris, dapat disarangkan secara sintaks dalam urutan apa pun.

sykora
sumber
Benar, keduanya adalah elemen sebaris.
Chris
2

Ini bisa menjadi masalah jika misalnya Anda menggunakan semacam font ikon. Saya baru saja melakukan ini dengan:

<span class="fa fa-print fa-3x"><a href="some_link"></a></span>

Biasanya saya akan meletakkan span di dalam A tetapi styling tidak berpengaruh sampai menukarnya.

pengguna1368737
sumber
1

Secara pribadi, sebagai pengembang web, saya hanya pernah menempatkan rentang dalam tag jangkar jika saya mencoba menyorot bagian teks tautan, seperti menerapkan latar belakang ke satu bagian.

Xopa
sumber
0

Ini akan berfungsi baik, tetapi secara pribadi saya lebih suka opsi 2 sehingga rentangnya adalah "di sekitar" tautan.

Oldskool
sumber
0

Secara semantik saya pikir lebih masuk akal karena merupakan wadah untuk satu elemen dan jika Anda perlu menumpuknya maka itu menunjukkan lebih dari elemen akan berada di dalam elemen luar.

Toby
sumber