- : The Superscript element
- Try it
- Attributes
- Usage notes
- Examples
- Exponents
- Result
- Superior lettering
- Result
- Ordinal numbers
- Result
- Technical summary
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- HTML Tag
- Browser Support
- Global Attributes
- Event Attributes
- Related Pages
- Default CSS Settings
- Example
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- Возведение в степень css
- Кратко
- Пример
- Как пишется
- Возведение в степень css
- Syntax
- Parameters
- Return value
- Formal syntax
- Examples
- Scale headings by fixed ratio
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- Верхний и нижний индекс
- См. также
: The Superscript element
The HTML element specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.
Try it
Attributes
This element only includes the global attributes.
Usage notes
The element should only be used for typographical reasons—that is, to change the position of the text to comply with typographical conventions or standards, rather than solely for presentation or appearance purposes.
For example, to style the wordmark of a business or product which uses a raised baseline should be done using CSS (most likely vertical-align ) rather than . This would be done using, for example, vertical-align: super or, to shift the baseline up 50%, vertical-align: 50% .
Appropriate use cases for include (but aren’t necessarily limited to):
- Displaying exponents, such as «x 3 .» It may be worth considering the use of MathML for these, especially in more complex cases. See Exponents under Examples below.
- Displaying superior lettering, which is used in some languages when rendering certain abbreviations. For example, in French, the word «mademoiselle» can be abbreviated «M lle «); this is an acceptable use case. See Superior lettering for examples.
- Representing ordinal numbers, such as «4 th » instead of «fourth.» See Ordinal numbers for examples.
Examples
Exponents
Exponents, or powers of a number, are among the most common uses of superscripted text. For example:
p> One of the most common equations in all of physics is var>Evar>=var>mvar >var>cvar>sup>2sup>. p>
Result
Superior lettering
Superior lettering is not technically the same thing as superscript. However, it is common to use to present superior lettering in HTML. Among the most common uses of superior lettering is the presentation of certain abbreviations in French:
p>Robert a présenté son rapport à Msup>llesup> Bernard.p>
Result
Ordinal numbers
Ordinal numbers, such as «fourth» in English or «quinto» in Spanish may be abbreviated using numerals and language-specific text rendered in superscript:
p> The ordinal number "fifth" can be abbreviated in various languages as follows: p> ul> li>English: 5sup>thsup>li> li>French: 5sup>èmesup>li> ul>
Result
Technical summary
Content categories | Flow content, phrasing content, palpable content. |
---|---|
Permitted content | Phrasing content. |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parents | Any element that accepts phrasing content. |
Implicit ARIA role | No corresponding role |
Permitted ARIA roles | Any |
DOM interface | HTMLElement |
Specifications
Browser compatibility
BCD tables only load in the browser
See also
- The HTML element that produces subscripts. Note that you cannot use sub and sup at the same time: you need to use MathML to produce both a superscript and a subscript next to the chemical symbol of an element, representing its atomic number and its nuclear number.
- The , , and MathML elements.
- The CSS vertical-align property.
Found a content problem with this page?
This page was last modified on Apr 13, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
HTML Tag
The tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW [1] .
Browser Support
Global Attributes
Event Attributes
Related Pages
Default CSS Settings
Most browsers will display the element with the following default values:
Example
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Возведение в степень css
Выводит надстрочный текст.
Время чтения: меньше 5 мин
Обновлено 8 сентября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Тег позволяет выводить надстрочный текст, например, в математических уравнениях: c 2 = a 2 + b 2 .
Пример
Скопировать ссылку «Пример» Скопировано
Чаще всего используется для вывода степеней в математических формулах.
Теорема Пифагора — одна из основополагающих теорем евклидовой геометрии c2 = a2 + b2.
p> Теорема Пифагора — одна из основополагающих теорем евклидовой геометрии csup>2sup> = asup>2sup> + bsup>2sup>. p>
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Помимо описанного выше примера, можно использовать тег внутри тега .
Квадрат суммы может быть вычислен как сумма квадратов слагаемых и их удвоенное произведение: (a + b)2 = a2 + 2*a*b + b2
p> Квадрат суммы может быть вычислен как сумма квадратов слагаемых и их удвоенное произведение: var>(a + b)sup>2sup> = asup>2sup> + 2*a*b + bsup>2sup>var> p>
var font-style: normal;>
var font-style: normal; >
Теги можно вкладывать друг в друга, тогда на каждом шаге текст будет подниматься вверх, а его размер будет уменьшаться.
Первый уровень второй уровень третий уровень четвёртый уровень
p> Первый уровень sup>второй уровень sup>третий уровень sup>четвёртый уровеньsup> sup> sup> p>
X 2 × log3(Z2)
p> var> X sup> 2 × logsub>3sub>(Zsup>2sup>) sup> var> p>
Возведение в степень css
The pow() CSS function is an exponential function that returns the value of a base raised to the power of a number.
The exp() function is a special case of pow() where the value of the base is the mathematical constant e.
Syntax
/* A value */ width: calc(10px * pow(5, 2)); /* 10px * 25 = 250px */ width: calc(10px * pow(5, 3)); /* 10px * 125 = 1250px */ width: calc(10px * pow(2, 10)); /* 10px * 1024 = 10240px */
Parameters
The pow(base, number) function accepts two comma-separated values as its parameters.
A calculation that resolves to a , representing the base.
A calculation that resolves to a , representing the exponent.
Return value
Formal syntax
=
pow( , )
=
[ [ ‘+’ | ‘-‘ ] ]*
=
[ [ ‘*’ | ‘/’ ] ]*
=
|
|
|
|
( )
=
e |
pi |
infinity |
-infinity |
NaN
Examples
Scale headings by fixed ratio
The pow() function can be useful for strategies like CSS Modular Scale, which relates all the font-sizes on a page to each other by a fixed ratio.
HTML
h1>Heading 1h1> h2>Heading 2h2> h3>Heading 3h3> h4>Heading 4h4> h5>Heading 5h5> h6>Heading 6h6>
CSS
h1 font-size: calc(1rem * pow(1.5, 4)); > h2 font-size: calc(1rem * pow(1.5, 3)); > h3 font-size: calc(1rem * pow(1.5, 2)); > h4 font-size: calc(1rem * pow(1.5, 1)); > h5 font-size: calc(1rem * pow(1.5, 0)); > h6 font-size: calc(1rem * pow(1.5, -1)); >
Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Apr 22, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Верхний и нижний индекс
Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения смещения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: (от англ. superscript) — верхний индекс и (от англ. subscript) — нижний индекс. Текст, помещённый в один из этих контейнеров, обозначается меньшим размером, чем базовый текст, и смещается относительно него вверх или вниз. В примере 1 приведено совместное использование указанных элементов и стилей для изменения вида текста.
Пример 1. Создание верхнего и нижнего индекса
В примере одновременно встречается как нижний, так и верхний индекс. Для изменения начертания шрифта индекса применяются стили, которые задают единое оформление (рис. 1).
Рис. 1. Вид индексов после применения стилей
Можно вообще отказаться от использования и в пользу стилей. Аналогом этих элементов служит свойство vertical-align , заставляющее текст смещаться по вертикали на заданное расстояние. В частности, в примере 2 в качестве значения применяется 0.8em для верхнего индекса и -0.5em для нижнего. Em — это относительная единица, равная размеру текущего шрифта. Например, 0.5em говорит о том, что текст надо сдвинуть на половину размера шрифта.
Пример 2. Использование стилей для управления индексами
В примере сама формула выводится увеличенным размером, символы верхнего индекса устанавливаются красным цветом, а нижние — синим (рис. 2).
Рис. 2. Управление положением и видом нижнего и верхнего индекса
Использование элемента делает код громоздким, поэтому лучше переопределить стили и , в частности, задать положение индекса, цвет и курсивное начертание.