Минулого літа я прочитав повну специфікацію HTML5, і всі попередні специфікації HTML (навіть покинуті), і всі специфікації CSS, які я міг знайти, і безліч специфікацій XML. Оскільки я люблю семантично багаті гіпертекстові документи, дозвольте дати вам ідею щодо відповідної семантики HTML у HTML5.
Перед HTML5
До HTML5 iі bсправді вийшли з моди. Причина полягала в тому, що вони по суті працювали як emі strong, відповідно, але орієнтуючись на презентацію, а не на семантику (що погано).
Дійсно, iмав на увазі, що текст має містити курсив (він щось говорить про те, як текст повинен бути відображений на екрані). З іншого боку, emмав на увазі, що текст повинен бути підкреслений (він щось говорив про семантику тексту).
Тут є важлива теоретична різниця. Якщо ви користуєтесь em, користувальницький агент (= браузер) знає, що текст повинен бути підкреслений, тому він може відображати його курсивом, якщо документ відображається на екрані (або з великими ковпаками, якщо форматування неможливо, або, можливо, навіть жирним шрифтом є користувач вважає за краще це), він може вимовляти це по-різному, якщо документ розмовляє з користувачем тощо.
Зауважте, що акцент дійсно робиться на семантиці. Наприклад, фрази
- Кішка моя. (= не собака!)
- Кіт мій . (= не ваш!)
не мають однакового значення.
Ця ж різниця стосується b(шрифту жирного шрифту) та strong(сильного наголосу).
Загальний принцип цифрового письма взагалі, зокрема, створення тексту гіпертексту, полягає в тому, що ви повинні розділяти зміст і стиль. У створенні гіпертексту це означає, що вміст повинен бути у файлі HTML, а стиль повинен бути у файлі CSS (або у кількох CSS-файлах). Інший, але пов'язаний із цим принцип полягає в тому, що документ повинен бути багатим на семантику (наприклад, розмітка заголовків, колонтитулів, списків, акцентів, адрес, навігаційних областей тощо). Це має ряд переваг:
- Комп'ютерним програмам набагато простіше інтерпретувати документ. Ці програми включають браузери, програми для текстового мовлення, пошукові системи та цифрові помічники. (Наприклад, веб-переглядач може дозволити вам зберегти адресу до своєї адресної книги, якщо тільки вона може знайти та інтерпретувати її. Також ви можете знати, що Microsoft Word може створити та автоматично оновити TOC для вас, якщо правильно розмітити заголовки .)
- Набагато простіше згодом змінити стиль. (Якщо ви хочете змінити колір усіх заголовків третього рівня у своєму документі на 860 сторінках, ви можете змінити один рядок у таблиці стилів. Якби ви мали змішаний вміст та презентацію, вам доведеться пройти весь документ вручну . І ви, мабуть, пропустите заголовок або два, зробивши документ непрофесійним.)
- Ви можете використовувати різні таблиці стилів залежно від обставини (документ відображається на екрані чи друкується на папері?). Ви навіть можете дозволити кінцевому користувачеві вибрати сам стиль. (Мій веб-сайт пропонує ряд альтернативних таблиць стилів. У IE та FF ви змінюєте їх за допомогою меню Перегляд.)
Так, в загальному, iі bбули застарілими , тому що вони були HTML теги стурбовані презентації , що абсолютно неправильно.
У HTML5
У HTML5 iі bбільше не рекомендується. Натомість їм надається сематичне значення . Тож вони зараз насправді про семантику, а не про виклад.
Як і раніше, використовувати emрозмічати увагу: «Кішка на мій.» Але ви використовуєте iмайже для всіх інших випадків, коли ви б використовували курсив у друкованому творі. Наприклад:
- Ви використовуєте
iдля позначення таксономічних позначень: "Мені подобається R. norvegicus ."
- Ви використовуєте
iдля позначення фрази іншою мовою порівняно з навколишнім текстом: À la carte
- Ви використовуєте
iдля позначення слова, коли говорите про саме слово: " пити - це і іменник, і дієслово"
Також добре використовувати classатрибут, щоб вказати точне використання (також "мікроформати" та "мікродані" Google). І, звичайно, у другому випадку вам слід реально використовувати langатрибут, щоб вказати правильну мову. (Інакше, наприклад , агент з текстовим мовленням може неправильно вимовити текст.)
Ще рік тому специфікація HTML5 також говорила, що її citeслід використовувати для позначення назв книг, фільмів, опер, картин тощо:
- Що ви думаєте про німфоманку ?
Нарешті, з давніх часів dfnвикористовується для позначення визначального екземпляра фрази в тексті (як математичне визначення чи визначення терміна):
- Група являє собою набір X оснащений однією бінарної операцією * такий , що ...
Тож курсив у вашій друкованій книзі, який може означати багато різних речей, представлений чотирма різними тегами HTML5, що справді чудово, адже семантика хороша, як я намагався вас переконати раніше. (Наприклад, ви можете попросити веб-переглядач скласти список усіх визначень у тексті, щоб ви могли переконатися, що знаєте їх усі до іспиту.)
Звертаючись до strongта b, специфікація HTML5 говорить, що її strongслід використовувати для позначення важливої частини тексту, як-от застереження чи якесь дуже важливе для вловлювання слово в реченні. З іншого боку, bслід використовувати для позначення речей, які потрібно легко знайти в тексті, як ключові слова. Я також використовую bяк заголовки у списках (LI).
<b>і<i>не застарілий.