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