Cách thích hợp để hiển thị biểu trưng bằng CSS là gì?

Question

Tôi đã học CSS gần đây và chuỗi hướng dẫn tôi đang xem nói cách tốt nhất để hiển thị hình ảnh biểu tượng là bao bọc văn bản trong thẻ H1, sau đó đặt kiểu CSS cho thẻ đó thành hình nền, với một văn bản thụt lề -99999 hoặc số lượng lớn tương tự.

Điều này có vẻ vô cùng đáng sợ và không phù hợp. Nó cũng có vẻ như sử dụng CSS để ẩn văn bản sẽ là một không lớn không cho mục đích SEO (như ẩn văn bản thông qua CSS được cau mày).

Tôi cũng đọc rằng việc sử dụng img nên tránh, vì bản thân biểu trưng không thực sự là nội dung, vì vậy phải được chuyển xuống phía bên thiết kế của mã hóa (ví dụ: CSS).

Đồng thuận hiện tại về điều này là gì?

Answer 1

Cách chính xác để hiển thị Biểu trưng có phần tử <img>. Nếu bạn chưa nghiên cứu logos and logotype, bạn có thể không nhận ra rằng biểu tượng có ngữ nghĩa riêng và phải được trình bày theo cách rất cụ thể. Nó cũng có thể có một giải thích cần thiết, đó là những gì nên được sử dụng trong các thuộc tính [alt].

Nếu điều đó giải thích yêu cầu là hợp pháp một tiêu đề trong trang, nó sẽ là ngữ nghĩa chính xác để thêm vào một yếu tố <h#>:

<h1> 
    <img src="logo.png" alt="Foo Co.: Where everyone can fizz the buzz" /> 
</h1> 

Điển hình logo được sử dụng như một liên kết, do đó, nó phổ biến để xem :

<a href="/"> 
    <img src="logo.png"... /> 
</a> 

Ngoài ra logo có thể được nhấn mạnh (có thể là một trong hai hoặc tùy thuộc vào mức độ):

<strong> 
    <a href="/"> 
     <img src="logo.png" ... /> 
    </a> 
</strong> 

---

Để hiểu ngữ nghĩa của biểu trưng. Nếu bạn đang tham khảo công ty Coca-cola, biểu trưng cho thương hiệu sẽ không và không nên thay đổi nếu bạn đổi chỗ hoặc xóa biểu định kiểu.Hầu hết mọi người hiểu rằng ngữ nghĩa,

là khác nhau từ

Answer 2

tôi luôn luôn chỉ quấn một thẻ neo xung quanh một hình ảnh:

<a href=""><img src=""></a> 

hoặc tạo thẻ neo như một khối và thiết lập một hình nền

<a class="logo" href="">Logo</a> 

.logo { background: url("/path") no-repeat; width: 100px; height: 100px; display: block; text-indent: -9999px;} 

Answer 3

Tôi nghĩ nó không thực sự vấn đề. Có nhiều cách khác nhau để thực hiện việc này và tất cả đều được hỗ trợ. Họ đều làm việc. Hầu hết trong số họ là công cụ tìm kiếm thân thiện và hoàn toàn có thể truy cập.

tôi sẽ làm một cái gì đó như thế này: động cơ

<h1><a href="/"><img src="rsc/logo.jpg" alt="Frobozz Company"></a></h1> 

tìm kiếm, trình duyệt chế độ văn bản và trình đọc màn hình thấy alt văn bản, tất cả mọi người khác nhìn thấy hình ảnh logo.

Answer 4

Bạn nên luôn luôn sử dụng img để hiển thị logo. Sử dụng h1 và sử dụng biểu tượng làm nền là một thực tế không tốt và nên tránh. Logo của bạn là nội dung chứ không phải là h1.

Harry Roberts đã giải thích rõ ràng trong bài đăng của mình - Your logo is an image, not a <h1>