The concept of text formatting in HTML - ProgrammerTech
Language:

Search

The concept of text formatting in HTML

  • Share this:
The concept of text formatting in HTML

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.

1-20.webp

 

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.

2-20.webp

 

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.

3-20.webp

 

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.

4-21.webp

 

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.

5-11.webp

 

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.

6-9.webp

Tags:
Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com