HTML Text Formatting

80
views
html text formatting

All the formatting elements are inline elements. That means it will not create a new line when rendered in the browser.

1Bold and Italic Elements

Here is a paragraph of my content.

Above code will render as-

The best book I have ever studied is The Innovators written by Walter Isaacson. He is also the author of Steve Jobs.

In this paragraph, I want to make the name appear in bold letter, book name in Italic.

  • To create bold text we use <b> or <strong> element.
  • To create italic text we use <i> or <em> element.

Q: Why two different elements for the same purpose?

A: Remember, <b> and <strong> looks same when rendered by the browser but, for computer <strong> is of special importance whereas <b> element is not important.

Similarly, <i> and <em> looks same when rendered by the browser but, for computer <em> is of special importance whereas <i> element is not important.

Above code will render as-

The best book I have ever studied is The Innovators written by Walter Isaacson. He is also the author of Steve Jobs.

In this paragraph, I have wrapped ‘The Innovators’ with the <em> element and ‘Steve Jobs’ with <i> because I want both the text to appear in Italic but in this piece of writing ‘The Innovators’ book is more important than ‘Steve Jobs’.

Author name is wrapped with the <strong> element, not with <b> element because the author name is important for this piece of text.

2Small and Big Elements

HTML <small> Element

When the piece of text is wrapped inside <small> element then it appears in smaller size.

Above code will render as-

This is a tiny example.

HTML <big> Element

When the piece of text is wrapped inside <big> element then it appears in big size.

Above code will render as-

This is a tiny example.

3Deleted and Inserted Elements

HTML <del> Element

<del> element is used to create a strikethrough text. It is useful when you want to show that peice of content is wrong, removed or changed.
Above code will render as-
I am very poor in physics.

HTML <ins> Element

The <ins> element is used to identify text that has been inserted into a document. It is often paired with a <del> element which identifies deleted text replaced by the text contained in the <ins> element.

Above code will render as-

I am very poor in physics history.

4Super and Subscript Elements

HTML <sup> Element

<sup> Element defines the superscript text.
Its very useful when writing maths content inside html.

Above code will render as-

100 m2 is the total area of your house.

HTML <sub> Element

<sup> Element defines the superscript text.
Its very useful when writing maths content inside html.
Above code will render as-

The value of loge e is always 1.

5Highlighter Element

<mark> element is used to highlight the piece of text.
The default highlight colour is yellow.
Above code will render as-

This example is for highlighted text.

Note: There was <u> element used to underline the text. But it was deprecated in html 4 because of the confusion it creates with <link> element. As the links are also rendered with underline by default.

LEAVE A REPLY

Please enter your comment!
Please enter your name here