Прискорююча кнопка n назначена для пропусків при навігації по сторінкам. Пропуск для переходу на початок контента.

Даний документ є перекладом. У випадку будь-яких невідповідностей і помилок остання версія документу англійською мовою повинна розглядатися як офіційна. Першопочаткове авторське право належить W3C, як це вказано нижче.

Перекладач: Alexandr Shlapak (Олександр Шлапак)

s_gotoW3cHome Інтернаціоналізація
 

Використання <b> та <i> елементів

Аудиторія: шифрувальники XML та XHTML/HTML (використовуючи редактори або скрипти), розробники скриптів (PHP, JSP, і т.д.), і кожен хто є новачком в інтернаціоналізації і потребує керівництва в тому як використовувати <b> та <i> теги в HTML.

Питання

Чи повинен я використовувати <b> та <i> елементи?

Ввідна інформація

Специфікація HTML5 перевизначає елементи b та i так, щоб вони мали деяку семантичну функцію, а не були виключно презентаційними. Тим не менше, той простий факт, що назви тегів 'b' для bold (жирний шрифт) та 'i' для italic (курсив) означають, що людям властиво продовжувати використовувати їх для презентації.

Ця стаття пояснює чому це може бути проблемою для локалізації (та, насправді, для рестайлінгу сторінок написаних однією мовою), і повторює пораду специфікації призначену для звернення до тих нарисів.

Відповідь

Ви завжди маєте мати на увазі що контент елементу b може не завжди бути написаним жирним шрифтом, і що елемент i може не завжди бути курсивом. Сучасний стиль залежить від визначень стилю CSS. Також ви повинні мати на увазі, що жирний шрифт і курсив можуть і не бути стилем, якому надають перевагу для контенту в деяких мовах.

Вам не слід використовувати теги b та i, коли доступний більш наглядний і підходящий тег. Якщо ви їх використовуєте, то краще додати class атрибути, які описують призначене значення розмітки, так щоб ви могли розрізняти використання одне від одного.

Решта цієї статті пояснить це більш детально.

Для чого вони потрібні

Специфікація HTML5 перевизначає призначене використання цих елементів як показано нижче.

Елемент i відображає інтервал тексту в альтернативному звуці або тональності, або в іншому випадку відступи від нормальної прози, такі як таксономічні позначки, технічний термін, технічні фрази з інших мов, думки, назви кораблів, або інша проза яка при друку зазвичай представляється курсивом.

Елемент b відображає інтервал тексту, що має бути стилізованим відступом від нормальної прози без передачі будь-якого додаткового значення, такого як ключові слова у резюме документу, назви продуктів в огляді, або інші інтервали тексту, який при друку зазвичай представляється жирним шрифтом.

Які тут є проблеми?

Ви повинні мати на увазі, що неправильне використання цих тегів може ускладнити локалізацію контенту.

Загальне питання. Використання b та i тегів може бути проблематичним тому, що змушує авторів думати про презентаційні умови, а не допомагає їм рухатися в напрямку правильної семантичної розмітки. Принаймні, це розмиває ідеї. В поспіху в автора є спокуса використовувати тільки один з цих тегів в тексті, щоб змінити його вигляд, замість того, щоб зупинитися і подумати про мобільність і перспективність.

Проблеми інтернаціоналізації можуть виникнути тому що представлення в різних культурах, можливо, повинне відрізнятися, особливо в ставленні до таких стилізацій як жирний шрифт і курсив.

Японський приклад. Просто тому, що Англійський документ може використовувати italicization (курсив) для наголосів, назв документів та розмовних фраз іноземною мовою, це не означає, що Японський переклад документа буде використовувати одну конвенцію для представлення всіх трьох типів контента. Японські автори, можливо, захочуть уникнути використання, як italicization (курсиву) так і bolding (жирного шрифту), так як їх символи занадто складні, щоб добре виглядати при невеликих розмірах з цими ефектами.

Японський локалізатор, безумовно, може застосовувати різні стилі до елементів b та i шляхом зміни таблиці стилів CSS. Тим не менш, японці можуть виявити, що контент читається краще, якщо вони використовують wakiten (спеціальні символи) для наголосу, кутові дужки для 『назв документів』, і подвійні кутові дужки для 《іноземного говору》. Це загальні Японські друкарські підходи, які не використовуються в Англійській мові.

