Предпочтительный метод отображения логотипа

Question

При отображении логотипа компании я увидел что-то новое сегодня.

Они устанавливают высоту, ширину и переполнение: скрыты в теге h1 и устанавливают отрицательное поле для тега внутри тега h1, чтобы текст не отображался.

Код выглядел так

<h1 class='logo'><a href='/'>Company Name</a></h1>

CSS выглядит так:

.logo {
  text-indent: -9999em;
  overflow: hidden;
  text-align: left;
  background-image: url(/images/logo.png);
  background-repeat: no-repeat;
  background-position: 0% 0%;
  width: 253px;
  height: 80px;
  float: left;
  margin-left: 10px;
}
.logo a {
  display: block;
  width: 253px;
  height: 80px;
}

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

Мой код выглядит так:

<h1 class='logo'><a href='/'><span>Company Name</span></a></h1>

Мой CSS выглядит так:

.logo {
  background: url(/images/logo.png) top left no-repeat;
  margin-left: 10px;
  a {
    display: block;
    width: 253px;
    height: 80px;
    span {
      display:none;
    }
  }
}

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

Изменить для ясности: я не прошу другого способа отображения логотипа компании. Использование h1 с названием компании является общепринятой практикой для этого. Наверное, я хотел спросить, каким образом вы предпочитаете отображать логотип компании, используя h1 и css? почему?

Answer 1

Установка display: none скрывает содержимое от программ чтения с экрана и, таким образом, является очень плохим подходом.

Использование трюка с отступом текста не будет, но все еще неоптимально

Изображение является содержимым и должно быть элементом <img>.

Answer 2

Я использую код логотипа ..

.logo

{
  width: 253px;
  height: 80px;
  float: left;
  overflow: hidden;
  margin:0px;
  padding:0px;

}

.logo a
   {
   display:block;
   cursor:pointer;
   border:0px;
   font-size:1px;
   text-indent:-500px;
   text-decoraton:none;
   }

<h1 class="logo"><a href="#">company name</a>

БЛАГОДАРЯ Ptiwari ..

Answer 3

Вы дали мне идею ...

<style type="text/css">

#logo {
    margin: 0;
}

#logo,
#logo a,
#logo:before {
    display: block;
    width: 275px;
    height: 95px;
    position: relative;
}

#logo a {
    position: absolute;
    top: 0;
    left: 0;
    line-height: -1px;
    font-size: 0;
    text-decoration: none;
    overflow: hidden;
}

#logo:before {
    content: "\0020";
    background-image: url('http://www.google.com/intl/en_ALL/images/srpr/logo1w.png');
    position: absolute;
}

</style>
<h3 id="logo"><a href="http://www.google.com">Google</a></h3>

Это, вероятно, не работает в IE7, и Safari отображает текст в теге A как небольшое пятно в верхнем левом углу. Могу поспорить, что это может быть немного хитрее, чтобы устранить это, хотя. Возможно, я смогу использовать эту технику в будущем.

Answer 4

В любом случае вы пытаетесь обмануть Google и можете быть оштрафованы.

Чтобы ответить на ваш вопрос, введите: none означает, что текст на самом деле не просматривался на странице.Отступ текста означает, что он все еще там, пауки все равно будут читать текст, и поэтому он может работать.

Опять же, я считаю это обманом поисковых систем и предлагаю против него.Используйте тэг Alt или найдите место, чтобы поместить h1 с фоновым изображением.