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

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

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

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

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

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

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

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

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

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

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

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

PS. Дело в том, что иконки начинаются с помощью "Я" и есть <i> тег, совершенно случайно.

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

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

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

<icon class="plus">

или

<icon-add>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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