TRENDING TOPICS

×

HTML Formatting

Before learning about the HTML formatting elements, first you need to learn some basics of the HTML style attribute in the previous chapter. Actually, HTML also defines special elements to format text with a special meaning. HTML uses elements like <b> and <i> tag use to format output to make bold or italic text.

In the last chapter, you have seen how to use paragraphs in a professional way, now in this HTML formatting chapter, you will learn how to format paragraphs or text as your requirement.

  • Make a paragraph or it’s some part of the text in a paragraph in italic.
  • To make text or paragraph in bold text.
  • To make text small or big.
  • To make 2nd, 2 as base and nd as super of 2.

Example Explained

Hello I'm bold and italic formatted paragraph, do you want to learn it

There are so many tag properties used to format HTML text on the web page. Actually, HTML formatting is nothing, it just about arranging text style according to your requirement. For example, how do you want to look like your text or paragraph should appear.

Let’s start to know how you can!

HTML Formatting Elements

This is a <bold> Paraggraph This is a <strong> Paraggraph This is a <i> Paraggraph This is a <small> Paraggraph This is a <mark> Paraggraph This is a <ins> Paraggraph

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

The HTML <strong> element defines strong text, with added semantic "strong" importance.

HTML <i> and <em> Elements

The HTML <i> element defines italic text, without any extra importance.

<!DOCTYPE html>
<html>
   <body>
      <i> This text is italic </i>
   </body>
</html>

For Font Thickness

There are several HTML tags which can be used to manages the font thickness for example tags like <b>, <tt>

  • The <b> tag is used to make the text bold, just put the text between <b> and </b> tag, which text you want to make bold.
  • The <tt> tag is called a monospaced tag, it is used to provide equal thickness to each and every font where you apply the <tt> tag.
  • The style attribute is used to style the font-weight property to define the thickness of the font. There are some values which can be assigned to font-weight make it bold such as 100, 200, ….., 900, the value of 900 is boldest and 100 is thinnest.

Example of <b> Tag

<p> I want to make <b> these font bold</b> do you also want </p>

Output

I want to make these font bold do you also want

Example of <tt> Tag

<p> Here is example <tt> of same thickness fonts</tt> what do you think </p>

Output

Here is example of same thickness fonts what do you think

Example of style Attribute.

<p style="font-weight:900;">This whole text is in bold by using style attribute, font-weight value 900</p>

Output

This whole text is in bold by using style attribute, font-weight value 900

Note : It is important to know where you can insert <b> or <tt> tag, nothing to worry you can insert them within <p> tag or you can insert <p> itself within <b> or <tt> tag, in such case if you want the whole paragraph in that format then you may get some warning but no need to worry about it.

For Big or Small Text

In your text or paragraph if you want some big or small text then you can just use the <big> or <samll> tag, notice that all these tags has their closing tags. Observe the below example carefully.

Example of <big> Tag

<p>Hi do you think <big> I'm big font</big> tell me </p>

Output

Hi do you think I'm big font tell me

Example of <small> Tag

<p>In this example we are making <small>Text small let's see</small> in out put.</p>

Output

In this example we are making Text small let's see in out put.

Note: You can also use the style attribute’s property font-size to increase or decrease the size of the font. You can see the below-mentioned example.

Example Explained

<p style="font-size:22px;">This paragraph font-size is changed by using style </p>

Output

This paragraph font-size is changed by using style.

For Italic Text

If you want to convert some text of font of paragraph in Italic then you can use <i> tag. You can put all content in between Italic <i>, </i> tags which content you want to make italic.

Example Explained

<p>After this text <i> This Whole Text in Italic Format</i> </p>

Output

After this text This Whole Text in Italic Format

To Provide Importance to Text

The tags <strong>, <em>, <u> are used to provide importance to some text or font in HTML document.

  • <strong> tag is used to represent some text's strongly meaning.
  • <em> tag is used to make more focus on that content.
  • In such case when you want to mark some text underline then you can use <u> tag.
  • You can use <ins> tag when you want to show some text is newly added or inserted in the text.

Example of <strong> Tag

<p> Strong formatted text<strong> start from here you can see</strong> </p>
<

Output

Strong formatted text start from here you can see

Example of <em> Tag

<p>This tag is<em> em formatted, can you see effect</em> </p>

Output

This tag is em formatted, can you see effect

Example of <u> Tag

<p>Hello i'm important<u> i'm underlined</u> </p>

Output

Hello i'm important i'm underlined

Example of <ins> Tag

<p>This text after me is an <ins> inserted text</ins> </p>

Output

This text after me is an inserted text

Unimportance to Text

If you want to mark some text as unnecessary or unimportant then you can use these tags which are listed below:

  • The <strike> tag use to cross over a text or to make some selected text strike by using this tag. It generally draws a line through the whole text within the opening and closing of this tag.
  • The <s>tag does the same thing as the <strike> tag, only the one thing that is different in the s tag instead of strike.
  • The <del> tag used to delete the text but you are able to see that text, actually, it just make a cross line on the whole deleted text. <del> tag mostly used in e-commerce site which is selling goods for example if they provide some discount on the product at that time they a new price but they also show the actual price of the production in past. For more understanding, you can see the below-mentioned example:

Example of <strike> Tag

<p>Every one hate me <strike> so they mark me like this</strike> </p>

Output

Every one hate me so they mark me like this

Example of <s> Tag

<p>People also hate me <strike> I'm not feeling good</strike> </p>

Output

People also hate me I'm not feeling good

Example of <del> Tag

<p>Hey! deleted <del>Price $81</del> & Now it available on the only Price $75 </p>

Output

Hey! deleted Price $81 & Now it available on the only Price $75

Special Highlighting Text

There are some HTML tags which is used to highlight some text in the paragraph or in another format.

  • The <mark> tag is used to highlight text in a paragraph, just apply to <mark> tag as requiring text in between the opening and closing tag, you will get your text surrounded with some background color and also text will appear different from other text in the paragraph.
  • The <kbd> tag is used in such scenario where we need to write some keyboard short-cut like ctr+c, in such case we can use this tag.
  • The <code> tag used, If you have to write some programming code on your HTML page then you can use the <code> tag. Actually, it provides a different look to your programming code.

Example of <mark> Tag

<p>I'm used to mark <mark> Hello</mark> highlighted </p>

Output

I'm used to mark Hello highlighted

Example of <kbd> Tag

<p>Do you want to insert <kbd>ctr+c</kbd> in you text</p>

Output

Do you want to insert ctr+c in you text

Example of <code> Tag

<p>Is there any way to insert<code> #include</code> in HTML?</p>

Output

Is there any way to insert #include in HTML?

Extra Shot →

Use of <span> Tag

If you want to format & style some text in a paragraph using the style attribute at some time you want to apply some conditions to the text then you can use the <span> tag. In the below example, you can see how to implement conditions on the <span> tag.

Example & Output

<p>Hello! <span style="color:red; font-size:20px;"> This text is being styled by inline css within span tag</span></p>

Hello! This text is being styled by inline css within span tag

HTML Formatting Elements

Tag Description
<b> Bold Text
<strong> Important Text
<i> Italic Text
<em> Emphasized Text
<mark> Marked Text
<small> Small Text
<del> Deleted Text
<ins> Inserted Text
<sub> Subscript Text
<sup> Superscript Text

Advertise With Us

We offer sponsored posts and guest posts with do-follow links, back-links, and other advertising services, To advertise email us at "advertise@gdatamart.com"

© 2021 GDATAMART.COM (All Rights Reserved)