Индекс HTML
Нижний индекс относится к стилю форматирования текста, при котором символы располагаются немного ниже обычной строки текста и обычно отображаются шрифтом меньшего размера. Примеры использования нижнего индекса включают:
- Химические формулы: H2O, CO2
- Математические обозначения: x1, y2
- Технические рекомендации: Aij
Как использовать индекс в HTML?
HTML-тег <sub> специально разработан для подстрочного текста. Он прост в использовании и поддерживается всеми основными браузерами.
Синтаксис
<sub>content</sub>
Использование подстрочного индекса в HTML
1. Химические формулы
Нижний индекс широко используется для обозначения количества атомов в химических соединениях.
В этом примере используется тег <sub> для индексов, представляющих элементы и их количества в соединениях.
2. Математические выражения
В этом примере тег <sub> опускает текст для обозначения индексов или переменных в математических уравнениях.
3. Технические обозначения
В этом примере тег <sub> используется для определения индексов технических терминов или для представления сносок.
Стилизация тега <sub> с помощью CSS
По умолчанию текст с нижним индексом меньше и располагается ниже базовой линии. Вы можете дополнительно настроить его внешний вид с помощью CSS
- размер шрифта: настраивает размер подстрочного текста относительно окружающего текста.
- цвет: Изменяет цвет текста для лучшей видимости.
- выравнивание по вертикали: обеспечивает правильное расположение подстрочного текста ниже базовой линии.
Лучшие практики
- Используйте семантически: используйте тег <sub> только тогда, когда текст должен отображаться в виде подстрочного индекса. Это улучшает семантический 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!
Similar Reads
- 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
- 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
- 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
- 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 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 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
- 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 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 Ins ObjectThe DOM ins Object is used to represent the HTML <ins> element. The ins element is accessed using getElementById().Properties: cite: It is used to set or return the value of the cite attribute of a inserted element.dateTime: It is used to sets or returns the value of the dateTime attribute of2 min read
- What is HTML?HTML, or Hypertext Markup Language, is used to create web pages. It defines the structure and content of web documents using tags and attributes to format text, embed images, create links, and build interactive elements. HTML facilitates communication between web browsers and servers, making it a cr6 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
- How to Define Subscripted Text in HTML?The subscripted text is defined using the <sub> element, which marks text that appears slightly below the normal line of text. This tag is commonly used for scientific and mathematical notations, chemical formulas (e.g., HâÂÂO), and footnotes. Syntax <sub> Content... </sub>Define Sub1 min read
- Introduction to HTMLHTML stands for Hypertext Markup Language. It is the most basic language, and simple to learn and modify. It is a combination of both hypertext and markup language. It contains the elements that can change/develop a web page's look and the displayed contents. Or we can say that HTML creates or defin6 min read
- HTML IntroductionHTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. HTML is a markup language, not a programming language, meaning it annotates text to define how it is structured and displayed by web browsers.It forms the building blocks of all we5 min read
- HTML DOM S ObjectThe S Object in HTML DOM is used to represent the HTML <s> element. This tag is used to specify that the text content is no longer correct or accurate. The <s> element can be accessed by using the getElementById() method. Syntax: document.getElementById("id"); Where id is assigned to the1 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
- History of JavaScriptBrendan Eich developed JavaScript, a computer language, in just ten days in May 1995. Initially called Mocha, then LiveScript, it finally became known as JavaScript. It was designed for the client-side of websites to add dynamic and interactive elements to static HTML pages. History of JavaScriptJav4 min read