Liên kết với một hình ảnh: Nền so với <img>

Điều gì được coi là thực tiễn tốt nhất (về mặt ngữ nghĩa) khi sử dụng văn bản có hình ảnh để liên kết đến một trang hoặc danh mục nội bộ?

lựa chọn 1

<nav>
    <a href="/kittens">
        <img src="kittens.png" />
        <span>Kittens</span>
    </a>
    <a href="/puppies">
        <img src="puppies.png" />
        <span>Puppies</span>
    </a>
</nav>

Lựa chọn 2

<nav>
    <a href="/kittens" class="kittens">Kittens</a>
    <a href="/puppies" class="puppies"><span>Puppies</a>
</nav>

trong đó CSS ​​được định nghĩa:

a.kittens {
    background-image:url("kittens.png");
    width:40px;
    height:60px;
}

a.puppies {
    background-image:url("puppies.png");
    width:40px;
    height:60px;
}

Tôi nên sử dụng một nền theo kiểu cho liên kết, hoặc <img>bên trong phần tử neo?

Nếu bạn có văn bản trong liên kết và hình ảnh chỉ hỗ trợ liên kết, tùy chọn hai về mặt ngữ nghĩa sẽ tốt hơn.

Nếu bạn không có văn bản, tùy chọn một - với altthuộc tính phù hợp trên hình ảnh - sẽ tốt hơn về mặt ngữ nghĩa.

*biên tập*

Để cải thiện khả năng truy cập (tương tự, nhưng khác với đánh dấu ngữ nghĩa), bạn cũng muốn bao gồm titlecác thuộc tính trên các <a>thành phần neo trong cả hai tùy chọn.

Tôi hầu như luôn sử dụng cách tiếp cận "Tùy chọn 2" trong các loại kịch bản này, trong nỗ lực giữ cho phần trình bày và nội dung của tôi tách biệt.

Đó là một thực hành tốt để giữ bất kỳ rườm rà hoặc các khía cạnh trang trí của trang web của bạn trong CSS nếu có thể. HTML nên được sử dụng để đánh dấu nội dung và không phải để thêm các góc tròn hoặc các khía cạnh trực quan khác của trang web của bạn. Nếu hình ảnh mèo con và cún con của bạn chỉ tăng thêm tính thẩm mỹ cho trang của bạn, thì việc giữ hình ảnh trong CSS là cách tốt nhất .

Tuy nhiên, có ít nhất một kịch bản mà tôi không tin đây là trường hợp; phòng trưng bày hình ảnh. Một bộ sưu tập hình ảnh sẽ là một cách sử dụng tuyệt vời của "Tùy chọn 1", vì trong trường hợp đó, hình thu nhỏ của hình ảnh là nội dung.