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 |