На сколько разумно вставлять картинки через тег i?

Question

[Анна Бакурова]

На многих сайтах сейчас вставляют тег i для иконок... На сколько это нормально и стоит ли так делать?

Comments

[Гоша Манн]

stackoverflow.com/questions/492809/when-to-use-img...

[Анна Бакурова]

@IgorMann мне не интересно когда img используется, мне нужны какие то + и - использования тега i для иконки. Я точно знаю что мне нужно задавать через bg

Answer 1

[Павел]

Вставляют не картинки, а псевдо иконки, а точнее шрифтовые иконки реализуемые через классы CSS. Страшного ничего нет. И кстати Bootstrap отказался вовсе не из-за тега i, а в силу того, что стали использовать уже готовую библиотеку glyphicons, тем самым сняв с себя обязательства по поддержке встроенных иконок. Вас так же никто не ограничивает использовать тот же Font Awesome, который был написан специально под Boostrap.

Answer 2

[Сергей]

Таким методом вставляются иконки, когда они рисуются через иконочный шрифт или через background (спрайтом). Шрифтовые иконки привязываются через псевдо-элементы :before или :after по классу, а с бэкграундом — просто по классу. Поэтому в обоих случаях нужно, чтобы иконка была в отдельном теге. Можно конечно использовать тег span, но тогда на каждую иконку вы будете использовать лишние 6 символов (3 в открывающем и 3 в закрывающем теге). Тег i короткий и по звучанию ближе всего к «image» или «icon». А с точки зрения семантики здесь нет ничего страшного, т.к. текста внутри тега нет, и он фактически пустой.

Answer 3

[bromzh]

Можно и заголовки делать с помощью , а картинки вставлять как бэкграунд к . Но зачем? У каждого тэга есть свой смысл и своя область применения. На w3c всё прописано. Иконки через i никем не стандартизированы, даже бутстрап отказался от этого.

Comments

[Анна Бакурова]

по каким причинам отказались и зачем вообще принимали когда-то?

[bromzh]

Я не разработчик бутстрапа, сказать точно не могу. Можешь им письмо написать и спросить.
Я думаю, что приняли, потому что хотели выделить иконку как отдельную сущность, и i был наиболее близок и понятен на тот момент. Отказались, потому что стандарты изменились и это стало нарушать семантику. Использовать теги не по их назначению - плохо, тем более с учётом утверждения уклона html5 в семантику. Крупные интернет-деятели тоже участвуют в создании этих стандартов, и игнорировать их глупо. Поисковикам легче парсить структурированный документ, нежели кучу div-ов с ни о чём не говорящими классами.
Что касается иконок - их очень трудно вместить в стандарт. Нужно вводить кучу определённых названий для них. Да и на семантику они влияют слабо - это всё же больше графический, нежели смысловой инструмент. С точки зрения html элемент-иконка может быть любым. А вот как отображать - маленькой картинкой или текстом - это уже удел css.

Answer 4

[Сергей Мельников]

Это нормально и стоит так делать. А в чем, собственно, может быть проблема? И если "На многих сайтах сейчас вставляют тег i для иконок..." то наверное это нормально? Учимся размышлять логически и перенимать чужой опыт.

Comments

[Анна Бакурова]

Просто это не семантично вроде как. тег i он же для текста. Но с другой стороны мне кажется если разработчики так начали делать то в доку внесут правки... Я просто нигде не нашла статью по этому поводу кроме примера БЭМ мол мы так делаем

[Сергей Мельников]

@Libris так многие делают, а семантика - это когда коту нечего делать)

[bromzh]

@mlnkv раньше все таблицами верстали. Сейчас появились нормальные инструменты и подходы для вёрстки, и это стало ненормально. Времена меняются. Если не будешь меняться вместе с ними - останешься без работы.

[Александр Борисович]

Это может быть удобно так как короче.