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

457

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

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

Но,

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

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

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

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

Или я что-то пропустил?

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

Update:

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

  • 5
    Пример: стрелка ответа под твитами в Твиттере: <i class="sm-reply"></i> .
  • 0
    также Facebook использует тот же тег для отображения стрелок
Показать ещё 10 комментариев
Теги:
semantic-markup

7 ответов

459
Лучший ответ

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

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

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

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

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

  • 83
    Это мой первый день, чтобы изучить бутстрап твиттера, и мне жаль, что они не следуют передовым методам.
  • 22
    некоторые люди даже идут дальше и злоупотребляют другими элементами, такими как <tt> = tooltip и так далее ... хотите помочь мне найти ATSMOHE? «Против семантического неправильного использования HTML-элементов»
Показать ещё 14 комментариев
218

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

В конце концов, я пришел к выводу, что эта практика не такая неармальская (это слово?). На самом деле, помимо короткого замыкания и хорошей ассоциации "i для значка", я считаю, что это фактически самый семантический выбор для значка, когда простой тег <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>, а не <span>, даже если он не полностью соответствовал текущему определению - потому что он стал самым близким и все еще соответствовал духу тега ( "что-то произойдет, когда вы нажмете здесь" ). То же самое относится к <i> - независимо от того, что вы вкладываете в него, или каким бы креативным вы его ни использовали, оно выражает общую идею альтернативного или заданного термина.

2. Тег <i> добавляет смысловое значение к элементу значка.

Альтернативный вариант нести класс значка сам по себе <span>, который, конечно же, не имеет смыслового значения. Когда машина спрашивает <span>, что она содержит, он говорит: "Я не знаю, может быть что угодно". Но тег <i> говорит: "Я использую другой способ сказать что-то, чем обычно, или, возможно, незнакомый термин". Это не то же самое, что "я содержал значок", но он намного ближе к нему, чем <span> получил!

3. В конечном счете, общее использование делает правильно.

В дополнение к вышесказанному, стоит подумать, что машинные читатели (будь то поисковая система, программа чтения с экрана или что-то еще) могут в любое время начать учитывать, что Facebook, Twitter и другие веб-сайты используют тег <i> для иконки. Они не заботятся о спецификации, насколько они заботятся о том, чтобы извлечь смысл из кода любыми средствами. Поэтому они могут использовать это знание общего использования, чтобы просто записать, что "здесь может быть значок" или сделать что-то более продвинутое, например, запустить поиск в CSS для подсказки, или кто знает что. Поэтому, если вы решите использовать <i> для значков на своем веб-сайте, вы можете предоставить больше смысла, чем спецификация.

Более того, если это использование станет широко распространенным, оно, скорее всего, будет включено в спецификацию в будущем. Затем вы пройдете свой код, заменив <span> на <i>! Таким образом, имеет смысл попасть на борт с тем, что, по-видимому, является направлением спецификации, особенно когда оно явно не противоречит текущей спецификации. Общее использование имеет тенденцию диктовать языковые правила больше, чем наоборот. Если вы достаточно взрослые, помните ли вы, что "веб-сайт" был официальным написанием, когда слово было новым? Словари настаивали на том, что должно быть пространство, и Интернет должен быть капитализирован. Для этого были семантические причины. Но общее употребление говорит: "Что бы это ни было глупо. Я использую" веб-сайт ", потому что он более краткий и выглядит лучше". И вскоре словари официально признали, что правильность написания.

4. Поэтому я продвигаюсь и использую его.

Таким образом, <i> предоставляет больше возможностей машинам из-за спецификации, он предоставляет больше смысла людям, потому что мы легко связываем "i" с "значком", и это только одна буква. Выиграть! И если вы обязательно включите эквивалентный текст внутри тега <i> или рядом с ним (как это делает Twitter), тогда читатели экрана поймут, где нажать, чтобы ответить, ссылка может использоваться, если CSS не загружается, а человеческий читатели с хорошим зрением и приличным браузером видят симпатичную иконку. Имея это в виду, я не вижу недостатка.

  • 33
    Но есть способы сделать это уже без злоупотребления <i> : использовать любой текстовый элемент, включая кнопки или ссылки, и добавить значок, используя фоновую графику и некоторые отступы, так же, как это делается с помощью <i> . HTML- <a ...>Reply</a> будет выглядеть как <a ...>Reply</a> , что является семантическим, стилизованная страница дополнительно отображает значок. Если значок является единственным основным элементом, он должен быть <img src="..." alt="Reply"> .
  • 33
    @Holly, вы перешли на совершенно другую сторону, но извините, я не согласен с каждой отдельной строкой, которую вы сказали.
Показать ещё 21 комментарий
34

В ответе Quentin четко указано, что тег i не должен использоваться для определения значков.

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

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

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

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

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

  • 6
    @ GeorgeMauer, все уважающие себя html / веб-дизайнеры заботятся о alt-тегах. спецификация есть по причине. Подобно пандусам в зданиях, существуют причины, по которым существуют теги alt, title и aria.
  • 3
    @osiris теперь держись, спецификации постоянно меняются. Я согласен, что хорошо следовать, но вы должны принять во внимание основные намерения. При этом, разглядывая его, я согласен с вами, поскольку это касается не только программ чтения с экрана / отсутствующих изображений / всплывающих подсказок - там на самом деле есть семантика, о которой я не знал. MDN: «Пропуск этого атрибута указывает на то, что изображение является ключевой частью содержимого, но текстовый эквивалент недоступен. Установка этого атрибута на пустую строку указывает на то, что это изображение не является ключевой частью содержимого; невизуальные браузеры могут пропустить это от рендеринга. "
Показать ещё 2 комментария
11

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

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

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

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

PS. Тот факт, что значки начинаются с "i" и тег <i>, является полностью совпадающим.

  • 1
    Не совсем, если вы посмотрите на код внутри элемента I, это элемент before
9

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

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

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

<icon class="plus">

или

<icon-add>

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

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

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

Проверьте этот пост StackOverflow:

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

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

  • 0
    Затем вы переходите к валидатору W3C и вводите <!doctype html> <html lang="en"> <head> <title>Hello</title> </head> <body> <icon></icon> </body> </html> и вы получите единственную ошибку, сообщающую об Error: Element icon not allowed as child of element body in this context.
6

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

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

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

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

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

  • 4
    <i> не считается устаревшим.
  • 3
    Тег img не работает для значков шрифтов. Я имею в виду, что это так, но ваш браузер отправляет запрос на ваш сайт каждый раз, когда он анализируется.
Показать ещё 3 комментария
2

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

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

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

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

  • 0
    Хорошо. Вот почему я думаю, что это плохая практика. Исторически <B> было для Bold, а <I> - для курсива. Поэтому, если вы использовали <i>, вы создаете пустой тег itallic, который не предназначен для этого. Они были заменены на <strong> и <em>. Поэтому, я полагаю, что в древних браузерах вы не хотели бы отмечать страницу пустыми курсивными тегами, а как насчет скрин-ридеров для слепых, не должны ли эти значки внутри ссылки быть скажем, текст. Так что <span> - лучший выбор, так как вы можете установить нулевой размер шрифта и значок.
  • 0
    @ user1712691 Это распространенный миф, что <b> и <i> были заменены на <strong> и <em> соответственно. Но правда в том, что <b> и <i> не устарели и приобрели новые смысловые значения. Читайте официальные спецификации, чтобы узнать больше.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню