настроить img в шапке моего сайта

Question

Я создаю веб-сайт и использую HTML5.Я вставил бы в свой заголовок изображение, которое является логотипом моей компании.С точки зрения эффективности и корректности, лучше установить соответствие css как background-image: url("logo.gif") в моем стиле css или включить в html-файл

<header>
   <img src="logo.gif" alt="logo" />
</header>

Answer 1

Лучше всего включать изображение как тег img, а не background-image.

Это означает, что если клиент отключил CSS в своем браузере или не поддерживает CSS, он все равно сможет увидеть логотип в верхней части страницы.

---

Это также означает, что вы можете сделать логотип ссылкой на домашнюю страницу, которая в наши дни стала обычным пунктом для юзабилити сайтов:

<header>
   <a href="/index.html"><img src="logo.gif" alt="logo" /></a>
</header>

Для получения дополнительной информации о такой ситуации см. Этот популярный пост StackOverflow:

Когда использовать IMG против CSS background-image?

Answer 2

это зависит.

Если ваш логотип должен быть кликабельным, включите его в HMTL. (Usebility)

Если он присутствует только в дизайнерских целях, используйте CSS.

Как правило, лучше определить все, что связано с внешним видом Веб-сайта в CSS.

HTML:

<header>
     <div id="company_logo"></div>
</header>

CSS:

#company_logo{
width:50px;
height:50px;
background-image:url();
}

Answer 3

Фоновые изображения не могут быть напечатаны, если целью вашего сайта является печать, тогда ваш логотип не будет отображаться.

Помните, что логотип - это контент, а фон - это стиль.Использование фона в качестве логотипа не является семантическим.

Answer 4

Если вам не нужно какое-либо содержимое над вашим логотипом, я бы выбрал тег <img> (он также удобен для чтения с экрана, если у вас есть текст "alt").