Визуализированное изображение заголовка. Семантически, я должен использовать теги img или фон?

Question

Просто вопрос о создании хорошего HTML. Скажем, у меня есть заголовок.

<h1>Header</h1>
<p>Hello, World!</p>

Это типичное использование, но, скажем, у меня есть заголовок в виде стилизованного текстового изображения. Буду ли я использовать тег <img/> с альтернативным текстом? За исключением того, что это не кажется мне правильным, так как это не изображение, которое важно, так как это текст, который он отображает. Единственным преимуществом использования <img/> является атрибут alt. Есть ли способ получить тег <h1> с фоновым изображением, но при использовании CSS текст в пределах <h1> исчезнет и все еще будет семантически правильным? То есть, я хочу, чтобы HTML показывал выше, но когда вы добавляете css, содержимое <h1> исчезает, и background-image вступает во владение.

Ввод, комментарии, слова мудрости?

Answer 1

h1{
background:url("bg.png") no-repeat;
width:"some value";
height:"some value";
text-indent:-9999px;
}

Используйте этот CSS для вашего тега H1.

Answer 2

CSS3 расширяет значение цвета, добавляя ключевое слово «transparent», чтобы разрешить его использование со всеми свойствами, которые принимают значение.

Вы можете использовать color: transparent с CSS3, чтобы скрытьтекст, а затем визуализируйте ваше стилизованное изображение заголовка как background-image.

. Однако для работы с CSS2 лучше использовать <img> как с атрибутом title, так и с alt:

Атрибут ALT разработан как альтернативное текстовое описание для изображений.Текст ALT отображается перед загрузкой изображения (если оно вообще загружено) в основных браузерах и вместо изображения в текстовых браузерах, таких как Lynx.

В отличие от этого, вы можете использовать атрибут TITLE для примернолюбой элемент страницы, но это не требуется для любого элемента страницы.Используйте его для описания ссылок, таблиц, отдельных строк таблицы и других структурных элементов HTML.Они более универсальны, чем атрибут ALT, и многие алгоритмы ранжирования поисковых систем считывают текст в атрибутах TITLE как обычное содержимое страницы.

Я хотел бы добавить, что нет определенного ответа.У каждого своя интерпретация и мнение по этому вопросу, и в этом нет «золотого правила».Однако попробуйте взглянуть на некоторые другие веб-сайты и поучиться на них.

Answer 3

На самом деле в этом есть своего рода «золотое правило», поскольку по крайней мере 2010 год:

Если возможно, все же лучше избегать таких методов, как «text-indent: -9999px».»Или« margin: -4000px »или« left: -2000em ».

У Google есть сверхсекретные алгоритмы, предназначенные для определения того, когда текст скрыт / позиционирован за пределами экрана.Если обнаружен этот тип скрытого текста, наш важный красный телефон звонит, и это становится одним из сигналов, которые могут заставить нас поверить, что ваш сайт обманчив.

http://maileohye.com/html-text-indent-not-messing-up-your-rankings/

Они упомянули день полотенца, так что вы знаете, что это законно.

Лучше всего использовать тег семантического изображения с альтернативным текстом в теге h1.

Answer 4

Я бы сделал <h1><img src="..." alt="..." /></h1>. Семантически описывает, что это заголовок и дает пользователю изображение с альтернативным текстом. В качестве альтернативы, но в равной степени вы можете использовать текст как h1, скрыть его с помощью css и дать ему фоновое изображение.

Answer 5

Я бы проголосовал за использование CSS, чтобы замаскировать текст в h1 изображением, как бы вы сделали это совсем другим вопросом. Вы можете использовать изображения в H1, но это оскорбит пуристов на SO. Можете ли вы как-нибудь использовать API шрифта, например http://code.google.com/apis/webfonts/, для отображения модной типографии и осчастливить семантику нацистами?