Как правильно использовать H1

[Justnewone]

Думаю, что IMG малость прикольней, хотя бы потому, что она уйдет на печать, бекграунд по дефольту - нет. К тому же, если вдруг чел настолько странен, что у него картинки отключены - то он хотя бы альт увидит. Да и вообще, пустая ссылка или с   смотрится жалко.

[Zippovich]

Не вижу плюсов в использовании логотипа как бэкграунда. Когда логотип используется картинкой плюсов вижу несколько:

- печать;

- удобство пользователям (правая кнопка -> скачать картинку).

H1 не надо использовать в логотипе (исключения могут быть, если нужно поднять себя в выдаче в поисковике по слову в логотипе, но опять же надо помнить h1 должен быть один на странице и нужно думать головой, прежде чем такое делать).

Так же не рекомендуется использовать технологии скрывающие текст в логотипе, т.е. логотип картинкой, а текст скрыт, почти все такие технологии уже хавает гугл и можно получить бан. Сюда относятся:

1. Написание белого по белому

2. position: relative; top: -10000px;

3. display: hidden - display: none

и пр.

Чем я хочу резюмировать: делайте сайты для людей, а не для поисковиков, и все у Вас будет с ранжированием в порядке.

<a href="#" title="Компания Рога и копыта"><img src="#" alt="Компания Рога и копыта" /></a> - вот мой вариант, для a.logo можно задать display: block или display: inline-block , если это необходимо, поэтому использовать еще один слой считаю лишним (исключения могут быть)

[Fenix]

Это по твоему усмотрению. Лично мне нравится добовлять в h2 и лого делать не картинкой и фоном. А иногда можно и прсото картинкой.

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

А если текстовая часть будет в H1, то это нормально для Поисковиков?

Поиковики очень любят h1.

[Justnewone]

Подумал и понял что "сгоряча написал" )))

Edited August 5, 2009 by Justnewone

[s0rr0w]

Не вижу плюсов в использовании логотипа как бэкграунда. Когда логотип используется картинкой плюсов вижу несколько:

- печать;

@media print {} отменили уже? Для печати лучше всего использовать специально подготовленные под печать логотипы.

- удобство пользователям (правая кнопка -> скачать картинку).

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

а фон нельзя сделать гиперссылкой.

А гиперссылка с фоном не катит?

[Justnewone]

@media print {} - на медиа принт что происходит, картинка дисплей:инлайн? Как же тогда пустое A? или картинка, подготовленная для печати где-то мимо скрытая все время лежит? Я думаю что это неизящный подход. Целая куча всего, причем как уже сказал, с пустой ссылкой (брррр). В общем, подключаем JQuery чтобы алерт один раз на странице вывести.

[rash]

@media print {} отменили уже? Для печати лучше всего использовать специально подготовленные под печать логотипы.

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

А гиперссылка с фоном не катит?

Дело, даже, скорее не в этих моментах, а в том, что логотип (бренд) - это часть содержимого, а не оформления. Простой "тест" - логотипу есть, что задать в качестве альтернативного текста, а изображениям в оформлении - нечего.

[s0rr0w]

Я думаю что это неизящный подход. Целая куча всего, причем как уже сказал, с пустой ссылкой (брррр). В общем, подключаем JQuery чтобы алерт один раз на странице вывести.

Чем неизящный? Аргументы в студию!

Дело, даже, скорее не в этих моментах, а в том, что логотип (бренд) - это часть содержимого, а не оформления. Простой "тест" - логотипу есть, что задать в качестве альтернативного текста, а изображениям в оформлении - нечего.

Сомнительно, очень сомнительно, что это часть содержимого. Простой пример, напиши заявление о приеме на работу. И напиши аналогичное заявление, только добавь туда свой логотип. Изменится ли суть данного документа при добавлении логотипа? Нисколечки. Изменится ли оформление? Да.

[Justnewone]

Чем неизящный? Аргументы в студию!

Ну, для начала, первая часть фразы почему-то опущена, возможно ответ на нее добавил бы мне аргументов.

