HTML тег
❮ Назад Вперед ❯
Тег <i> используется для выделения части текста. Заключенный в тег <i> текст по умолчанию отображается курсивным начертанием. Тег чаще всего выделяет термины, названия, фразы из другого языка и т.д.
Тег <i> является элементом физической, а не семантической разметки, то есть вложенный текст отличается только визуально и не воспринимается как важный браузерами и поисковыми машинами.
Если вы хотите выделить текст, на который стоит акцентировать внимание, то вместо тега <i> используйте тег семантической разметки <em>.
Тег <i> парный, закрывающий тег обязателен.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<p>До конца недели <i> жизненно необходимо <i> закончить все дела.</p>
</body>
</html>Попробуйте сами!
Результат
Тег <i> поддерживает глобальные атрибуты и атрибуты событий.
Как добавить стиль к тегу <i> ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <i>:
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега <i>:
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега <i>:
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега <i>:
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
Теги HTML — Тег
Описание
Устанавливает курсивное начертание шрифта. Допустимо использовать этот тег
совместно с другими тегами, которые определяют начертание текста.
Синтаксис
<i>Текст</i>
Закрывающий тег
Обязателен.
Атрибуты
Для этого тега доступны универсальные атрибуты и события.
Аналог CSS
font-style
Пример. Использование тега <i>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег I</title> </head> <body> <p><b><i>Lorem ipsum dolor sit amet</i></b></p> <p><i>Lorem</i> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <i>Ut</i> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html>
Примечание
Хотя использование тега <i> не осуждается в
HTML, применение стилей предоставляет больше возможностей по управлению начертанием
текста.
Спецификация ?
| Спецификация | Статус |
|---|---|
| WHATWG HTML Living Standard | Живой стандарт |
| HTML5 | Возможная рекомендация |
| HTML 4.01 Specification | Рекомендация |
✖
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры: Настольные Мобильные
?| Internet Explorer | Chrome | Opera | Safari | Firefox |
| 2 | 1 | 2 | 1 | 1 |
| Android | Firefox Mobile | Opera Mobile | Safari Mobile |
| 1 | 1 | 6 | 1 |
✖
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Строчные элементы. | Текст.
В чем разница между тегами и , и
В этом фрагменте мы объясним разницу между тегами и , и . На первый взгляд, между этими тегами нет никакой разницы. Но давайте обсудим эти две пары отдельно.
В HTML5 теги и имеют другое значение.
Тег выделяет часть текста жирным шрифтом, чтобы сделать его более очевидным для пользователя. Это стиль. Никакой дополнительной важности это не несет.
Поэтому рекомендуется использовать тег , если вам нужно увеличить вес определенного слова, фразы или абзаца только для целей презентации.
Тег указывает высокую важность содержимого. Его можно использовать, чтобы подчеркнуть серьезность, срочность или важность. Это указывает на то, как что-то должно быть понято.
Разница между этими тегами заключается в том, что делает текст жирным только визуально, тогда как тег также делает семантический акцент, указывая на значимое слово или часть текста.
Тег , который используется внутри другого тега , имеет большее значение.
Причиной этого различия является то, что HTML различает семантические (ссылающиеся на значение) и физические (ссылающиеся на внешний вид) теги.
Тег отображает текст курсивом. Как и тег , тег также используется для презентационных целей. Он представляет собой часть текста в другом голосе или настроении или что-то, что указывает на другое качество текста.
Тег определяет выделение ударения в его содержимом. Его можно использовать для изменения смысла предложения. Текст внутри этого тега также отображается курсивом.
Общие различия:
Вот таблица сравнения различий между тегами и , а также тегами и :
| Тег | Значение 9003 7 | Визуальный Внешний вид | Последствия доступности |
|---|---|---|---|
| Текст стилистически выделен жирным шрифтом | Жирным шрифтом | Нет специального значения специальных возможностей | <сильный> | Текст имеет большое значение или акцент | Жирный шрифт | Программы чтения с экрана и другие вспомогательные технологии распознают тег как обозначающий важное содержание | Нет специального значения доступности |
| Текст выделяется или важен | Курсив | Программы чтения с экрана и другие вспомогательные технологии распознают тег как указывающий на важное содержимое |
Как видите, основное различие между тегами и заключается в их семантическом значении, в то время как различие между тегами и также является семантическим, но связано скорее с выделением чем важность.
Кроме того, теги и имеют особые последствия для специальных возможностей, которых нет у тегов и .
Рассмотрим примеры с каждым из них.
Пример использования тега
:
<голова>
Название документа
<тело>
<р>
Эта часть текста
выделено жирным шрифтом.
Попробуй сам »
Результат
Эта часть текста выделено жирным шрифтом.
Пример использования тега
:
<голова>
Название документа
<тело>
Мы использовали тег <strong> тег, чтобы выделить
эта важная часть текста.
Попробуй сам »
Пример использования тега
:
<голова>
Название документа
<тело>
<р>
До конца месяца
крайне важно
закончить всю работу.
Попробуй сам »
Пример использования тега
:
<голова>
Название документа
<тело>
<р>
Важная часть текста выделена
курсивом.
Попробуй сам »
В спецификации HTML5 указано, что теги и должны использоваться в последнюю очередь, когда нет другого более подходящего тега.
html — Должен ли я использовать тег для значков вместо ?
Я немного опоздал, но наткнулся на эту страницу, когда сам обдумывал ее. Конечно, я не знаю, как Facebook или Twitter оправдали это, но вот мой собственный процесс размышлений о том, чего это стоит.
В конце концов я пришел к выводу, что эта практика не так уж бессмыслична (это слово?). На самом деле, помимо краткости и приятной ассоциации «i для значка», я думаю, что это на самом деле самый семантический выбор для значка, когда прямолинейный тег нецелесообразен.
1. Использование соответствует спецификации.
Хотя это может быть не то, что в основном имел в виду W3, мне кажется, что официальная спецификация для может довольно легко вместить значок. В конце концов, символ стрелки-ответа говорит «ответить» по-другому. Он выражает технический термин, который может быть незнаком читателю и обычно выделяется курсивом. («Здесь, в Твиттере, это то, что мы называем стрелкой ответа .») И это термин из другого языка: языка символов.
Если вместо символа стрелки Twitter использовал крикнуть или [японский символ для ответа ] (на англоязычной странице), это соответствовало бы спецификации. Тогда почему бы не [стрелка ответа] ? (Здесь я говорю строго о семантике HTML, а не о доступности , к которому я еще вернусь.)
Насколько я вижу, единственная часть спецификации, явно нарушаемая использованием значка, — это фраза «промежуток текста» (когда тег также не содержит текста).
Это особенно верно, если учесть, что граница между «текстом» и «значком» на веб-сайтах может практически отсутствовать. Текст может больше походить на значок (как в японском примере) или значок может выглядеть как текст (например, кнопка jpg с надписью «Отправить» или фотография кота с наложенной подписью), или текст может быть заменен или улучшен с помощью изображение через CSS. Текст, изображение — кого это волнует? Это все содержание. Пока все — люди с нарушениями, браузеры с нарушениями, пауки поисковых систем и другие машины разного типа — могут понять это значение, мы выполнили свою работу.
Таким образом, тот факт, что авторы спецификации не подумали (или решили) прояснить это, не должен связывать нам руки от того, чтобы делать то, что имеет смысл и соответствует духу тега.
Тег изначально предназначался для того, чтобы перенаправить пользователя куда-то еще, но теперь он может вызвать лайтбокс. Большой возглас, не так ли? Если кто-то понял, как открывать лайтбокс по клику, до того, как спецификация догнала его, он все равно должен был использовать тег , а не , даже если это не совсем соответствовало текущему определению, потому что оно подошло ближе всего и все еще соответствовало духу тега («что-то произойдет, когда вы щелкнете здесь»). То же самое и с
2. Тег добавляет семантическое значение элементу значка.
Альтернативный вариант переноса класса значков сам по себе — , который, конечно, не имеет никакого семантического значения. Когда машина спрашивает , что в ней содержится, она отвечает: «Я не знаю.
Может быть что угодно». Но тег говорит: «Я использую другой способ сказать что-то, чем обычно, или, может быть, незнакомый термин». Это не то же самое, что «у меня есть значок», но гораздо ближе к нему, чем получил!
3. В конце концов, обычное использование делает правильным.
В дополнение к вышесказанному стоит учитывать, что машинные ридеры (будь то поисковая система, программа чтения с экрана или что-то еще) могут в любой момент начать учитывать, что Facebook, Twitter и другие веб-сайты используют тег для иконок. Они заботятся не столько о спецификации, сколько об извлечении смысла из кода любыми необходимыми средствами. Таким образом, они могут использовать это знание общего использования, чтобы просто записать, что «здесь может быть значок», или сделать что-то более сложное, например, вызвать просмотр CSS для намека на значение или кто знает что. Поэтому, если вы решите использовать для значков на вашем веб-сайте, вы можете дать больше смысла, чем указано в спецификации.
Более того, если это использование станет широко распространенным, оно, вероятно, будет включено в спецификацию в будущем. Затем вы будете просматривать свой код, заменяя ! Так что может иметь смысл согласиться с тем, что кажется направлением спецификации, особенно если оно явно не противоречит текущей спецификации. Обычное использование имеет тенденцию диктовать языковые правила больше, чем наоборот. Если вы достаточно взрослый, помните ли вы, что «веб-сайт» был официальным написанием, когда это слово было новым? Словари настаивали на том, что должен быть пробел, а Web должен писаться с большой буквы. Для этого были смысловые причины. Но обычное использование говорит: «Как бы то ни было, это глупо. Я использую «веб-сайт», потому что это более лаконично и выглядит лучше». И вскоре словари официально признали это написание правильным.
4. Так что я использую его.
Итак, дает больше смысла машинам из-за спецификации, оно дает больше смысла людям, потому что мы легко связываем «i» со «иконой», и состоят только из одной буквы.