Когда альт, когда заголовок? »Арджан Снатерсе» Ворену

1. Атрибут alt
2. Атрибут заголовка
3. Атрибут title и alt вместе
4. Атрибут longdesc
5. Поисковые системы
6. заключение

Просто чтобы перейти к сути, просто вопрос: для чего вы используете атрибут alt и для чего нужен атрибут title?

Правильно ли, если я думаю, что большое количество читателей теперь думают: «Есть ли разница между этими двумя?» Или «Да, они предназначены для подсказок в вашем браузере»? Боюсь, что так и, честно говоря, я даже не думаю, что это странно. Атрибут title встречается не часто и поэтому очень неизвестен. Кроме того, браузеры часто отображают оба атрибута в виде всплывающей подсказки, но это не значит, что они также предназначены для этого. В этой статье я попытаюсь прояснить, для чего предназначены эти атрибуты. Я также кратко рассмотрю (даже) менее известный атрибут longdesc.

Атрибут alt

Мы считаем, что лучше взглянуть на хорошее описание атрибута alt. определение W3C позвонить. Это выглядит следующим образом:

Для пользовательских агентов, которые не могут отображать изображения, формы или апплеты, этот атрибут определяет альтернативный текст

Точно, атрибут для пользовательских агентов, которые не могут видеть изображения. И поэтому не для отображения подсказок. Вы используете атрибут alt, если пользовательский агент (например, текстовый браузер) не может отобразить изображение. Вместо этого отображается альтернативный текст.

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

<img src = "mount-everest.jpg" alt = "Вид на гору Эверест">

Хорошее описание этой фотографии может быть: «Вид на гору Эверест». Вы должны быть в состоянии "угадать", что показано на изображении из содержимого атрибута alt. Такие тексты, как «фото» или «желтая пуля» не дают никакой дополнительной ценности, и поэтому вы должны их не использовать. Если вы используете элемент img для изображений, которые вносят вклад только в макет (например, изображение заголовка или маркер), просто оставьте атрибут alt пустым. Лучше нет информации, чем бессмысленная информация. Конечно, было бы еще лучше, если бы вы обрабатывали эти типы изображений с помощью CSS.

Атрибут заголовка

Опять здесь определение W3C для атрибута заголовка.

Этот атрибут предлагает консультативную информацию об элементе, для которого он установлен.

Это звучит немного более расплывчато, и я думаю, именно поэтому мы редко или никогда не видим этот атрибут. Вторая причина в том, что это не обязательный атрибут. Атрибут title используется только для предоставления дополнительной информации о текущем элементе. Мы часто видим, как этот атрибут висит на ссылке. Затем вы можете использовать атрибут title, чтобы предоставить больше информации о странице, на которую вы ссылаетесь. Если ссылка хорошая, она должна в основном соответствовать тексту ссылки, но вы можете добавить некоторые дополнительные данные, например, автора или дату определенной статьи. Следовательно, хороший атрибут заголовка должен содержать информацию, которая является описательной, но не обязательно существенной. Это явно (или, возможно,) разница с атрибутом alt. Для пояснения этого атрибута также приведен пример ниже:

<a href="http://www.naarvoren.nl/artikel/alt_title/" title="Link to: Когда alt, когда title?, написано Arjan Snaterse"> Когда alt, когда title? </a>

Атрибут title и alt вместе

Это тоже возможно? Да. Конечно, это возможно только с элементом img, поскольку согласно спецификациям HTML атрибут alt может использоваться только с элементом img. Но какая польза от использования этих двух вместе? Ну, если честно, не очень. Но возможно, что вы используете фотографии, которые защищены авторским правом на вашем сайте. Атрибут title предлагает возможность упомянуть эти авторские права. Авторское право, конечно, мало говорит о самой фотографии, поэтому атрибут alt для этого не подходит. Для полноты также для комбинации между этими двумя атрибутами пример и HTML-код.