А во вторых, вроде я сразу аргументировано говорил, нежели просто <strong><a><img/></a></strong> и стиля, полной статики на все случаи жизни с печатями и прочим(если не надо на главной - не ссылка - от стронга можно отказаться) имеем <a></a> и целый ворох css, причем с неожиданным появлением из рукава картинки при печати, надеюсь что <a><img alt="Логотип!"/></a> с диплей ноне, с нежданчиком при оключенных стилях и отключенных изображениях. Я бы понял однапиксельный прозрачный гиф с альтом в ссылке, но тогда беда с двумя картинками в коде на месте одного логотипа.

Сомнительно, очень сомнительно, что это часть содержимого. Простой пример, напиши заявление о приеме на работу. И напиши аналогичное заявление, только добавь туда свой логотип. Изменится ли суть данного документа при добавлении логотипа? Нисколечки. Изменится ли оформление? Да.

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

[s0rr0w]

Ну, для начала, первая часть фразы почему-то опущена, возможно ответ на нее добавил бы мне аргументов.

А во вторых, вроде я сразу аргументировано говорил, нежели просто <strong><a><img/></a></strong> и стиля, полной статики на все случаи жизни с печатями и прочим(если не надо на главной - не ссылка - от стронга можно отказаться) имеем <a></a> и целый ворох css, причем с неожиданным появлением из рукава картинки при печати, надеюсь что <a><img alt="Логотип!"/></a> с диплей ноне, с нежданчиком при оключенных стилях и отключенных изображениях. Я бы понял однапиксельный прозрачный гиф с альтом в ссылке, но тогда беда с двумя картинками в коде на месте одного логотипа.

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

Для примера стоит открыть предварительный просмотр данного форума. Логотип не прозрачный, вырезан вместе с куском фона. Это выглядит какашечно на печати.

Мой вариант таков

.logo { background: url(logo.png); }
.forPrint { display: none }

@media print {
.forPrint { display: block }
.logo { display: none }
}

<img src="logo_for_print.png" alt="htmlbook.ru " class="forPrint">
<div class="header">
 <a href="#" class="logo"> </a>
</div>
...

Как итог, мы имеем идеальный печатный вариант.

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

По поводу заявления, я спрашивал про суть документа, а не про реакцию на него. Если добавить лого, то тебя возьмут не на вакансию дизайнера, а сразу на вакансию арт-директора? Очень сомневаюсь.

[Justnewone]

Для модульности - да, удобно.

А не для модульности - избыточно.

Можно еще лучший на свете сайт сделать на локальном серваке и никому его не показывать никогда. Нам же реакция не интересна. На Артдиректора я не претендую. но пару тыщенок в месяц к зарплате получу своим резюме с логотипом (читай, академическим, фундаментальным подходом ко всему, в том числе в глазах работодателя - к работе, а если еще они поймут что мое лого круче чем у компании - ваще капец - артдиректор запроста).

Идея с лого в H1 по своему хороша - лого ставится во главу контента. Что не лишено смысла, но не в формате нынешнего HTML. Должен быть спец. тег, но его нету. Это для долгого обсуждения потом, когда будет свободно реализованы собственные неймспесы.

Тот что на сайте лого так сделан, так это тяжкое наследие. Понимаешь же что это вообще не проблема.

Edited August 5, 2009 by Justnewone

[psywalker]

Кстати хочу обратить Ваше внимание например на то, что на сайте Джеффри Зельдман. Заголовки H1 предназначаются именно для Логотипа

[rus]

Кстати хочу обратить Ваше внимание например на то, что на сайте Джеффри Зельдман. Заголовки H1 предназначаются именно для Логотипа

Ужасный сайт, я себе все глаза сломал.

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

Edited August 13, 2009 by rus

[psywalker]

Ужасный сайт, я себе все глаза сломал. sad.gif

Сайт ужасный, а чел знатный

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

Я её смотрел, там в <div id="logo"> упрятан логотип

[Justnewone]

Кстати хочу обратить Ваше внимание например на то, что на сайте Джеффри Зельдман. Заголовки H1 предназначаются именно для Логотипа

Зачем далеко ходить, w3.org

Но лично для меня тема не раскрылась, вижу как "за", так и "против", существенные. Для них, наверное, тоже самое, у себя на сайте не пишут, "настоятельно рекомендуем использовать для логотипа заголовок первого уровня..." как для меню - UL>LI/

