Тег i: Тег | htmlbook.ru

Содержание

Как использовать тег со значками?

У меня есть набор значков и код CSS для привязки значков к элементу, но я не могу заставить тег «i» работать с набором значков без заполнения его содержимым. Нужно ли добавлять пользовательский код для тега?

Я видел, как Twitter Bootstrap использует тег «i» для значков.
Кроме того, я попробовал тег span, и это тоже не работает. Это работает, когда я использую теги «li» или «div», Тхо.

Что я упускаю? Заранее спасибо!

Это не работает

<i></i>

Это работает

<i>BLAH</i>

пример моего CSS

.icon {background: url('/images/icons.png') no-repeat top left;}
.icon-accessibility{ background-position: 0 0; width: 32px; height: 32px; }

html

css

icons

Поделиться

Источник


Fredrik Westerlund    

04 июля 2013 в 13:20

4 ответа


11

Тег <i> используется для обозначения того, что текст внутри должен быть курсивом. Не имеет смысла использовать его в этом контексте.

Если вы все еще хотите сохранить его и не использовать что-то другое , например div, проблема заключается в том, что тег <i> является встроенным элементом, а не блочным элементом, как div . Добавьте display: inline-block; к вашему CSS, и это сработает.

Поделиться


Fiona — myaccessible.website    

04 июля 2013 в 13:23


2

Вы можете просто использовать тег img для отображения значка. Это имеет больше смысла с семантической точки зрения, поскольку в конце концов это встроенный контент, и значок будет осязаемым.

Поделиться


Explosion Pills    

04 июля 2013 в 13:26


2

Если отбросить семантику, вы ничего не видите, потому что элемент <i/> по умолчанию равен inline . Скорее всего, вы захотите добавить display: inline-block; в набор правил .icon , чтобы соответствовать тому, как Bootstrap отображает их значки.

Если вы заботитесь о семантике, используйте вместо нее <div/> или <span/> .

Поделиться


André Dion    

04 июля 2013 в 13:27

  • Как создать вкладки со значками в JavaFX

    Я хочу создать панель вкладок со значками, похожими на панель конфигурации Firefox с JavaFX: Есть ли какой-нибудь пример, который я могу использовать, чтобы увидеть, как это реализовать?

  • Как сделать пробел между тегами <i> (значками) в таблице?

    У меня есть классический стол HTML. В одну колонку я хочу добавить 3 иконки со ссылками для редактирования, например, пользователей. Я использую twitter-bootstrap и глифсиконы. Как сделать больше пространства между значками??? Я предпочитаю использовать CSS. <td> <a href=’#’> <i…


1

Бртр, просто добавьте «display: inline-block» к вашему «.icon», это может сработать

Поделиться


Salih K    

04 июля 2013 в 13:33

Похожие вопросы:

Java: JTree со значками плюс / минус для расширения и сворачивания?

Как сделать так, чтобы мое Jtree выглядело как что-то ниже, со значками плюс и минус, которые позволяют расширять и сворачивать? В настоящее время значение по умолчанию JTree расширяется и…

Реализация панели инструментов со значками в WPF/XAML

В моем настольном приложении WPF я хочу реализовать панель инструментов с ключевыми действиями (добавить, обновить, удалить и т. д.), Что-то вроде того, что вы можете увидеть в любом почтовом…

Диск выберите поле со значками в форме windows

Есть ли какой-либо элемент управления формой windows, который показывает список букв дисков со значками?

Параметры ввода (радио и checkbox) имеют кнопки со значками

Есть ли какая-либо доступная библиотека, которая преобразует параметры или входы radion имеет кнопки выбора со значками? Пример того, какой тип укладки вы ищете, приведен выше.

Как указать тег twitter bootstrap <i> во встроенном Ruby

— Новичок в Ruby на Rails и интеграция нескольких аспектов Twitter Bootstrap в (или, по крайней мере, попытка :))- У меня есть ссылка в обычном HTML с Twitter значками Bootstrap в нем: <li…

Как создать вкладки со значками в JavaFX

Я хочу создать панель вкладок со значками, похожими на панель конфигурации Firefox с JavaFX: Есть ли какой-нибудь пример, который я могу использовать, чтобы увидеть, как это реализовать?

Как сделать пробел между тегами <i> (значками) в таблице?

У меня есть классический стол HTML. В одну колонку я хочу добавить 3 иконки со ссылками для редактирования, например, пользователей. Я использую twitter-bootstrap и глифсиконы. Как сделать больше…

