HTML Formatting

HTML Formatting Elements. In the previous chapter, you learned about the HTML style attribute. HTML also defines special elements for defining text with a special meaning. HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

In last chapter we have seen how we can use paragraph in a professional way, now in this HTML Formatting Tutorial we will learn how we can format paragraph or text like if we want to..

  • Make paragraph or it’s some part in italic text.
  • 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 things to format your text, HTML formatting is nothing, it is just about to arranging text according to your requirement. How do you want 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 font thickness like <b>, <tt>

  • <b> tag is used to make font bold, the font or text which we want to make bold put between <b> and </b> tag.
  • <tt> tag is called monospaced tag and it is used to provide equal thickness to each and every font.
  • Use of style attribute, in style attribute we can use font-weight property to define thickness of font. There are many value which can be assign to font-weight like bold, 100, 200, ….., 900 in this 900 is boldest and 100 is thinnest we will see in example.

Example of <b> Tag.

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

Output

these font bold 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 exampleof 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 we can insert <b> or <tt> tag, nothing to worry we can insert them within <p> tag or we can insert <p> itself within <b> or <tt> tag, in such case if we want whole paragraph in that format, you may get some warning but no need to worry about it.

For Big or Small Text

In our text or paragraph if we want to some big or small text then we can use <big> or <samll> tag, notice that all these tag has their closing tags. Observe 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: We can also use style attribute’s property font-size to increase or decrease size of font. Find below 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 we want convert some text of font of paragraph in Italic then we use <i> tag. We put all content which we want to be in Italic between <i>, </i> tags.

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> is used to represent some text strongly meaning.
  • <em>, this tag is used to make more focus on that content.
  • <u>, In such case when we want to mark some text underline we use this tag.
  • <ins>, we use this tag when we want to show some text is newly added or inserted in 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 we want to mark some text as unnecessary or unimportant then we can use tags listed below

  • <strike> , To cross over a text or to make some text strike text we use this tag. It’s generally draw a line through whole text within opening and closing of this tag.
  • <s> , It does the same work as <strike> tag, the only difference is the tag name s instead of strike .
  • <del> , If some text is deleted and we want to show that text is deleted then we can use this tag. For example we often see when there is some offer on some goods then we see a older price cross over with new price.

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 this is deleted <del> price $81</del> now price $75 </p>

Output

Hey this is deleted price $81 now price $75

Special highlighting text

There are some tags in HTML which can be used to highlight some text in HTML paragraph or in other text.

Below we are providing information about them.

  • <mark>, This tag is used to highlight text in a paragraph, put require text in it’s opening and closing tag, you will get your text surrounded with some background color and you text will appears different form other text in paragraph.
  • <kbd>, It 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.
  • <code>, If we have to write some programing code in out HTML page then we can use this tag. It will make different look of 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 we want to format and style some text in paragraph using style attribute at some point then in such condition we can use <span>, below example shows that how we can implement it.

Example & Output

<p>Hello <span style="color:red; font-size:23px;"> This text is being styled by span and css</span></p>

Hello This text is being styled by span and css

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

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved