The index in relation to the text is the offset of characters from the baseline up or down. Depending on the positive or negative offset value, the index is called the top or bottom, respectively. They are actively used in mathematics, physics, chemistry and to designate units of measurement. HTML offers two elements for creating an index: (from English superscript) - superscript and (from English subscript) - subscript. Text placed in one of these containers is denoted smaller than the base text, and is shifted up or down relative to it. Example 1 shows sharing the specified elements and styles to change the appearance of the text.
Example 1. Create superscript and subscript
Characteristic equation of a surface of the second degree
λ 3- I 1λ 2+ I 2λ - I 3 = 0
The example contains both subscript and superscript at the same time. To change the font style of the index, styles are applied that set uniform design(fig. 1).
Rice. 1. View of indexes after applying styles
You can completely refuse to use and in favor of styles. An analogue of these elements is vertical-align property, forcing the text to move vertically by the specified distance. Specifically, Example 2 uses 0.8em for the superscript and -0.5em for the subscript as the value. Em is a relative unit equal to the size of the current font. For example, 0.5em means that the text should be shifted by half the font size.
Example 2. Using Styles to Manage Indexes
Degree polynomial n
f (x) = a 0+ a 1 x + ... + a n-1 x n-1+ a n x n
In the example, the formula itself is displayed in an enlarged size, the superscript characters are set in red, and the lower ones - in blue (Fig. 2).
HTML Tags and - Subscript and Superscript Text
Definition and Use
Tag defines subscript text. The subscript is half the height and appears below the baseline. Subscript can be used when writing chemical formulas such as H 2 O.
Tag defines superscript text. Superscript text is half the height and appears above the baseline. Superscript can be used when writing footnotes like WWW.
Browser Support
Tags: and supported by all major browsers.
Differences Between HTML and XHTML
Standard Attributes
Column DTD specifies in which document type HTML 4.01 / XHTML 1.0 DTD the attribute is allowed. S = Strict, T = Transitional and F = Frameset.
Tags: and support the following standard attributes:
| Attribute | Meaning | Description | DTD |
|---|---|---|---|
| class | class_name | Specifies the class name for an element | STF |
| dir | rtl ltr |
Specifies the text direction for content in an element | STF |
| id | identifier | Specifies a unique identifier for an item | STF |
| lang | language_code | Specifies the language code for the content of an element | STF |
| style | style_definition | Specifies an inline style for an element | STF |
| title | text | Indicates Additional information about item | STF |
| xml: lang | language_code | Defines the language code for element content in XHTML documents | STF |
Learn more about Standard Attributes.
Event Attributes
Tags: and support the following event attributes:
| Attribute | Meaning | Description | DTD |
|---|---|---|---|
| onclick | script | Mouse-clicked script | STF |
| ondblclick | script | Double-clicked script | STF |
| onmousedown | script | Script to run on mouse click | STF |
| onmousemove | script | Script to run when the mouse pointer is moved | STF |
| onmouseout | script | Script to run when the mouse moves outside of the element | STF |
| onmouseover | script | Script to run when the mouse moves over an element | STF |
| onmouseup | script | Script to run when the mouse button is released | STF |
| onkeydown | script | Script to run when a key is pressed | STF |
| onkeypress | script | Script to run when a key is pressed and then released | STF |
| onkeyup | script | Script to run when a key is released | STF |
Additional information about
Hello. Sometimes, when creating web pages, it is necessary to set some words with using css uppercase or superscript position. Let's see how this is done.
Upper and lower case with css
In general, even today, you can enclose the desired text in tags and get the display you want, but let's also see how this can be done with css, because the technique is slightly different.
For example, you need to write the formula H 2 O in an html document. This is done like this:
- The formula itself is written
- Those words and numbers that need to be displayed in the superscript or subscript are enclosed in a span tag, which needs to be assigned a class. For example: characters to be output
- In css, you need to set this element:
Top-index (
Vertical-align: super;
}
This property is responsible for the vertical alignment of the text. Its super value specifies that the text is displayed as superscript. But the font size remained the same as that of regular text. To make things look nicer, you also need to set the font size slightly smaller using the font-size property.
This is how the property simply works. Accordingly, to display in subscript, you need to write like this:
Top-index (
Vertical-align: sub;
}
The difference from similar html tags is that these rules do not change the font size, so if you need to do this, you will have to register new size in the stylesheet.
That's all you need to know about superscript and subscript in css. The property does not provide any additional opportunities, and they are not needed either. If you wish, you can somehow customize this text, but this is rarely necessary.
Where can it come in handy
Superscript and subscript text can be used when writing formulas, adding notes and marks to articles. For example, Wikipedia lists sources and notes for each article. In the course of the article, they are placed in the form of small superscripts. This does not annoy readers and at the same time allows you to give the articles the desired look.
The property is fully cross-browser and supported in all versions of CSS.
CSS allows flexible customization of the text that is presented using the HMTL language. Today we will look at the effect of the "text-transform" property, which makes it possible to change the case of the font. This option is supported by all modern browsers and is included in the specification of all CSS versions.
Appointment
The "text-transform" property can take three main values and two additional ones. For example, you can assign an upper case to all selected text. Or you can give a command to the opposite of the previous property, where all characters become lowercase. You can make an appointment using any method convenient for you. For example, using inline styles. Or you can create
A separate file with a description of all properties. Which way of assignment to use is up to you. "Text-transform" can take the following values:
- Uppercase. Capitalizes all selected characters. Uppercase is common in CSS, as this value can help solve many complex text-related problems.
- Lowercase. This property is completely opposite to the uppercase command.
- Capitalize. Changes the case of the first letter to uppercase. The rest of the characters will not be changed.
- None. Allows you to discard all assigned values (needed to predefine a property). Typically, this value is set by default.
- Inherit. Inherits all properties from parent element... It should be noted that IE does not support this property.
Application
WITH using CSS uppercase (or similar effects) are set with one simple command. Therefore, there is no need to change or rewrite the entire text. If we are talking about a one-page site, then this property may not be useful. But when you control a huge portal where you need to correct the case of letters in certain fragments, then "text-transform" becomes the only one effective remedy... For example, you need to fix the font in the "h2" heading tags. To do this, add the following entry: "h2 (text-transform: uppercase;)", and then all headers of the second level will be uppercase.
Peculiarities
Some may think that manual text manipulation and font change using the "text-transform" property makes no difference. But this is not the case. If you change it manually to uppercase (uppercase), then when you copy this information from your site, the characters will remain unchanged. If you use CSS, things are different. The "text-transform" property only visually changes the font for users. But in reality, the symbols remain unchanged. This happens with all values for this property. The copied information (text) will have the original register, which is used in source code pages. This is the only difference between manual processing and using CSS commands.
It doesn't matter which one you want to use - lower or upper case, the main thing is not to forget the purpose. For example, if you only need changes for decorative purposes, then you can safely use the "text-transform" property. Well, if you know that your users will probably copy the information you have posted, then it is best to manually change the case of all text. Indeed, sometimes readers do not notice such a font change. This is especially critical when it comes to important documents and similar information.
In the last video tutorial, we learned how to remove and add new information v new version HTML document, while reporting it search engines and highlighting visually so that visitors can see the changes as well. For this, We have used the del and ins tags.
In this video tutorial, we continue the topic of formatting text in an HTML document. We will take a look at two HTML tags that indicate the superscript and subscript of the text.
The HTML sup tag is the superscript of the text in HTML.
HTML tag is for specifying the superscript of text in HTML. In some site topics, this tag will be simply irreplaceable. For example, if you have, or are planning, a site associated with any formulas, mathematical or chemical. Or, if there is a construction site, then the tag will be very useful and will help in the design of articles, when writing formulas or any quantities, for example, square meters in the construction topic.
But if your site does not belong to the listed topics, this does not mean that the tag won't come in handy. It is enough to show imagination and ingenuity and find an application for this element.
HTML sub tag - the subscript of the text in HTML.
As for the HTML tag then it is the opposite of the tag , and is responsible for specifying the subscript of the text. The subscript of the text can be used when writing formulas or mathematical equations. But besides this, you may be able to find other uses for the tag. .
The next Video Lesson is devoted to two more tags, which in some situations can be simply irreplaceable. Moreover, they are able not only to format text, for example, in an article, but also when specifying various information on the site during page layout. One of the tags wraps in HTML, and the other draws a horizontal line.
