Короткий курс HTML 5
6. Форматування
Наступні теги доцільно застосовувати для смислового позначення ключових фраз тексту документа. Незважаючи на однаковий візуальний ефект деяких із них, необхідно розрізняти їхнє призначення.
- текст, що вимовляється з іншою інтонацією або іншим голосом (думки персонажів, назви термінів, ідіоми, назви судів та інше).
— текст, виділений з утилітарною метою, без особливої важливості і не потребує особливої інтонації (ключові слова в анотації, назва товару в огляді, іноді — вступна пропозиція у статті).
- Емфаза, емфатичний наголос. У наступному прикладі спершу слідує відповідь на запитання «хто?», потім «що?» і нарешті вигук:
- важливий текст, виділений акцентом.
Перераховані вище теги є парними та малими. , і зазвичай відображаються браузерами моноширинним шрифтом, - зменшеним,і- жирним зображенням, а решта - похилим.
Контактну інформацію пропонується розміщувати в блоковому елементі , вміст якого також відображається похилим зображенням.
Короткі цитати можна виділити малим тегом (текст відобразиться у подвійних лапках). Для довгих призначений блоковий елемент, який відображається з деяким відступом з усіх боків. Теги мають необов'язковий атрибут cite , значенням якого зазвичай вказують посилання (URL ) на цитоване джерело. Більшість браузерів цей атрибут ігнорують, проте пошукові системи можуть враховувати його під час аналізу сторінки.
Для відображення верхніх та нижніх індексів використовуються теги та відповідно. Наприклад, формула E1 = m1c 2 виводиться таким чином:
Позначити помилку в тексті можна тегом (за замовчуванням він буде перекреслено), а вставлений текст – тегом (позначаєтьсяпідкресленням). Незважаючи на те, що це малі теги (не розривають рядки), всередині них допускається розміщення блокових елементів.
Крім того, цим тегам можна вказати атрибут cite з посиланням на документ, що пояснює причину видалення/додавання інформації, а також datetime з датою редагування у такому форматі: 2010-04-28 14:47 (можна без часу).
Перекреслити текст можна також тегом. Але на відміну від , він позначає не помилку, а актуальність, що втратила, або застарілу інформацію. У свою чергу тегпідкреслює текст, однак, на відміну від , призначення його - звернути увагу на деяку особливість, на зразок граматичної помилки, вказати на власне ім'я в китайській мові і т. д.
Рядковий тег призначений для перевизначення напряму виведення тексту і не може застосовуватися без атрибуту dir , проте на відміну від інших тегів з цим атрибутом, він ігнорує правила Unicode і показує текст саме так, як ви скажете.
І нарешті, текст, розміщений у блоковому елементі
Нові можливості форматування в HTML 5
Наведені вище теги існували і раніше. HTML 5 розширює можливості мови ще кількома елементами для форматування документів.
Тег призначений для виділення фрагментів тексту в контексті дій користувача навіть якщо вони не виділяються в оригіналі. Наприклад, їм можна позначати слова, що відповідають пошуковому запиту або помилки у даних, що вводяться користувачем. Оформлення вмісту елементів визначається таблицях стилів.
Браузери, що підтримують конструкцію, просто проігнорують вміст тегів і відобразять анотації з агатом над попереднім текстом. Якщо ж конструкція не підтримується, весь текст відобразиться в один рядок. Наведений приклад виглядатиметаким чином:
Тегом можна позначати дату та/або час у тексті документа. Якщо числове значення не міститься всередині самого елемента, його необхідно вказати в атрибуті datetime . За умовчанням візуально не виділяється.
Для відображення значень заданого діапазону призначено тег. Діапазон допустимих значень повинен бути позначений у вмісті елемента або його атрибутах min і max . Аналогічним чином, саме значення може бути визначене всередині або в атрибуті value . Крім того, тег підтримує атрибути high, low та optimum. Перші два з них визначають межі діапазону, значення вище та нижче яких будуть вважатися високими та низькими відповідно. Значення optimum вважається оптимальним для діапазону.
Для відображення стану будь-якого процесу, на кшталт завантаження файлу або встановлення програмного забезпечення, HTML 5 пропонує використовувати тег
, що підтримує атрибути max та value , аналогічні атрибутам тега . Оскільки значення прогресу найчастіше змінюється динамічно, елементу зазвичай надається id , з допомогою якого можна керувати ним із підключеного до документа скрипта.
та відображаються у вигляді характерної смуги, що відображає поточне значення.
Іноді необхідно розставити у словах звані «м'які» переноси, т. е. позначити місця, де допускається переносити слово наступного рядка. Для цього призначений тег.