W3C Designer

html formatting tags

7/04/2021
Hacker
html formatting tags

HTML FORMATTING

HTML formatting is a technique of formatting text for a best look. HTML gives us the ability to format text without using CSS. HTML consists of several formatting tags. These tags are used to bold, italicize or underline text. There are about 14 options for how text appears in HTML and XHTML.

Formatting tags in HTML are divided into two categories:

  • Physical Tags: physical tag is used to include a visual appearance to the text.
  • Logical Tags: logical tag is used to include some semantic or logical value to the text.

Note: There are some physical and logical tags that may give the same visual appearance, but they will differ in semantics.

Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML formatting text.

Element name Description
<b> This is a physical tag, that is used to bold the text written middle of it.
<strong> This is a logical tag, which tells the browser that the text is important.
<i> This is a physical tag which is used to make text italic.
<em> This is a logical tag which is used to display content in italic.
<mark> This tag is used to highlight text.
<u> This tag is used to underline text written between it.
<tt> This tag is used to appear a text in teletype. (not supported in HTML5)
<strike> This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5)
<sup> It displays the content slightly above the normal line.
<sub> It displays the content slightly below the normal line.
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added
<big> This tag is used to increase the font size by one conventional unit.
<small> small tag is used to reduce the font size inside it by one unit from the base font size.

1) Bold text html

HTML <b> and <strong> formatting elements The HTML <b> element is a physical tag which display text in bold font, without any logical importance. If you write anything within <b>............</b> element, is shown in bold letters.

Syntax-

 <b>your text</b>

2) strong tag in html

The HTML <strong> tag is a logical tag, which displays the content in bold font and informs the browser about its logical importance. If you write anything between <strong>???????. </strong>, is shown important text.

Syntax-

 <strong>your text</strong>

Example

  1. <html>
  2. <head>
  3. <title>Bold & Strong Tag</title>
  4. </head>
  5. <body>
  6. <p>We use the &lt;strong&gt; tag to highlight the importance <strong> of this part of the text</strong>.</p>
  7. <p>The &lt;b&gt; tag is a physical tag that stands for <b>bold text</b>.</p>
  8. </body>
  9. </html>

Output-

We use the <strong> tag to highlight the importance of this part of the text.

The <b> tag is a physical tag that stands for bold text.

3) html italic tag

The HTML <i> element is physical element, that show the enclosed content in the italic font, without any added importance. If anything written within <i>............</i> element, is shown in italic letters.

The HTML <i> element specify a part of text. The content inside is typically displayed in italic.

Tip: The <i> tags are often used to indicate a technical term, phrase From another language, an idea, the name of a ship, etc.

Syntax -

 <i>text</i>

4) Emphasis

<em> tag is Also Called As Emphasis Tag. It is a logical element, which will display the enclosed content in italic font, with added semantics importance.

The HTML element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

Syntax-

 <em>your text</em>

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p>This is a paragraph</p>
  5. <p>The important part of the text is defined <em> in italic</em>.</p>
  6. <p><i>W3C Designer</i>, - Largest Developers site </p>
  7. </body>
  8. </html>

Output-

This is a paragraph

The important part of the text is defined in italic.

W3C Designer, - Largest Developers site.

5) html mark tag

The <mark> tag is used to define a part of text in one document as marked or highlighted to reference purposes.

If we want to mark or highlight a text, we should write the content within <mark>.........</mark>.

Syntax-

 <mark>your text</mark>

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Title of the document</title>
  5. </head>
  6. <body>
  7. <p> Learn the HyperText Markup Language on <mark>W3CODE DESIGNER</mark> </p>
  8. </body>
  9. </html>
  11. <body>
  12. </body>

Output-

Learn the HyperText Markup Language on W3CODE DESIGNER.

6) Underlined tag

Underline also known as underscore. <u> text is often used to emphasize a word or phrase within a sentence.

If you write anything within <u>.........</u> element, is shown in underlined text.

Syntax-

 <u>your text</u>

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Title of the document</title>
  5. </head>
  6. <body>
  7. <p> Learn the HyperText Markup Language on <u>W3CODE DESIGNER</u> </p>
  8. </body>
  9. </html>
  11. <body>
  12. </body>

Output-

Learn the HyperText Markup Language on W3CODE DESIGNER.

7) Teletype

The <tt> HTML element creates inline text that are presented using the user agent's default monospace font-face. It is also called as Teletype Text Element.

This element was developed for the purpose of rendering text as it would be visbled on a fixed-width display such as a teletype, text-only screen, etc.

If we want that each letter has the same width then we should write the content within <tt>.............<tt> element.

