Я тут немного запрыгнул, но наткнулся на эту страницу, когда обдумывал ее сам. Конечно, я не знаю, как Facebook или Twitter оправдали это, но вот мой собственный мыслительный процесс того, что он стоит.
В конце концов, я пришел к выводу, что эта практика не так уж бессмысленна (это слово?). На самом деле, помимо краткости и приятной ассоциации «я для иконы», я думаю, что это самый семантический выбор для иконы, когда простой <img>тег не практичен.
1. Использование соответствует спецификации.
Хотя это, возможно, и не то, что в основном имел в виду W3, мне кажется, что официальная спецификация <i>вполне может вместить иконку. В конце концов, символ стрелки ответа говорит «ответить» по-другому. Он выражает технический термин, который может быть незнаком для читателя и обычно выделяется курсивом. («Здесь, в Twitter, это то, что мы называем стрелкой ответа ».) И это термин из другого языка: символический язык.
Если бы вместо символа стрелки Twitter использовал <i>shout out</i>или <i>[Japanese character for reply]</i>(на английской странице), это соответствовало бы спецификации. Тогда почему нет <i>[reply arrow]</i>? (Я говорю здесь строго о семантике HTML, а не о доступности, к которой я доберусь.)
Насколько я вижу, единственная часть спецификации, явно нарушенная использованием значков, - это фраза "span of text" (когда тег также не содержит текста). Понятно, что <i>тег в основном предназначен для текста, но это довольно маленькая деталь по сравнению с общим назначением тега. Важный вопрос для этого тега заключается не в том, какой формат содержимого он содержит, а в том, что означает этот контент.
Это особенно верно, если учесть, что грань между «текстом» и «значком» может практически отсутствовать на веб-сайтах. Текст может больше походить на иконку (как в примере с Японией), либо иконка может выглядеть как текст (как на кнопке jpg с надписью «Отправить» или фотография кошки с наложенной надписью), либо текст может быть заменен или расширен с помощью изображение с помощью CSS. Текст, изображение - кого это волнует? Это все содержание. До тех пор, пока все - люди с нарушениями, браузеры с нарушениями, поисковики и другие машины различного типа могут понять этот смысл, мы выполнили свою работу.
Таким образом, тот факт, что авторы спецификации не думали (или не решили) уточнить это, не должны связывать нам руки с тем, что имеет смысл и соответствует духу тега. Первоначально <a>тег был предназначен для того, чтобы перевести пользователя куда-то еще, но теперь он может появиться в лайтбоксе. Большой возглас, верно? Если бы кто-то выяснил, как открыть лайтбокс при нажатии, прежде чем спецификация вступила в действие, ему все равно следовало бы использовать <a>тег, а не a <span>, даже если он не полностью соответствовал текущему определению - потому что он подошел ближе всего и был по-прежнему соответствует духу тега («что-то произойдет, когда вы нажмете здесь»). То же самое с <i>любым типом вещи, которую вы положили в нее, или как бы творчески вы ее не использовали,
2. <i>Тег добавляет смысловой смысл к элементу значка.
Альтернативный вариант для переноса класса значков сам по себе <span>, который, конечно, не имеет никакого семантического значения. Когда машина спрашивает, <span>что в ней содержится, она говорит: «Я не знаю. Может быть что угодно». Но <i>тег говорит: «У меня есть другой способ сказать что-то, чем обычный, или, может быть, незнакомый термин». Это не то же самое, что «У меня есть значок», но это гораздо ближе к этому, чем <span>получил!
3. В конце концов, общее использование делает правильно.
В дополнение к вышесказанному, стоит учесть, что читатели машин (будь то поисковая система, программа для чтения с экрана или что-то еще) могут в любой момент начать учитывать, что Facebook, Twitter и другие веб-сайты используют <i>тег для значков. Они не заботятся о спецификации так же сильно, как об извлечении значения из кода любыми необходимыми средствами. Таким образом, они могут использовать это знание обычного использования, чтобы просто записать, что «здесь может быть иконка», или сделать что-то более продвинутое, например, запустить просмотр CSS для подсказки к значению, или кто знает что. Поэтому, если вы решите использовать <i>значки for на своем веб-сайте, вы можете придать больше значения, чем спецификация.
Более того, если это использование станет широко распространенным, оно, вероятно, будет включено в спецификацию в будущем. Затем вы будете проходить через ваш код, заменяя <span>s <i>на s! Поэтому, возможно, имеет смысл принять на вооружение то, что кажется направлением спецификации, особенно когда это явно не противоречит текущей спецификации. Общее использование имеет тенденцию диктовать языковые правила больше, чем наоборот. Если вы достаточно взрослый, помните ли вы, что "веб-сайт" был официальным написанием, когда слово было новым? Словари настаивают на том, что должно быть место, а сеть должна быть написана заглавными буквами. Для этого были семантические причины. Но обычное использование говорит: «Что угодно, это глупо. Я использую« сайт », потому что он более лаконичен и выглядит лучше». И вскоре
4. Так что я иду вперед и использую это.
Таким образом, <i>дает больше смысла машинам из-за спецификаций, он дает больше смысла людям, потому что мы легко связываем «i» со «значком», а длина его всего одна буква. Выиграть! И если вы обязательно включите эквивалентный текст либо внутри <i>тега, либо прямо рядом с ним (как это делает Твиттер), тогда программы чтения с экрана поймут, куда нажимать, чтобы ответить, ссылку можно использовать, если CSS не загружается, и читатели-люди с хорошим зрение и приличный браузер видят симпатичную иконку. Учитывая все это, я не вижу обратной стороны.
<i class="sm-reply"></i>.