Span bên trong neo hoặc neo bên trong nhịp hay không quan trọng?


109

Tôi muốn lồng spanathẻ. Tôi có nên

  1. Đặt <span>bên trong<a>
  2. Đặt <a>bên trong<span>
  3. Nó không quan trọng?

Câu trả lời:


110

3 - Không thành vấn đề.

NHƯNG, tôi có xu hướng chỉ sử dụng <span>bên trong một <a>nếu nó chỉ cho một phần nội dung của thẻ, tức là

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

Thay vì:

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

Mà rõ ràng chỉ nên là:

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

1
Gần đây, tôi đã gặp phải sự cố khoảng trắng với text-tràn: dấu chấm lửng và tràn: ẩn, có thể được giải quyết bằng cách thêm phần tử khối nội tuyến vào nút điều hướng của tôi. Tôi đã kết thúc với <a> <span> Văn bản </span> </a>. Vì vậy, tôi nghĩ (hoặc hy vọng;)) bạn có thể làm điều này khi bạn thực sự cần.
CunningFatalist,

Tôi sẽ chọn phương án 2 vì nó quan trọng. Anchor nên chỉ để neo và không phải để chứa các phần tử (phương pháp hay nhất). Hãy tưởng tượng một tình huống, trong đó bạn tạo một ô có thể nhấp và neo là thành phần chính của thành phần ô và bên trong thành phần là các liên kết cho hình ảnh và nhiều hình ảnh khác. Trình thu thập thông tin của Google sẽ trở nên điên rồ và cuối cùng, điều đó không tốt cho trang web của bạn.
Imam Bux

33

Việc lồng một <span>bên trong một <a>hoặc một <a>bên trong a là hoàn toàn hợp lệ (ít nhất là theo tiêu chuẩn HTML 4.01 và XHTML 1.0) <span>.

Chỉ để chứng minh điều đó cho chính mình, bạn luôn có thể kiểm tra Dịch vụ xác thực W3C MarkUp

Tôi đã thử xác thực:

<!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>

Và cũng tương tự như trên, nhưng với <a>bên trong<span>

I E

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

với cả hai loại tài liệu HTML 4.01 và XHTML 1.0 và cả hai đều đã vượt qua xác thực thành công!

Điều duy nhất cần lưu ý là đảm bảo rằng bạn đóng các thẻ theo đúng thứ tự. Vì vậy, nếu bạn bắt đầu bằng <span>sau đó là an <a>, hãy đảm bảo rằng bạn đóng <a>thẻ trước khi đóng <span>và ngược lại.


20

Không quan trọng - cả hai đều được phép ở bên trong nhau.


Nhưng <a> là mức khối và <span> là phần tử mức nội tuyến và phần tử mức khối không thể nằm bên trong phần tử nội tuyến. Tôi nghĩ đó là trong xác nhận w3c
Jitendra Vyas

26
Không, cả hai đều nội tuyến
Greg

16

điều đó phụ thuộc vào những gì bạn muốn đánh dấu.

  • nếu bạn muốn một liên kết bên trong một nhịp, hãy đặt <a>bên trong <span>.
  • nếu bạn muốn đánh dấu một cái gì đó trong một liên kết, hãy đưa <span>vào<a>

16

SPAN là một thùng chứa nội tuyến GENERIC . Không quan trọng alà bên trong spanhay spanbên trong avì cả hai đều là phần tử nội tuyến. Hãy thoải mái làm bất cứ điều gì có vẻ đúng về mặt logic đối với bạn.


2

Nó phụ thuộc vào nhịp dành cho mục đích gì. Nếu nó đề cập đến văn bản của liên kết chứ không phải thực tế là nó là một liên kết, hãy chọn # 1. Nếu nhịp đề cập đến liên kết nói chung, thì hãy chọn # 2. Trừ khi bạn giải thích nhịp đại diện cho điều gì, không có nhiều câu trả lời hơn thế. Chúng đều là phần tử nội tuyến, có thể được lồng ghép theo cú pháp theo bất kỳ thứ tự nào.


Đúng, cả hai đều là phần tử nội tuyến.
Chris

2

Có thể có vấn đề nếu chẳng hạn bạn đang sử dụng một số phông chữ biểu tượng sắp xếp. Tôi vừa có cái này với:

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

Thông thường tôi sẽ đặt khoảng bên trong chữ A nhưng kiểu dáng không có hiệu lực cho đến khi đổi nó vòng.


1

Cá nhân, với tư cách là một nhà phát triển web, tôi chỉ đặt khoảng trắng trong thẻ liên kết nếu tôi đang cố gắng làm nổi bật một phần của văn bản liên kết, chẳng hạn như áp dụng nền cho một phần.


0

Nó sẽ hoạt động cả hai, nhưng cá nhân tôi thích tùy chọn 2 hơn để khoảng cách là "xung quanh" liên kết.


0

Về mặt ngữ nghĩa, tôi nghĩ có ý nghĩa hơn khi nó là một vùng chứa cho một phần tử đơn lẻ và nếu bạn cần lồng chúng thì điều đó gợi ý rằng nhiều hơn phần tử sẽ nằm bên trong phần tử bên ngoài.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.