Note: We know that most fonts are known as variable-width fonts because Different letters have different widths. For example: 'w' is greater than 'l'. Monospaced Font Or Teletype provides similar space among every letter.

Syntax-

 <tt>your text</tt>

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>TELETYPE TEXT ELEMENT</title>
  5. </head>
  6. <body>

  7. This is an ordinary text.

  8. <p><tt>And this is a teletype text.</tt></p>
  9. </body>
  10. </html>
  12. <body>
  13. </body>

Output-

This is an ordinary text.

And this is a teletype text.

8) Strikethrough

Strikethrough is mostly used to mark text which is mistaken.

Anything written within <strike>..............</strike> element is displayed with strikethrough. It is a thin line which cross the statement.

Syntax-

 <strike>your text</strike>

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Strikethrough</title>
  5. </head>
  6. <body>
  7. <p><strike>I am studying at the school.</strike></p> <p>I am studying at the university.</p>
  8. </body>
  9. </html>

Output-

I am studying at the school.

I am studying at the university.

9) Superscript

Just as we write the exponent of any base in mathematics, similarly if a word or number is to be written as a power in Html, subscripts are used to write the exponent.

The <sup> tag is used to add superscript text to an HTML document. The <sup> tag defines superscript text. Superscript text appears half a character above the normal line and is sometimes presented in a smaller font. Superscript text can be used for footnotes.

If you put the content within <sup>..............</sup> element, is shown in superscript; means it is displayed half a character's height above the other characters.

Syntax-

 <sup>your text</sup>

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Superscript</title>
  5. </head>
  6. <body>
  7. <p>We Can study Computer Program at the W<sup>3</sup> Code Designer.</p>
  8. </body>
  9. </html>

Output-

We Can study Computer Program at the W3 Code Designer.

10) Subscript

Just as we write the atomic number while writing a chemical formula in chemistry, similarly if a word or number is to be written half a character below the normal line in front of the base in Html, subscript is used.

Subscript text can be used for chemical formulas. Such as- (H2o)

If you put the content within <sub>..............</sub> element, is shown in subscript ; means it is displayed half a character's height below the other characters.

Syntax-

 <sub>your text</sub>

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Subscript</title>
  5. </head>
  6. <body>
  7. <p>We Can study Computer Program at the W<sub>3</sub> Code Designer.</p>
  8. </body>
  9. </html>

Output-

We Can study Computer Program at the W3 Code Designer.

Above example 3 is subscript which is written after W, For write complete word W3 Code Designer

11) Deleted

When we remove any information from any document and we want to indicate the information removed from that document to the visitors, then we write that text in deleted tag- <del>.

The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text

Anything that puts within <del>..........</del> is displayed as deleted text.

Syntax-

 <del>your text</del>

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Deleted</title>
  5. </head>
  6. <body>
  7. <p><del>W3CodeDesigner Is Not A Website</del>, But It Is Also A Developers Community.</p>
  8. </body>
  9. </html>

Output-

W3CodeDesigner Is Not A Website, But It Is Also A Developers Community.

12) Inserted

The <ins> tag in HTML is used to specify a block of text to be inserted. The <ins> tag is used to mark a range of texts which has been included to a web page.

The HTML <ins> element defines the text that is inserted into a document. Browsers will usually underline the inserted text.

Anything that puts within <ins>..........</ins> is displayed as inserted text.

Syntax-

 <ins>your text</ins>

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Insert Tag</title>
  5. </head>
  6. <body>
  7. <p><ins>W3 Code Designer</ins> is a Developers Site.</p>
  8. </body>
  9. </html>

Output-

W3 Code Designer is a Developers Site.

13) Larger

The <big> tag in HTML is used to make the selected text one bigger than the surrounding text.

If you want to put font size larger than the rest of the text then place the content within <big>.......</big>. It increases one font size larger than the previous one.

Syntax-

 <big>your text</big>

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Larger Tag</title>
  5. </head>
  6. <body>
  7. <p><big>W3 Code Designer</big> is a Developers Site.</p>
  8. </body>
  9. </html>

Output-

W3 Code Designer is a Developers Site.

14) Smaller

The <small> tag decreases the text font size making it one size smaller than a document's base font size

If you want to put your font size smaller than the rest of the text then put the content within <small>.........</small>tag. It reduces one font size than the previous one.

Syntax-

 <small>your text</small>

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Smaller Tag</title>
  5. </head>
  6. <body>
  7. <p>The W3 Code Designer Grouth Rate is only 90%* <small>* per day</small></p>
  8. </body>
  9. </html>

Output-

The W3 Code Designer Grouth Rate is only 90%* / per day *

No comments:

Post a Comment