Как сделать верхний индекс в html

Верхний и нижний индекс

Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения смещения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: (от англ. superscript) — верхний индекс и (от англ. subscript) — нижний индекс. Текст, помещённый в один из этих контейнеров, обозначается меньшим размером, чем базовый текст, и смещается относительно него вверх или вниз. В примере 1 приведено совместное использование указанных элементов и стилей для изменения вида текста.

Пример 1. Создание верхнего и нижнего индекса

В примере одновременно встречается как нижний, так и верхний индекс. Для изменения начертания шрифта индекса применяются стили, которые задают единое оформление (рис. 1).

Рис. 1. Вид индексов после применения стилей

Можно вообще отказаться от использования и в пользу стилей. Аналогом этих элементов служит свойство vertical-align , заставляющее текст смещаться по вертикали на заданное расстояние. В частности, в примере 2 в качестве значения применяется 0.8em для верхнего индекса и -0.5em для нижнего. Em — это относительная единица, равная размеру текущего шрифта. Например, 0.5em говорит о том, что текст надо сдвинуть на половину размера шрифта.

Пример 2. Использование стилей для управления индексами

В примере сама формула выводится увеличенным размером, символы верхнего индекса устанавливаются красным цветом, а нижние — синим (рис. 2).

Рис. 2. Управление положением и видом нижнего и верхнего индекса

Использование элемента делает код громоздким, поэтому лучше переопределить стили и , в частности, задать положение индекса, цвет и курсивное начертание.

См. также

• vertical-align
• Блочные элементы
• Выравнивание картинок
• Продвинутая семантика и доступность
• Работа с текстом
• Строчные элементы

Как сделать верхний индекс в html

Отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

Синтаксис

Текст

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

Атрибуты

Аналог CSS

HTML5 IE Cr Op Sa Fx

      
Великая теорема Ферма
 
X n + Y n = Z n
 
где n - целое число > 2
  

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега

Статьи по теме

• Верхний и нижний индексы
• Форматирование текста

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Как сделать верхний индекс в html

Создание текста с верхним или нижним индексом

Чтобы создать верхний индекс, введите [@+text@#] , а чтобы создать нижний индекс, введите [@-text@#] , где text — это текст заметки для верхнего или нижнего индекса.

Можно сделать надстрочным или подстрочным простой текст и специальные символы; однако нельзя сделать подстрочными размеры, номера экземпляров, другие значения параметров или геометрические допуски. Можно создать верхний или нижний индекс в качестве отдельной заметки или включить его в строку текста, содержащую обычный текст, с любой его стороны и изменять независимо от остального текста в текстовой строке, в которой он появляется. Система позиционирует текст относительно ближайшей строки обычного текста, независимо от того, является ли этот текст частью другой надписи, или частью создаваемой в настоящий момент времени заметки.

Тег HTML верхний индекс

Тег в HTML используется для написания текста в виде верхнего индекса.

Текст внутри HTML тега будет выведен выше обычного текста строки, может иметь меньший размер шрифта.

Текст также можно писать в виде нижнего индекса. Для этого используйте тег .

Все виды выделения текста описаны в статье: Теги форматирования текста в HTML.

Синтаксис

текст в верхнем индексе

Отображение в браузере

Теорема Пифагора для прямоугольного треугольника: a 2 + b 2 = c 2 .

Пример использования в HTML коде

 
 
 
 
Теорема Пифагора для прямоугольного треугольника: a2 + b2 = c2.
 

Поддержка браузерами

Тег
	Да	Да	Да	Да	Да