Должен ли я использовать тег <i> для иконок вместо <span>? [закрыто]

Я посмотрел на источник Facebook, они используют <i>тег для отображения значков.

Кроме того, сегодня я заглянул в Bootstrap Twitter. Он также использует <i>тег для отображения значков.

Но,

Из спецификации HTML5 :

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

Почему они используют <i>тег для отображения значков?

Разве это не плохая практика?

Или я что-то здесь упускаю?

Я использую spanдля отображения значков, и, кажется, работает для меня до сих пор.

Обновить:

Bootstrap 3 теперь использует spanиконки. Официальный документ

Почему они используют <i>тег для отображения значков?

Потому что это:

• короткий
• я обозначаю значок (хотя не в HTML)

Разве это не плохая практика?

Ужасная практика. Это триумф производительности над семантикой.

Я тут немного запрыгнул, но наткнулся на эту страницу, когда обдумывал ее сам. Конечно, я не знаю, как 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тег не должен использоваться для определения значков.

Но, Холли предположил , что spanне имеет никакого смысла в себе и проголосовал iвместо spanтега.

Мало кто предложил использовать в imgкачестве семантики и содержит altтег. Но мы также не должны использовать, imgпотому что даже пустая srcотправляет запрос на сервер. Читать здесь

Я думаю, правильный путь был бы

<span class="icon-fb" role="img" aria-label="facebook"></span>

Это решает проблему отсутствия altтегов spanи делает их доступными для пользователей с нарушениями зрения. Это семантика и не злоупотребление (взлом) любого тега.

Мое предположение: поскольку Twitter видит необходимость поддерживать устаревшие браузеры, в противном случае они будут использовать :before/ :afterpseudo-elements.

Устаревшие браузеры не поддерживают те псевдоэлементы, о которых я упоминал, поэтому им нужно использовать фактический HTML-элемент для иконок, и, поскольку иконки не имеют «эксклюзивного» тега, они просто идут с <i>тегом, и все браузеры поддерживают этот тег.

Они, конечно, могли бы использовать <span>, как и вы (что ПОЛНОСТЬЮ), но, вероятно, по той причине, о которой я упоминал выше, а также по причинам, упомянутым Квентином , Bootstrap также использует этот <i>тег.

Это плохая практика , когда вы используете дополнительную разметку для укладки основания, поэтому псевдо-элементы были изобретены, чтобы отделить содержание от стиля ... но когда вы видите необходимость поддержки устаревших браузеров, иногда вы вынуждены делать такого рода вещи.

PS. Тот факт, что значки начинаются с «i» и что есть <i>тег, совершенно случайно.

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

Нет ничего, что могло бы помешать вам создавать собственные элементы, которые описывают саму цель.

И современные браузеры, и даже IE 6+ (w / shim) могут поддерживать такие вещи, как:

<icon class="plus">

или

<icon-add>

Просто убедитесь, что тег нормализован:

 icon { display:block; margin:0; padding:0; border:0; ... }

и используйте прокладку, если вам нужно поддерживать IE9 или более раннюю версию (см. пост ниже).

Проверьте это сообщение StackOverflow:

Есть ли способ создать свой собственный HTML-тег в HTML5

Чтобы поддержать мой аргумент, и в Angular Directives Google, и в новых проектах Polymer используется концепция пользовательских HTML-тегов.

Я думал, что это выглядело довольно плохо - потому что я недавно работал над шаблоном Joomla, и я продолжал получать шаблон, терпящий неудачу из-за W3C, потому что он использовал <i>тег, и это устарело, поскольку его первоначальное использование состояло в том, чтобы выделить что-то курсивом, что теперь делается через CSS больше не HTML.

Это действительно плохая практика, потому что когда я увидел его, я просмотрел шаблон и заменил все <i>теги на <span style="font-style:italic">него, а затем удивился, почему весь шаблон выглядел странно.

Это основная причина, по которой плохой идеей является использование <i>тега таким образом - вы никогда не знаете, кто будет смотреть на вашу работу впоследствии и «предполагать», что на самом деле вы пытались выделить курсивом текст, а не отображать значок. Я просто поместил несколько иконок на веб-сайт, и я сделал это с помощью следующего кода

<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">

Таким образом, у меня все иконки в одном классе, поэтому любые изменения, которые я делаю, влияют на все иконки (скажем, я хотел, чтобы они были больше или меньше, или закругленные границы и т. д.), альтернативный текст дает читателям экрана возможность сказать человеку, что значок вместо того, чтобы получать просто «текст курсивом, конец курсивом» (я точно не знаю, как программы чтения с экрана читают экраны, но я думаю, что-то вроде этого), а название также дает пользователю возможность навести курсор мыши изображение и получите всплывающую подсказку с сообщением о значке на тот случай, если они не смогут его понять. Гораздо лучше, чем использовать <i>- и он также соответствует стандарту W3C.

Я также нашел это полезным, когда я хотел поместить значок с абсолютным позиционированием внутри <a>тега ссылки .

<img>Сначала я подумал о теге, но стиль по умолчанию для этих тегов внутри ссылок обычно имеет стиль рамки и / или эффекты тени. Кроме того, неправильно использовать <img>тег без определения атрибута «src», тогда как я использую объявление таблицы стилей фонового изображения, чтобы изображение не появлялось и не перетаскивалось.

На данный момент вы думаете о тегах, таких как <span>или <i>- в этом случае <i>имеет такой же смысл, как значок этого типа.

В целом, я думаю, что его преимущество, помимо интуитивности, заключается в том, что для того, чтобы этот тег работал в качестве значка, требуются минимальные корректировки таблицы стилей.