0
Верхний индекс HTML
На чтение10 мин
Обновлено
Просмотров
Верхний индекс - это стиль форматирования текста, при котором символы располагаются немного выше обычной строки текста и обычно отображаются шрифтом меньшего размера. Примеры использования верхнего индекса включают:
- Показатели по математике: x2
- Химические изотопы: 14C
- Порядковые номера: 1-й, 2-й
Как использовать верхний индекс в HTML?
HTML-тег <sup> специально разработан для надстрочного текста. Он прост в использовании и поддерживается всеми основными браузерами.
Синтаксис
<sup>content</sup>Использование верхнего индекса в HTML
1. Математические выражения
В этом примере тег <sup> визуально увеличивает текст (например, экспоненты) для представления математических степеней.
2. Химические обозначения
В этом примере тег <sub> опускает текст, а <sup> увеличивает текст для эффективного представления химических формул и зарядов.
3. Порядковые номера
В этом примере тег <sup> отображает текст для создания надлежащих порядковых указателей
Стилизация тега <sup> с помощью CSS
По умолчанию надстрочный текст имеет меньший размер и выступает над базовой линией. Вы можете настроить его внешний вид с помощью CSS
- размер шрифта: настраивает размер надстрочного текста относительно окружающего текста.
- цвет: Изменяет цвет текста.
- выравнивание по вертикали: обеспечивает правильное расположение верхнего индекса.
Лучшие практики
- Используйте семантически: используйте тег <sup> только тогда, когда текст должен отображаться в виде верхнего индекса. Это улучшает семантический HTML и доступность.
- Комбинируйте с CSS: Обеспечьте единообразие внешнего вида надстрочного текста на вашей веб-странице, применив CSS.
- Специальные возможности: Используйте описательный текст или надписи ARIA, если значение верхнего индекса не сразу очевидно (например, для чтения с экрана).
Dive deep into the world of JavaScript with our JavaScript Full Course Online, offering everything from the basics to advanced techniques. Learn how to build interactive websites, optimize your code, and earn a certification to showcase your skills.
Take the Three 90 Challenge! Complete 90% of the course in 90 days, and earn a 90% refund. Push your limits and stay motivated as you work towards mastering JavaScript. Join now and get started on your JavaScript learning journey!
Improve
Article Tags :
Similar Reads
- HTML DOM Superscript ObjectThe superscript object in HTML DOM is used to represent the HTML <sup> element. The superscript element can be accessed by using getElementById(). Syntax: document.getElementById("id") Where id is assigned to the <sup> tag. Example: In this example, we will use DOM Superscript Object C/C1 min read
- HTML JavaScriptHTML JavaScript is the most popular programming language that helps to add interactivity and provides dynamic behavior. It is known as the client-side scripting language for web pages. JavaScript is used for various purposes, including DOM manipulation, asynchronous requests (AJAX), event handling,2 min read
- DHTML JavaScriptDHTML stands for Dynamic HTML. Dynamic means that the content of the web page can be customized or changed according to user inputs i.e. a page that is interactive with the user. In earlier times, HTML was used to create a static page. It only defined the structure of the content that was displayed3 min read
- JavaScript HTML DOMThe HTML DOM serves as a blueprint for webpages, outlining their structure and individual elements, using JavaScript it can dynamically access and modify the content, structure, and style of a webpage. We can access, modify, and delete the HTML elements via JavaScript. Table of Content What is DOM?F2 min read
- HTML | DOM Script ObjectThe DOM Script Object is used to represent the HTML <script> element. The script element is accessed by getElementById(). Properties: async: It is used to specify the script is executed asynchronously. charset: It is used to specify the character encoding used in an external script file. defer2 min read
- HTML DOM Subscript ObjectThe Subscript Object in HTML DOM is used to represent the HTML <sub> element. The subscript element can be accessed by using the getElementById() method. Syntax: document.getElementById("id") Where id is assigned to the <sub> tag. Example 1: In this example, we will use DOM Subscript Obj1 min read
- HTML Subscript and Superscript TagsIn HTML, the <sub> tag is used for subscript, making text appear slightly below the normal line, while the <sup> tag is used for superscript, positioning text slightly above the normal line. These tags are employed to format text in a way that is either lower or higher than the regular t3 min read
- HTML DOM Script text PropertyThe HTML DOM Script text Property is used to set or return the content of the <script> element. Syntax: It Returns the text property:scriptObject.textIt is used to set the text property:scriptObject.text = contents Property Values: It contains the value i.e contents that specify the content of2 min read
- JavaScript innerHTMLThe innerHTML property in JavScript is used to append the dynamic HTML or text content to an element using JavaScript. It is designed to add dynamic HTML, but developers also use it to add text content as well. It can be directly used with the element by selecting it using DOM manipulation. Syntax:s2 min read
- HTML ParagraphIn HTML, a paragraph (<p>) element is used to define a block of text. It is a structural element that creates a new paragraph, typically displaying text with a line break before and after. Syntax: <p>This is the first paragraph.</p> Example of HTML ParagraphExample: Here HTML with3 min read
- HTML DOM Script charset PropertyThe HTML DOM Script charset property is used to set or return the value of a charset attribute of an <script> element. The charset attribute is used to specify the character encoding used in an external script. Syntax: It returns the charset property. scriptObject.charsetIt is used to set the2 min read
- HTML Phrase TagPhrase Tag: In HTML, a phrase tag is used to indicate the structural meaning of a block of text. For example, abbr tag indicates that the phrase contains the abbreviation word. Some examples of phrase tags are abbr, strong, mark, . . . etc.Emphasized Text: The em tag is used to emphasize the text an4 min read
- HTML pre TagThe pre tag in HTML defines a block of preformatted text, preserving spaces, line breaks, and tabs. It displays text in a fixed-width font, which can be styled using CSS. This tag is useful for displaying code, formatted text, and preserving text layout. [GFGTABS] HTML <!DOCTYPE html> <html3 min read
- HTML TutorialHTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript10 min read
- How to Define Superscripted Text using HTML?Superscript text is used for footnotes, mathematical exponents, and other notations. To define superscripted text in HTML5, use the <sup> tag. This tag adds superscript text to your HTML document, displaying it half a character above the normal line and often in a smaller font. Syntax <sup1 min read
- Latest Version of HTMLThe latest version of HTML is HTML5, which stands for HyperText Markup Language. HTML5 enhances the capabilities of the web by introducing new elements, attributes, and behaviors. It allows for more dynamic and interactive web pages. HTML5 also includes improved support for multimedia, graphics, and2 min read
- PHP vs HTMLWhat is PHP? PHP stands for Hypertext Preprocessor. PHP is a server-side, scripting language (a script-based program) and is used to develop Web applications. It can be embedded in HTML, and it's appropriate for the creation of dynamic web pages and database applications. It's viewed as a benevolent2 min read
- HTML Input TypeHTML Input Element has various types that play an important role in creating HTML Forms, and the element is efficient in collecting user data and adding interactivity to web pages. These elements provide the feature to create an interactive web page. In the Input Element, there is an attribute type9 min read
- HTML DOM scripts CollectionThe DOM scripts Collection in HTML is used to return the collection of all <script> elements in an HTML document. The script elements are sorted as appear in the sourcecode. Syntax: document.scripts Property Value: It returns the single value length which is the collection of all script elemen2 min read