Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML

Короткий Урок: Не забудьте про стилизацию ALT-текста

by
Read Time:2 minsLanguages:
This post is part of a series called Strange and Unusual HTML.
Quick Tip: Consider Wrapping Your Code With a “figure” Element
Quick Tip: Set Relative URLs With the “base” Tag

Russian (Pусский) translation by Andrey Rybin (you can also view the original English article)

Атрибут alt внутри тэга <img> позволяет показать пользователю альтернативный контент, если ему недоступна картинка, или тому у кого отключено отображение картинок. Мы используем этот атрибут, чтобы сделать наш контент еще более доступным, но вы когда нибудь задумывались, а как он при этом выглядит?

Мы собираемся использовать шаблон письма, который мы создали в предыдущем уроке, в качестве примера, но будем использовать принципы веб-дизайна, который делается в браузере.

Если мы посмотрим на наш файл, с отключенным изображением, то вот как это выглядит:

altTagsBeforealtTagsBeforealtTagsBefore

Если честно, то ALT текст совсем не привлекательный - особенно ссылки. Но нам нужно всего лишь немного поработать, чтобы исправить ситуацию в лучшую сторону.

Для шапки, мы увеличим размер текста и изменим его на темно-синий, вместо черного. Мы сделаем это изменив стиль родительского элемента (ячейки в нашем случае). Это стиль применится ко всем alt- элементам внутри ячейки.

Вот наша ячейка:

Немного поработаем со стилизацией текста, и теперь это выглядит так::

И мы поменяем отображение ссылок на социальные сети, так, чтобы они были белыми:

altTagsAfteraltTagsAfteraltTagsAfter

Все очень просто! Зато теперь, мы можем быть уверены, что наше письмо выглядит  хорошо, даже если картинки не отображаются.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.