Каков правильный способ отображения логотипа с помощью CSS?

Недавно я изучал CSS, и в учебной серии, которую я смотрю, лучший способ отобразить изображение логотипа - это обернуть текст тегом H1, а затем установить стиль CSS для этого тега на фоновое изображение, с текстовым отступом -99999 или аналогичным большим числом.

Это кажется невероятно хакерским и неэлегантным. Похоже, что использование CSS для скрытия текста было бы большим, но не для SEO-целей (поскольку скрытый текст через CSS нахмурился).

Я также прочитал, что следует избегать использования img, так как сам логотип не очень доволен, поэтому его следует отнести к дизайну кода (т.е. CSS).

Каков нынешний консенсус по этому поводу?

ОТВЕТЫ

Ответ 1

Правильный способ отображения логотипа - элемент <img>. Если вы не изучали логотипы и логотип, вы можете не осознавать, что логотип имеет свою семантику и должен быть представлен очень специфическим образом. Он также может иметь требуемую интерпретацию, которую следует использовать в атрибуте [alt].

Если это обязательное толкование является законным заголовком на странице, было бы семантически правильно добавить его в элемент <h#>:

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

Обычно логотип используется в качестве ссылки, поэтому обычно можно увидеть:

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

Кроме того, логотип может быть выделен (может быть <strong> или <em> в зависимости от степени):

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

Чтобы понять семантику логотипа. Если вы ссылаетесь на компанию Coca-Cola, логотип бренда не изменится и не изменится, если вы поменялись местами или удалили таблицу стилей. Большинство людей понимают это семантически,

the Coca-Cola logo

отличается от

the Pepsi logo

Ответ 2

Я всегда просто обертываю якорный тег вокруг изображения:

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

или создать якорный тэг в качестве блока и установить фоновое изображение

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

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

Ответ 3

Вы всегда должны использовать img для отображения логотипа. Использование h1 и использование логотипа в качестве фона - действительно плохая практика, и его следует избегать. Ваш логотип - это контент, а не h1.

Гарри Робертс четко объяснил это в своем посте - Ваш логотип - это изображение, а не <h1>

Ответ 4

Я думаю, что это не имеет значения.. Есть много разных способов сделать это, и все они поддерживаются. Все они работают. Большинство из них являются поисковой системой и прекрасно доступны.

Я бы сделал что-то вроде этого:

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

Поисковые системы, браузеры с текстовым режимом и программы чтения с экрана видят текст в формате alt, все остальные видят изображение логотипа.