<img src = "skyline-new-york.jpg" alt = "Горизонт Нью-Йорка" title = "Горизонт Нью-Йорка, авторские права Ян Баккер 2007">

Атрибут longdesc

Да, тогда есть еще атрибут longdesc. Большой шанс, что никто этого вообще не знает и, честно говоря, я никогда не сталкивался с longdesc. Но этот атрибут предназначен для того, чтобы иметь возможность использовать несколько более длинные описания для определенного элемента. Также из этого определение W3C ,

Этот атрибут указывает ссылку на длинное описание изображения. Это описание должно дополнять краткое описание, предоставленное с использованием атрибута alt.

Вот две вещи. Начнем со второго: оно должно быть дополнением к атрибуту alt. Если у вас нет свободного места с атрибутом alt, вы можете использовать атрибут longdesc. В первом предложении становится ясно, что атрибут longdesc содержит ссылку на описание. Таким образом, вы можете хранить здесь гораздо больше информации, чем в атрибуте alt, который согласно проекту документа « Тестовый пакет для WCAG 2.0 "Может содержать только 100 символов.

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

<img src = "muiderslot.jpg" alt = "Muiderslot: замок и национальный музей" title = "Замок и национальный музей Muiderslot, авторские права Пит Янссен, фотография сделана 2 января 1998 года" longdesc = "muiderslot-longdesc.html">

Следующий текст появится в файле muiderslot-longdesc.html:

Фото с видом на замок Мудерслот в Муйдене. Этот замок существует с 1280 года и был построен для графа Флориса V. Сегодня этот замок служит национальным музеем.

Преимущество атрибута longdesc заключается в том, что вы можете использовать заголовки и другие элементы HTML. Это невозможно в атрибуте alt или title.

Если вы читаете это, это выглядит как идеальный атрибут, но, безусловно, есть и недостатки. Основные недостатки. Проблема с атрибутом longdesc заключается в том, что он плохо поддерживается текущими браузерами. Только браузеры Mozilla (Firefox, Netscape, Mozilla) могут хорошо обрабатывать этот атрибут. Концепция D-Link была разработана в качестве альтернативы этому. D-ссылки - это не более, чем ссылка на страницу с дополнительной информацией об изображении. Но из-за этого лодку немного не хватает, поэтому настоятельно не рекомендуется правительственные веб-директивы ,

Примечание : наблюдательный читатель, возможно, заметил, что сами изображения в этой статье не содержат атрибутов alt (по крайней мере, пустой), title или longdesc. Тем не менее, это было сделано намеренно, потому что эти изображения были размещены исключительно с целью разъяснения этой статьи и имеют только декоративную и никакой основной функции. Читатель не пропускает жизненно важную информацию, если изображения не показывались.

Поисковые системы

Теперь, когда мы в основном рассмотрели HTML-историю, было бы также интересно узнать, что поисковые системы делают с этими атрибутами. Я думаю, что преимущество атрибута alt довольно хорошо известно. Если вы правильно используете этот атрибут, у него есть преимущества как для поиска изображений, так и для поддержки текстов вокруг него. Меньше известно об атрибуте title. Но если мы сделаем что-то для этого исследование мы узнаем, что поисковые системы ничего не делают с этим.

Тогда атрибут longdesc остается. Это ссылка на другой HTML-файл, и хороший SEO-специалист, естественно, видит здесь возможности. Но если у нас есть паук, например Xenu по завершении его работы мы обнаруживаем, что документы в атрибуте longdesc не отслеживаются. Даже после реального теста файл HTML с длинным описанием оказался не проиндексированным. Может быть, это позор, но с другой стороны также очень понятно, так как это стало бы очень простым способом рассылки спама.

заключение

Я надеюсь, что после прочтения этой статьи вы узнаете больше об использовании атрибутов alt, title и longdesc. Самое важное, что вы пишете хороший текст для атрибута alt и, возможно, дополнительный атрибут title. А атрибут longdesc? Хорошо ... давайте просто забудем об этом сейчас.