[psywalker]

Зачем далеко ходить, w3.org

Но лично для меня тема не раскрылась, вижу как "за", так и "против", существенные. Для них, наверное, тоже самое, у себя на сайте не пишут, "настоятельно рекомендуем использовать для логотипа заголовок первого уровня..." как для меню - UL>LI/

Вот в том то и дело, что странно, что такие Киты интернета используют H1 в качестве логотипа, а такие мастера своего дела, как s0rr0w говорят обратное, и вот кому верить после этого и к какому знаменателю придти всё таки?

[Justnewone]

Киты тоже люди, и пусть они даже семи пядей во лбу, но пару нелогичных моментов в спецификации я вижу =). Отнеситесь к этому спокойно. Делайте сайты хорошие и содержательные, с грамотной разметкой содержимого, с уникальным контентом - и тогда уже не сильно важно будет че там за обвязка с логотипом. Дело было, думаю, так, кто-то из идиологов сделал на сайте у себя, перетер в форуме каком-то что "это супер идея", и начали все делать так же, вобщем, все как в жизни.

[rus]

Дело было, думаю, так, кто-то из идиологов сделал на сайте у себя, перетер в форуме каком-то что "это супер идея", и начали все делать так же, вобщем, все как в жизни.

+1 Скорее всего так и было.

[psywalker]

Киты тоже люди, и пусть они даже семи пядей во лбу, но пару нелогичных моментов в спецификации я вижу =). Отнеситесь к этому спокойно. Делайте сайты хорошие и содержательные, с грамотной разметкой содержимого, с уникальным контентом - и тогда уже не сильно важно будет че там за обвязка с логотипом. Дело было, думаю, так, кто-то из идиологов сделал на сайте у себя, перетер в форуме каком-то что "это супер идея", и начали все делать так же, вобщем, все как в жизни.

Да я всё понимаю конечно, но всё же хотелось получить чёткий, аргументированный ответ на данный вопрос, что-бы не только слова были, а ещё и доказательство

[Justnewone]

Да я всё понимаю конечно, но всё же хотелось получить чёткий, аргументированный ответ на данный вопрос, что-бы не только слова были, а ещё и доказательство

На понт? )))

У тебя вона скока постов нафлужено, Эксперт, это я у тебя должен такое спрашивать, а ты бы рассказывал с удовольствием =)

Нету основы под таким решением. Ну не написано, что "h1 - для логотипа". Полагаю, что это вынужденная мера, ибо тег <логотип> почему-то забыли придумать, а вот <нобр>, мля, не забыли. Думайте сам, решайте сами.

[psywalker]

На понт? )))

У тебя вона скока постов нафлужено, Эксперт, это я у тебя должен такое спрашивать, а ты бы рассказывал с удовольствием =)

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

Нету основы под таким решением. Ну не написано, что "h1 - для логотипа". Полагаю, что это вынужденная мера, ибо тег <логотип> почему-то забыли придумать, а вот <нобр>, мля, не забыли. Думайте сам, решайте сами.

Кстати насчёт тего "Логотип" думал недавно, правда жаль, что нет такого)))

[workerbeeviii]

Прошло 2 года. Поднимаю тему.

Логотип ставить с помощью <img> или h1 с background'ом? На w3.org, smashingmagazine.com логотипы установлены с помощью <h1>.

И еще, на странице можно использовать только один <h1>?

Также, объясните пожалуйста, почему файлы логотипов такие? То есть логотип повторяется по вертикали. С какой целью так делается?

Edited December 2, 2011 by workerbeeviii

[Анна]

Также, объясните пожалуйста, почему файлы логотипов такие? То есть логотип повторяется по вертикали. С какой целью так делается?

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

[workerbeeviii]

Спасибо, AnnaP! Оказывается все очень просто, а то я долго ломал голову.

[yacor]

Чисто моё мнение. Для семантики и поисковиков нежелательно картинку втавлять внутри <h1> Какой смысл? Делается обычная ссылка картинка

 
<a href="index.php"><img src="logo.png" width="" height="" /></a>

А вот текст (слоган или название) уже втыкать внутрь <h1>

<h1><a href="index.php">Бешаный слоган</a></h1>

Единственный минус - дублирование одной ссылки