HTML-коды внутри тэгов alt
Можно ли помещать HTML-коды в теги alt?
У меня есть слайдер, который использует alt теги для описания. В порядке описания стиля, я должен поставить HTML-коды.
Моя проблема в том, что я не знаю, повредит ли это SEO или другим вещам, которые следует учитывать..
6 ответов
HTML-разметка недопустима для содержимого атрибута alt. Если вам нужен модный диалог, вы можете использовать его с JavaScript и даже старый CSS. Таким образом, ваш код действителен, и вы не столкнетесь с потенциальными проблемами SEO.
Да, вы можете использовать <img src=foo alt="<i>Hello</i> world">
, Я не вижу причин, по которым кто-то мог бы это сделать, но это действительно. alt
атрибут тогда будет представлен буквально, потому что это значение атрибута; HTML-теги там не распознаются.
Оказание alt
На значения тега могут повлиять или не повлиять таблицы стилей и разметка вокруг тега. Если ты пишешь <b><img src=foo alt="<i>Hello</i> world"></b>
, тогда будут отображаться расширенные браузеры <i>Hello</i> world
жирным шрифтом (но не курсивом), когда они не отображают изображение. ("Всплывающая подсказка" часть обработки alt
Атрибуты - это другая проблема, которая не может быть изменена и, как правило, отсутствует в любом современном браузере.)
Чтобы использовать только атрибут, который несет некоторый текст для отображения через JavaScript, data-*
атрибуты - намного лучший подход, как указывает Баптист Пласе в своем ответе. Технически возможно использовать alt
для этого, но это может вызвать странные вещи, когда изображение не отображается (по крайней мере временно, из-за задержек) и alt
текст используется вместо него.
Кроме того, поисковые системы, как известно, играют внимание на alt
значения атрибута, поэтому они не должны содержать ничего бессмысленного при рассмотрении определенной роли атрибута (чтобы предоставить альтернативный текст, который будет использоваться, когда изображение не показано).
Вы не должны использовать атрибут alt для своего ползунка, вместо этого используйте собственное свойство с атрибутами data-*. Дополнительная информация об атрибуте данных: http://www.marcofolio.net/webdesign/html5_data-_attributes_are_great_and_you_know_it.html
Вы должны сделать этот вид HTML (используя data-longdescr, но используйте любые данные, что вам нравится):
<img src="/img/pic.jpg" alt="Jumping over a fence" data-longdescr="<b>Jumping</b> over a fence" />
Остерегайтесь цитат, подумайте, их нужно избежать!
Разметка не будет работать с атрибутом alt.
Я бы поместил все теги описания в CSS
учебный класс. Затем стиль класс отдельно.
Чтобы стилизовать описание, вам нужен CSS; HTML предназначен для определения структуры документа.
Я думаю, что вы все неправильно поняли вопрос, OP спрашивает, возможно ли вставить html в тег alt, потому что он хотел стилизовать выходной текст, так как он использовал его в качестве описательного текста, наложенного на слайды. Я столкнулся с той же проблемой и обнаружил, что можно вставить html в теги alt. Это очень удобно, поскольку я использую плагин лайтбокса Wordpress, который превращает каждую ссылку на изображение на моей странице в часть слайд-шоу и выводит альтернативный текст в виде описательного текста над каждым изображением.
Если бы я мог вводить только простой текст, то стили для моих описаний были бы очень ограничены, и я бы не смог добавить такие потрясающие вещи, как ссылки:
<img alt="<?php echo "Title" . "Lorem Ipsum dolor" . "<a href='http://www.google.com'>View Website</a>"; ?> " src="<?php echo $img; ?>">
Я использую PHP для вставки разметки, хотя вы также можете использовать обычный HTML
alt="<h3>Title</h3><p>Lorem Ipsum dolor</p><a href='http://www.google.com'>View Website</a>"
Какие выводы:
заглавие
Лорем Ипсум Долор
Я не уверен, что это хорошо для SEO, но это определенно удобно, и то, что я не знал, было возможно до сих пор.