Text formatting concept
Text Formatting in HTML is a better, more beautiful and consistent display of text.
I mean, if there is a somewhat important word in the text, we can distinguish its width in bold.
And if there is something that has been deleted in the text, a line can be displayed over it in order to indicate that it has been deleted.
Tags display text in bold
When we want to focus on a word or an important word on the web page, we put it in bold (Bold).
- The word can be placed between <b> and </b>.
- The word can be placed between <strong> and </strong>.
The two hashtags give the same result, but <b> and </b> are common among programmers, and <strong> and </strong> are used if the speech is very important.
example 1
<p>My website <b>Programmer Tech</b></p>
<p>My website <strong>Programmer Tech</strong></p>We created a paragraph and within this paragraph we used the <b> tag in the first line, and in the second line we used the <strong> tag.
Display text in italics
If we want to make some words on the web page italic, we use the following two tags:
- The word can be placed between <i> and </i>.
- The word can be placed between <em> and </em>.
We can use whatever we want from the previous two tags to make the text italic.
Example 2
<p>My website <i>Programmer Tech</i></p>
<p>My website <em>Programmer Tech</em></p>We created a paragraph and within this paragraph we used the <i> tag in the first line, and in the second line we used the <em> tag.
Highlight deleted text
Sometimes there are words within the web page that we want to delete but leave it on the web page just to let the user know that the word has been deleted.
We use to mark the text as omitted one of the two tags:
- The word can be placed between <s> and </s>.
- The word can be placed between <del> and </del>.
example 3
<p>My website <s>Programmer Tech</s></p>
<p>My website <del>Programmer Tech</del></p>We created a paragraph and inside this paragraph we used the <s> tag in the first line, and in the second line we used the <del> tag.
Underline text
When we want to distinguish a word by placing a line under the word, we use one of the two tags for this:
- The word can be placed between <u> and </u>.
- The word can be placed between <ins> and </ins>.
It is common for programmers to use u when we want it to be the bottom line of a word.
Example 4
<p>My website <u>Programmer Tech</u></p>
<p>My website <ins>Programmer Tech</ins></p>We created a paragraph and inside this paragraph we used the <u> tag in the first line, and in the second line we used the <ins> tag.
Teaching parts of the text
Text Marking can mark a specific text within the web page and this is to put a yellow background for the word we want to mark to draw attention to it.
Texts are highlighted with a yellow background by placing them between the <mark> and </mark> tags.
Example 5
<p>My website <mark>Programmer Tech</mark></p>We created a paragraph and inside the paragraph we used the <mark> tag in order to draw the user's attention to important words.
Display a portion of the text in superscript and subscript
Sometimes we want to write fractional arithmetic operations and chemical symbols in which some numbers are written a little higher or a little lower than the word in the same line.
There are two tags responsible for the text's height and decrease, which are:
- If we want to make a part of the text a little high, we use the <sup> and </sup> tags, which is an abbreviation of the word (Super Script).
- If we want to make a part of the text a little lower, we use the <sub> and </sub> tags (Sub Script).
Example 6
<p>My website <sup>Programmer Tech</sup></p>
<p>My website <sub>Programmer Tech</sub></p>We created a paragraph and inside this paragraph we used the <sup> tag in the first line, and in the second line we used the <sub> tag.
