Задание верхних и нижних индексов в HTML. Как сформировать математическую формулу?

задание верхних и нижних индексов в html. как сформировать математическую формулу?

Что такое индексы и где они применяются?

Иногда, при составлении HTML-разметки возникает потребность сместить часть символов выше или ниже основной линии текста. Элементы, отвечающие за такой функционал, соответственно называются верхний и нижний индексы.

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

Заметка
Поднять или опустить участок текста можно не только с помощью индексов. Для этого строка выделяется элементом <span>, которому задается нужное отображение с помощью CSS.

Использование верхнего и нижнего индекса

Чтобы в разметке HTML-документа задать верхний индекс используйте элемент <sup>. Строки, помещенные между открывающим тегом <sup> и закрывающим </sup>, будут подняты над основной линией текста. При написании математических формул с помощью него можно осуществлять отображение степеней.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример использования верхнего индекса</title>
    </head>
    <body>
        <p>Формула площади квадрата: S = a<sup>2</sup></p>
    </body>
</html>

Для задания нижнего индекса существует элемент <sub>. Его использование аналогично верхнему индексу, с тем лишь отличаем, что выделенные строки будут опущены под основную линию текста. С помощью него можно указать количество атомов элементов в химических формулах.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример использования нижнего индекса</title>
    </head>
    <body>
        <p>Химическая формула воды: H<sub>2</sub>O</p>
    </body>
</html>
пример отображения верхнего и нижнего индексов в браузере
Рис. 1. Отображение текста с верхними и нижними индексами (из примеров)

Последние публикации