<i> тег в HAML

Как создать I-тег в haml? Пример: <i class=fa fa-search></i>

Android поддержка библиотеки 23.2. TabLayout со значками

Нет никаких значков во вкладках, если приложение построено с поддержкой библиотеки 23.2.0 У меня есть приложение с tabLayout значками. @Override public CharSequence getPageTitle(int position) {…

Как использовать тег <i> с тернарным оператором?

Я пытаюсь использовать тег i с тернарным оператором. Две строки unavailable,available работают отлично, но вместо них я хочу использовать 2 значка, такие как знак проверки(fa fa-check) и знак X(fa…

HTML тег i | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 11.03.2009

Тег <i> (italic — курсив) — тег-контейнер, выделяет текст курсивом.
Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<i>...</i>

Атрибуты

Основные
Вспомогательные
События

classопределяет имя используемого класса
dirопределяет направление символов:

  • ltr — слева направо
  • rtl — справа налево
idуникальный индетификатор
langопределяет язык отображаемого документа
onclickщелчек на элементе
ondblclickдвойной щелчек на элементе
onkeydownнажатие клавиши, когда элемент имеет фокус
onkeypressнажатие и освобождении клавиши, когда элемент имеет фокус
onkeyupосвобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedownнажатие кнопки мыши, когда элемент имеет фокус
onmousemoveдвижение указателя мыши, когда элемент имеет фокус
onmouseoutсмещение указателя мыши с элемента
onmouseoverпомещение указателя мыши на элемент
onmouseupосвобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
styleзадает встроенную таблицу стилей
titleвсплывающая подсказка
Пример

код:


Курсив от лат. <i>cursiva littera</i> «беглый почерк»

Рекомендации по использованию
  • закрывающий тег обязателен (</i>)
  • может содержать CDATA и строчные элементы
  • обязательных атрибутов нет
  • тег <i> по умолчанию отображает текст курсивом
  • аналог CSS — font-style: italic (т.к. этот тег не несет никакой смысловой нагрузки, по возможности используйте CSS, избегайте дополнительных тегов)

Твой код:

<html>
<head>
<title></title>
</head>
<body>

<p>Курсив от лат. <i>cursiva littera</i> «беглый почерк»
</p>

</body>
</html>
Сделай код и жми тут

Результат:

большой полигон

Должен ли я использовать тег для иконок вместо ? [закрыто]

Я тут немного запрыгнул, но наткнулся на эту страницу, когда обдумывал ее сам. Конечно, я не знаю, как Facebook или Twitter оправдали это, но вот мой собственный мыслительный процесс того, что он стоит.

В конце концов, я пришел к выводу, что эта практика не так уж бессмысленна (это слово?). На самом деле, помимо краткости и приятной ассоциации «я для иконы», я думаю, что это самый семантический выбор для иконы, когда простой <img>тег не практичен.

1. Использование соответствует спецификации.

Хотя это, возможно, и не то, что в основном имел в виду W3, мне кажется, что официальная спецификация <i>вполне может вместить иконку. В конце концов, символ стрелки ответа говорит «ответить» по-другому. Он выражает технический термин, который может быть незнаком для читателя и обычно выделяется курсивом. («Здесь, в Twitter, это то, что мы называем стрелкой ответа ».) И это термин из другого языка: символический язык.

Если бы вместо символа стрелки Twitter использовал <i>shout out</i>или <i>[Japanese character for reply]</i>(на английской странице), это соответствовало бы спецификации. Тогда почему нет <i>[reply arrow]</i>? (Я говорю здесь строго о семантике HTML, а не о доступности, к которой я доберусь.)

Насколько я вижу, единственная часть спецификации, явно нарушенная использованием значков, — это фраза «span of text» (когда тег также не содержит текста). Понятно, что <i>тег в основном предназначен для текста, но это довольно маленькая деталь по сравнению с общим назначением тега. Важный вопрос для этого тега заключается не в том, какой формат содержимого он содержит, а в том, что означает этот контент.

Это особенно верно, если учесть, что грань между «текстом» и «значком» может практически отсутствовать на веб-сайтах. Текст может больше походить на иконку (как в примере с Японией), либо иконка может выглядеть как текст (как на кнопке jpg с надписью «Отправить» или фотография кошки с наложенной надписью), либо текст может быть заменен или расширен с помощью изображение с помощью CSS. Текст, изображение — кого это волнует? Это все содержание. До тех пор, пока все — люди с нарушениями, браузеры с нарушениями, поисковики и другие машины различного типа могут понять этот смысл, мы выполнили свою работу.

Таким образом, тот факт, что авторы спецификации не думали (или не решили) уточнить это, не должны связывать нам руки с тем, что имеет смысл и соответствует духу тега. Первоначально <a>тег был предназначен для того, чтобы перевести пользователя куда-то еще, но теперь он может появиться в лайтбоксе. Большой возглас, верно? Если бы кто-то выяснил, как открыть лайтбокс при нажатии, прежде чем спецификация вступила в действие, ему все равно следовало бы использовать <a>тег, а не a <span>, даже если он не полностью соответствовал текущему определению — потому что он подошел ближе всего и был по-прежнему соответствует духу тега («что-то произойдет, когда вы нажмете здесь»). То же самое с <i>любым типом вещи, которую вы положили в нее, или как бы творчески вы ее не использовали,

2. <i>Тег добавляет смысловой смысл к элементу значка.

Альтернативный вариант для переноса класса значков сам по себе <span>, который, конечно, не имеет никакого семантического значения. Когда машина спрашивает, <span>что в ней содержится, она говорит: «Я не знаю. Может быть что угодно». Но <i>тег говорит: «У меня есть другой способ сказать что-то, чем обычный, или, может быть, незнакомый термин». Это не то же самое, что «У меня есть значок», но это гораздо ближе к этому, чем <span>получил!

3. В конце концов, общее использование делает правильно.

В дополнение к вышесказанному, стоит учесть, что читатели машин (будь то поисковая система, программа для чтения с экрана или что-то еще) могут в любой момент начать учитывать, что Facebook, Twitter и другие веб-сайты используют <i>тег для значков. Они не заботятся о спецификации так же сильно, как об извлечении значения из кода любыми необходимыми средствами. Таким образом, они могут использовать это знание обычного использования, чтобы просто записать, что «здесь может быть иконка», или сделать что-то более продвинутое, например, запустить просмотр CSS для подсказки к значению, или кто знает что. Поэтому, если вы решите использовать <i>значки for на своем веб-сайте, вы можете придать больше значения, чем спецификация.

Более того, если это использование станет широко распространенным, оно, вероятно, будет включено в спецификацию в будущем. Затем вы будете проходить через ваш код, заменяя <span>s <i>на s! Поэтому, возможно, имеет смысл принять на вооружение то, что кажется направлением спецификации, особенно когда это явно не противоречит текущей спецификации. Общее использование имеет тенденцию диктовать языковые правила больше, чем наоборот. Если вы достаточно взрослый, помните ли вы, что «веб-сайт» был официальным написанием, когда слово было новым? Словари настаивают на том, что должно быть место, а сеть должна быть написана заглавными буквами. Для этого были семантические причины. Но обычное использование говорит: «Что угодно, это глупо. Я использую« сайт », потому что он более лаконичен и выглядит лучше». И вскоре

4. Так что я иду вперед и использую это.

Таким образом, <i>дает больше смысла машинам из-за спецификаций, он дает больше смысла людям, потому что мы легко связываем «i» со «значком», а длина его всего одна буква. Выиграть! И если вы обязательно включите эквивалентный текст либо внутри <i>тега, либо прямо рядом с ним (как это делает Твиттер), тогда программы чтения с экрана поймут, куда нажимать, чтобы ответить, ссылку можно использовать, если CSS не загружается, и читатели-люди с хорошим зрение и приличный браузер видят симпатичную иконку. Учитывая все это, я не вижу обратной стороны.

Тег I




БраузерInternet ExplorerNetscapeOperaSafariMozillaFirefox
Версия5.56.07.06.07.08.07.08.09.01.01.71.02.0
ПоддерживаетсяДаДаДаДаДаДаДаДаДаДаДаДаДа


HTML:3.24XHTML:1.01.1

Описание

Устанавливает курсивное начертание шрифта. Допустимо использовать этот тег
совместно с другими тегами, которые определяют начертание текста.

Синтаксис

<i>Текст</i>

Закрывающий тег

Обязателен.

Параметры

Нет.

Аналог CSS

font-style: italic

Пример 1. Использование тега <I>

Тег I

<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>

Результат данного примера продемонстрирован на рис. 1.

Рис. 1. Вид курсивного текста

Примечание

Хотя использование тега <I> не осуждается в
HTML 4, применение стилей предоставляет больше возможностей по управлению начертанием
текста.

Тег i в HTML. Применение элемента для выделения курсивом

Что делает тег <i> в HTML?

Элемент <i> используется, чтобы отметить слова в окружающем тексте, выделяя текст курсивом. Тег <i> по сути является типографским элементом и является встроенным (не блочным). Это означает, что его следует использовать для разметки нескольких слов или фраз.

Элемент i используется чтобы отметить слова в окружающем тексте, <i>выделяя текст</i> курсивом.

<i> или <em>?

Элемент <i> выделяет текст курсивом. Элемент <em> указывает на текст, выделенный курсивом. Так в чем разница? Элемент <em> делает акцент на тексте, а элемент <i> означает, что текст должен быть просто выделен курсивом. Итак, когда вы должны использовать одно, а когда другое? Существуют правила выделения текста: если вы хотите акцентировать внимание на части текста, вы должны использовать элемент <em>; если курсив зависит только от стиля (латинское типографское сокращение), вам необходимо использовать элемент <i>.

Элемент i <i>выделяет текст</i> курсивом. <p>Элемент em <em>указывает на текст</em>, выделенный курсивом.</p>

И не забывайте <dfn>

Элемент определения <dfn>, который используется для разметки слова или фразы в тексте, также по умолчанию выделяет текст курсивом. Однако правила использования этого элемента вместо <i> намного проще. Его следует использовать только при разметке определяемого слова.

Элемент определения dfn, который используется для разметки <dfn>слова или фразы</dfn> в тексте.

Long-form курсив

Иногда желательно выделить курсивом несколько строк текста. Это может быть краткое введение в содержание, примечание для читателя, «мелкий шрифт» того или иного вида. Здесь также следует избегать элемента <i>. Если вы хотите выделить курсивом весь абзац, присвойте ему определенный class или id и используйте CSS.

<p>Иногда желательно выделить курсивом несколько строк текста. Это может быть краткое введение в содержание, примечание для читателя, «мелкий шрифт» того или иного вида.</p>
<p>Здесь также следует избегать элемента i. Если вы хотите выделить курсивом весь абзац, присвойте ему определенный class или id и используйте CSS.</p>

p {
  font-style: italic;
}

html — Тег ‘i’ автоматически конвертируется в тег ’em’ в Business Catalyst

У меня проблемы с форматированием / переписыванием веб-сайта, который я редактирую с помощью Business Catalyst с Adobe.

Например, каждый раз, когда я заполняю поле значком;

<div><i></i></div>

Я сохраняю файл в панели их системного администрирования, и он преобразует класс значков в em.

Таким образом, конечный результат

<div><em></em></div>

Это удаляет значок полностью.

4

Tom Hutchison

3 Июл 2017 в 10:14

2 ответа

Лучший ответ

Предполагая, что вы используете представление WYSIWYG в формате HTML, вместо этого используйте вкладку Разработка в фоновом режиме Business Catalyst для редактирования HTML. Кроме того, если вы используете старый редактор WYSIWYG, попробуйте обновить его до новой версии на партнерском портале.

Несмотря на то, что достаточно всего отредактировать на вкладке «Разработка» в фоновом режиме Business Catalyst, использование текстового редактора для редактирования содержимого HTML и клиента SFTP для его загрузки — отличные идеи.

13

mplungjan
18 Фев 2018 в 10:31

Проблема заключается в том, что вы используете неправильный тег. Тег <i> предназначен для альтернативного тона / голоса, обычно отображаемого курсивом. Он не обозначает иконки. Административная панель Business Catalyst преобразует тег курсива в тег выделения <em>, поскольку выделение исторически было предпочтительным тегом и также обычно представлено курсивом. См. Спецификации для <em> и <i> теги.

Кроме того, согласно этому сообщению на форуме Adobe, если вы используете Font Awesome, {{X0 Тег}} не имеет правил CSS, и <span> будет предпочтительным тегом.

Таким образом, правильная разметка будет:

<div><span></span></div>

0

Herb Wolfe
19 Фев 2018 в 05:39

Основные теги, заголовки.

Урок 6.

В этом уроке мы разберем основные теги html применяемые к тексту, а именно теги &ltb&gt, &lti&gt, &ltu&gt, &lts&gt, &ltcenter&gt, &ltp&gt, &lth2&gt, &lth3&gt, &lth4&gt, &lth5&gt, &lth5&gt, &lth6&gt.

Тег &ltb&gt — делает шрифт жирным (мы уже сталкивались с этим тегом).
Тег &lti&gt — делает шрифт курсивным.
Тег &ltu&gt — подчеркивает текст.
Тег &lts&gt — зачеркивает текст.

* Все эти теги требуют закрытия. Впредь, если я не буду ничего говорить про закрытие тега, то это будет означать, что тег требует закрытия (как сейчас) и это само собой разумеется. Когда мы будем затрагивать теги исключения которые не требуют закрытия, то я обязательно буду это указывать.

Теперь давайте применим теги в нашем коде:

Мы используем в коде все четыре рассматриваемых тега, а так же тег &ltbr&gt который служит для переноса строки. Мы его применяем таким образом, чтобы наши четыре слова были написаны не в строку, а в столбик.
Результат:

Теперь познакомимся с еще одним новым тегом &ltcenter&gt. Данный тег выравнивает текст по центру. Давайте применим его в нашем коде и выровним по центру, например, слово «радость». После внесения изменений наш код выглядит так:

Сохраняем изменения в Notepad (Ctrl + S) и смотрим результат в браузере:

Еще давайте разберем распространенный тег &ltp&gt. Данный тег называют параграфом, но используется он для разделения текста не на параграфы, а на абзацы. Вначале каждого отдельного абзаца ставится открывающий тег &ltp&gt, в конце абзаца ставится закрывающий тег &lt/p&gt. Демонстрировать Вам рисунок с примером не вижу смысла, так как все из Вас читали книги и газеты, соответственно что такое абзац Вы знаете.

В данном уроке было бы логично рассмотреть тег &ltfont&gt, но мы уже уделили ему должное внимание в 4-ом уроке. Я советую Вам еще раз пробежаться глазами по практической части 4-го урока, это не будет лишним.

Заголовки html.

Теги &lth2&gt, &lth3&gt, &lth4&gt, &lth5&gt, &lth5&gt, &lth6&gt — это заголовки разных уровней. Значимость заголовков соответствует названию тегов. &lth2&gt — самый важный, &lth6&gt — не особо важен, можно обойтись и без него. Давайте применим на практике все 6 вариантов, чтобы Вы поняли принцип их работы. Пишем следующий html код:

Сохраняем изменения и открываем файл в браузере.

Заголовки отличаются друг от друга по размеру, чем заголовок важнее, тем он больше. И еще, для того чтобы заголовок писался на новой строке, тег &ltbr&gt (перенос строки) использовать не нужно.

Правила использования заголовков html.

С точки зрения оптимизации Вашей страницы для поисковых систем (Яндекс, Гугл и др.) есть несколько правил и рекомендаций.
1. Самое важное правило: тег &lth2&gt (заголовок 1-го уровня) используется в тексте только один раз и в самом начале статьи. Наличие тега &lth2&gt обязательно. Например, страница на которой Вы сейчас находитесь, имеет заголовок &lth2&gtУрок 6. Основные теги html.&lt/h2&gt
2. Тег &lth3&gt нужно использовать минимум 2 раза, максимум 5.
3. Тег &lth4&gt используется по необходимости.
4. Теги &lth5&gt, &lth5&gt, &lth6&gt можно не использовать вообще (на Ваше усмотрение).
5. Заголовки нужно использовать в строгом порядке. Сначала &lth2&gt, затем &lth3&gt, потом &lth4&gt. Другими словами заголовок &lth4&gt не может находиться выше, чем заголовок &lth3&gt.

Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]

ВАДИМ, ТЫ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГ, Я ХОЧУ ОТБЛАГОДАРИТЬ ТЕБЯ

HTML Tag »

Раскрытие: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице. Подробнее

Элемент
Узнайте, как шрифты и веб-типографика работают в HTML: руководство для начинающих
Что делает HTML Tag ?
Элемент используется, чтобы отличать слова от окружающего текста, выделяя выделенный текст курсивом без дополнительного выделения выделенных курсивом слов.
Display
inline
Usage
textual

Code Example 

  
 Элемент  & lt; i & gt;  используется для  курсива .

Элемент используется для курсивом .

по сравнению с

Элемент превращает текст в окружении в курсивом .Элемент обозначает текстовое выделение , которое передается как текст , выделенный курсивом . Так в чем разница? Элемент означает что-то , а элемент вообще ничего не означает, кроме того, что текст должен быть выделен курсивом. Итак, когда вы должны использовать одно, а когда другое? Существует несколько жестких правил, если они вообще есть, но, вообще говоря, если вы хотите, чтобы выделил какой-то текст , вы должны использовать элемент .С другой стороны, если курсив имеет значение только для стиля (, например, , латинское типографское сокращение), вы можете предпочесть использовать элемент .

И не забывайте

Элемент определения ( ), который используется для разметки слова или фразы, определенной в окружающем тексте, также выделяет текст курсивом. по умолчанию. Однако правила использования этого элемента вместо намного проще.Его следует использовать только при разметке определяемого слова.

Длинный курсив

Иногда желательно выделить несколько строк текста курсивом. Это может быть краткое введение в содержание, примечание для читателя, «мелкий шрифт» того или иного вида. Как правило, вы также должны избегать здесь элемента . Элемент , по сути, является типографским элементом и является встроенным (не блоком).Это означает, что его следует использовать для разметки нескольких слов или фраз в более широком контексте. Если вы хотите выделить курсивом весь абзац, присвойте ему конкретный class или id и используйте CSS.

Адам — ​​технический писатель, специализирующийся на документации и учебных пособиях для разработчиков. Поддержка браузера

для i

html — Следует ли использовать тег для значков вместо?

Я запрыгнул сюда немного поздно, но наткнулся на эту страницу, когда размышлял над ней сам. Конечно, я не знаю, как Facebook или Twitter оправдывали это, но вот мой собственный мыслительный процесс того, чего оно стоит.

В конце концов, я пришел к выводу, что эта практика не так уж бессмысленна (это слово?). Фактически, помимо краткости и приятной ассоциации «i для значка», я думаю, что на самом деле это наиболее семантический выбор для значка, когда простой тег нецелесообразен.

1. Использование соответствует спецификации.

Хотя, возможно, это не то, что в основном имел в виду W3, мне кажется, что официальная спецификация для может довольно легко разместить значок.В конце концов, стрелка ответа означает «ответить» по-другому. Он выражает технический термин, который может быть незнаком читателю и обычно выделяется курсивом. («Здесь, в Твиттере, это то, что мы называем стрелкой ответа ».) И это термин из другого языка: язык символов.

Если вместо символа стрелки Twitter использовал выкрикнуть или [японский символ для ответа] (на странице на английском языке), это будет соответствовать спец.Тогда почему не [стрелка ответа] ? (Я говорю здесь строго о семантике HTML, а не о доступности, о которой я расскажу.)

Насколько я могу судить, единственная часть спецификации, которая явно нарушается при использовании значков, — это фраза «диапазон текста» (когда тег также не содержит текста). Понятно, что тег в основном предназначен для текста, но это довольно маленькая деталь по сравнению с общим назначением тега. Важный вопрос для этого тега не в том, какой формат содержимого он содержит, а в том, каково значение этого содержимого.

Это особенно верно, если учесть, что граница между «текстом» и «значком» может практически отсутствовать на веб-сайтах. Текст может больше походить на значок (как в японском примере), или значок может выглядеть как текст (как в кнопке jpg с надписью «Отправить» или фотографии кошки с наложенной подписью), или текст может быть заменен или улучшен с помощью изображение через CSS. Текст, изображение — кого это волнует? Это все содержание. Пока все — люди с ограниченными возможностями, браузеры с нарушениями, пауки поисковых систем и другие машины различного типа могут понимать это значение, мы сделали свою работу.

Таким образом, тот факт, что авторы спецификации не подумали (или не решили) прояснить это, не должен связывать наши руки с тем, чтобы делать то, что имеет смысл и соответствует духу тега. Тег изначально предназначался для перенаправления пользователя в другое место, но теперь он может выскакивать в лайтбокс. Большой возглас, правда? Если бы кто-то придумал, как открывать лайтбокс при нажатии до того, как будет достигнута спецификация, ему все равно следовало бы использовать тег , а не , даже если он не полностью соответствовал текущее определение — потому что оно подошло ближе всего и все еще соответствовало духу тега («что-то произойдет, когда вы щелкнете здесь»).То же самое и с — какие бы вещи вы в него не поместили или как бы творчески вы их ни использовали, он выражает общую идею альтернативного или отдельного термина.

2. Тег добавляет семантическое значение к элементу значка.

Альтернативный вариант переноса класса значка сам по себе — , который, конечно, не имеет никакого семантического значения. Когда машина спрашивает , что в ней содержится, она отвечает: «Я не знаю.Может быть что угодно ». Но тег говорит:« Я использую другой способ сказать что-то, чем обычно, или, может быть, незнакомый термин ». Это не то же самое, что« У меня есть значок », но это намного ближе, чем !

3. В конце концов, обычное использование приносит пользу.

В дополнение к вышесказанному, стоит учесть, что машинные считыватели (будь то поисковая система, программа чтения с экрана или что-то еще) могут в любой момент начать учитывать, что Facebook, Twitter и другие веб-сайты используют тег для иконы.Они не заботятся о спецификации настолько, насколько они заботятся об извлечении смысла из кода любыми необходимыми средствами. Таким образом, они могут использовать эти знания об обычном использовании, чтобы просто записать, что «здесь может быть значок», или сделать что-то более сложное, например, запустить просмотр CSS для подсказки значения, или неизвестно что. Поэтому, если вы решите использовать для значков на своем веб-сайте, вы можете придать большее значение, чем это предусмотрено в спецификации.

Более того, если это использование получит широкое распространение, оно, вероятно, будет включено в спецификацию в будущем.Затем вы пройдете свой код, заменив s на ! Так что может иметь смысл придерживаться того, что кажется направлением спецификации, особенно когда это явно не противоречит текущей спецификации. Обычное использование, как правило, диктует языковые правила больше, чем наоборот. Если вы достаточно стары, помните ли вы, что «веб-сайт» было официальным написанием, когда это слово было новым? Словари настаивали на том, что в них должен быть пробел, а в Интернете должны быть заглавные буквы.На то были смысловые причины. Но обычное употребление говорило: «Как бы то ни было, это глупо. Я использую« веб-сайт », потому что он более краткий и выглядит лучше». И вскоре словари официально признали это написание правильным.

4. Итак, я собираюсь использовать его.

Итак, дает больше смысла машинам из-за спецификации, он дает больше смысла для людей, потому что мы легко связываем «i» со «значком», и — это всего лишь одна буква.Выиграть! И если вы обязательно включите эквивалентный текст либо внутри тега , либо рядом с ним (как это делает Twitter), тогда программы чтения с экрана поймут, где нажать, чтобы ответить, ссылка будет использоваться, если CSS не загружается, а читатели с хорошим зрением и приличным браузером видят симпатичную иконку. Учитывая все это, я не вижу обратной стороны.

html — атрибут Alt или title для тега i

С развитием WAI-ARIA при использовании значков шрифтов вам, вероятно, следует использовать комбинацию следующих элементов для улучшения доступности:

Авторы МОГУТ с осторожностью использовать aria-hidden , чтобы скрыть видимый рендеринг
контент из вспомогательных технологий, только если скрыть это
контент предназначен для улучшения работы пользователей вспомогательных
технологии путем удаления избыточного или постороннего контента. Авторы
использование aria-hidden для скрытия видимого содержимого от программ чтения с экрана ДОЛЖНО
убедиться, что идентичное или эквивалентное значение и функциональность
подвержены вспомогательным технологиям.

Я не знаю вашего точного варианта использования, поэтому беру на себя смелость использовать более простой случай предоставления номера телефона. В порядке убывания предпочтения I будет использовать:

  
  
  +33 7 1234576


(или любой другой вариант, подразумевающий:
  - элемент `i` с атрибутом представления` role`
    вместо внутреннего элемента `span`
  - атрибут `title` вместо атрибута` aria-label`)
  
  <диапазон
  aria-label = "Наш номер телефона"> + 33 7 1234576 

(или любой вариант с использованием `title` вместо` aria-label`)
  
   + 33 7 1234576 

(или любой вариант с использованием `title` вместо` aria-label`)

Обратите внимание, что атрибуты aria-label и title должны описывать содержимое элемента.Не следующий родственный элемент. Итак, I чувствую, что следующее решение — это , а не в соответствии со спецификациями (даже если большинство инструментов обеспечения доступности фактически будут иметь такое же наблюдаемое поведение, как если бы номер телефона фактически находился внутри элемента span ):

  <диапазон
  title = "Наш номер телефона">  +33 7 1234576

HTML: тег

В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом , с синтаксисом и примерами.

Описание

Тег HTML просто придает тексту курсивный вид, но не придает тексту никакого семантического значения. Этот тег также обычно называют элементом .

СОВЕТ: Тег HTML не следует путать с тегом , который отмечает текст с акцентом на ударение.

Синтаксис

В HTML синтаксис тега :

  <тело>

  Текст, выделенный курсивом, идет здесь , но не здесь

Пример вывода

Атрибуты

К тегу применяются только глобальные атрибуты.Для тега нет атрибутов.

Примечание

Совместимость с браузером

Тег имеет базовую поддержку в следующих браузерах:

Пример

Мы обсудим тег ниже, исследуя примеры использования тега в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.

Документ HTML5

Если вы создали новую веб-страницу в HTML5, ваш тег может выглядеть так:

  




 Пример HTML5 от www.techonthenet.com 




 Заголовок 1 


 Мы хотим выделить  этот текст  курсивом.

В этом примере документа HTML5 мы создали тег , который включает текст «этот текст», который будет отображаться курсивом.

HTML 4.01 Переходный документ

Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег может выглядеть так:

  




 Переходный пример HTML 4.01 от www.techonthenet.com 




 Заголовок 1 


 Мы хотим выделить  этот текст  курсивом.

В этом примере переходного документа HTML 4.01 мы создали тег , который включает текст «этот текст», который будет отображаться курсивом.

Переходный документ XHTML 1.0

Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег может выглядеть так:

  




 Переходный пример XHMTL 1.0 от www.techonthenet.com 




 Заголовок 1 


 Мы хотим выделить  этот текст  курсивом.

В этом примере переходного документа XHTML 1.0 мы создали тег , который включает текст «этот текст», который будет отображаться курсивом.

Строгий документ XHTML 1.0

Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег может выглядеть так:

  




 Строгий пример XHTML 1.0 от www.techonthenet.com 




 Заголовок 1 


 Мы хотим выделить  этот текст  курсивом.

В этом примере XHTML 1.0 Strict Document мы создали тег , который включает текст «этот текст», который будет отображаться курсивом.

XHTML 1.1 Документ

Если вы создали новую веб-страницу в XHTML 1.1, ваш тег может выглядеть так:

  




 XHTML 1.1, пример с сайта www.techonthenet.com 




 Заголовок 1 


 Мы хотим выделить  этот текст  курсивом.

В этом примере документа XHTML 1.1 мы создали тег , который включает текст «этот текст», который будет отображаться курсивом.

Разница между тегами и в HTML

Разница между тегами и в HTML

1. tag:
Это один из элементов HTML, который используется при форматировании текстов HTML. Он используется для определения текста в технических терминах, альтернативном настроении или голосе, мысли и т. Д.

Синтаксис: 

  Content ...

2. Тег :
Это также один из элементов HTML, используемых при форматировании текстов. Он используется для обозначения выделенного текста или утверждений.

Синтаксис: 

  Содержимое...

По умолчанию визуальный результат такой же. Основное различие между этими двумя тегами заключается в том, что тег семантически подчеркивает важное слово или раздел слов, в то время как тег представляет собой просто смещенный текст, традиционно выделенный курсивом, чтобы показать альтернативное настроение или голос. Ниже приведен код, демонстрирующий разницу между ними:

Пример-1:

HTML

< html >

< голова >

< заголовок > b Тег заголовок >

< стиль >

body {

выравнивание текста: по центру;

}

h2 {

цвет: зеленый;

}

стиль >

головка >

< корпус >

< h2 > GeeksforGeeks h2 >

< p > < i > Железный человек i > герой. p >

< p > Gfg - < em > лучший em > образовательный сайт. p >

корпус >

html >

Выход:

Здесь есть Никакого дополнительного акцента или важности слову «Железный человек».Здесь это просто указывает на то, что железо не является минералом или металлом, а относится к персонажу. Но в следующем предложении читатель будет использовать словесное ударение на слове «лучший».

Пример-2:

HTML

< html lang = "en" dir = «ltr» >

< head >

< meta charset = «utf-8» >

< title > Разница между тегами < i > и < em > HTML title >

head >

< кузов >

< h2 > < i > Этот сенет курсивом i > h2 >

< h2 >

< em > Это предложение выделено имея в виду. em > h2 >

body >

html >

Вывод:

Хотя они кажутся одинаковыми, но семантическое значение различается.
Поддерживаемый браузер: Браузеры, поддерживаемые тегами и , перечислены ниже.