Проблема в тому, що, якщо Англійський автор скрізь використовував i теги (думаючи про представлення, яке він/вона хоче на Англійській), Японський локалізатор не зможе легко примінити різну стилізацію для різних типів тексту.

Проблеми можна уникнути при використанні семантичної розмітки. Якщо Англійський автор використовував <em>..</em> та <cite>...</cite> та <i class="foreignphrase">..</i> щоб розрізняти три випадки, це дозволить локалізатору легко змінювати CSS для досягнення різних ефектів для цих елементів, по одному за раз.

Звичайно, автор міг би використовувати span елементи замість i або b. Різниця буде в тому, що не було б повернення до курсиву або жирного шрифту за відсутності правил стилю.

Одномовний підхід. Звичайно, з плином часу, це в рівній мірі має відношення до одномовних сторінок. Припустимо, ви хочете змінити своє нове корпоративне керівництво публікації, тому що ви відчуваєте, що імена документа виглядають краще, коли вони написані жирним шрифтом, а не курсивом. З семантично розміченою HTML, ви можете легко змінити стиль всіх назв документа по всьому сайті за допомогою одного маленького редагування в CSS. Однак, якби ви використовували i без виділення різної семантики, вам довелося б шукати на кожній сторінці відповідні i теги і змінювати їх окремо, тому що ви не застосовували ті ж самі зміни стилю до наголосу та іноземних слів.

Використання атрибутів мови. Якщо ви застосовуєте конвенцію для примінення italicization (курсиву) для іноземних слів або фраз у вашому контенті може здатися достатнім покластися на мовний атрибут для визначення того, що потребує стилізації, наприклад <i lang="fr">..</i>.

Насправді ви повинні ретельно подумати, перш ніж використовувати цей підхід, так як атрибут мови описує тільки мову тексту, а не зміст. Цілком можливо, що ви захочете стилізувати текст на різних мовах по-різному залежно від контексту, в якому він використовується або зараз, або в майбутньому.

Як правило, безпечніше використовувати class атрибути для опису семантики, і не перевантажувати мовний атрибут, наприклад.

<p>There is a certain <i class="foreignphrase" lang="fr">je ne sais quoi</i> in the air.</p>.

Рекомендації щодо використання

Специфікація HTML5 має наступні рекомендації відносно використання елемента i (додана підсвітка):

Авторам рекомендується використовувати class атрибут для елемента i щоб визначити, чому використовується цей елемент, так що якщо стиль особливого використання (наприклад сни, на відміну від таксономічних термінів) пізніше повинен бути змінений, автору не доведеться переглядати весь документ (або ряд пов'язаних з ним документів) занотовуючи застосування кожного з них. Аналогічно, авторам рекомендується вирішити питання щодо примінення інших елементів замість елементу i, наприклад елемент em для позначення акцентованого наголосу, або елемент dfn для позначення визначального екземпляру елемента.

Аналогічна формулювання міститься в описі елементу b.

В специфікації HTML5 4.6 Текст на рівні семантики перераховані інші елементи, які можуть бути використані для опису семантично вбудованого тексту, наприклад dfn, cite, var, samp, kbd, і т.д.http://dev.w3.org/html5/spec-author-view/text-level-semantics.html#text-level-semantics

Це допоможе вважати елементи b або i, по суті елементом span із стилізацією з автоматичним відступом. Так само, як елемент span, ці елементи зазвичай вигідніші в порівнянні з class назвами, якщо вони повинні бути корисними.

Розкажіть нам про те, що Ви думаєте.

Підписатися на RSS джерело.

Нові джерела

Новини головної сторінки

Twitter (Новини головної сторінки)

‎@webi18n

Додаткові матеріали

Автор: Richard Ishida, W3C. Перекладач: Alexandr Shlapak (Олександр Шлапак).

Допустимий XHTML 1.0!
Допустимий CSS!
Кодування UTF-8!

Переклад Англійського контенту від 2010-07-12. Переклад останнього оновлення 2011-08-17 18:00 GMT

Для перегляду історії внесення змін до перекладу натисність qa-b-and-i-tags в блоге i18n.