HTML Text Formating

Last Updated Jul 21, 2015, 12:00:06 PM

There are many different ways that we can use to display or style our text in the web page. The following list shows all different HTML text formats

HTML Bold Text

HTML bold text must be defined with either <br> tag or strong tag to keep the text in bold

<b>HTML bold texts are defined using the b tag or <code>strong</code> tag</b>
Watch GIF Try It Now

HTML strong Text

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

<strong>HTML bold texts are defined using the strong tag as well </strong>
Watch GIF Try It Now

Bold vs. Strong

In HTML5 <strong> and <b> both exist and have a different meaning. The <b> tag is for "offset text conventionally styled in bold". If you read deeper into the details, you'll see it adds, "without conveying any extra emphasis or importance". <strong> is different. It "represents a span of text with strong importance." There is semantic meaning of importance here. In fact, a <strong> tag within another <strong> tag has even more importance. There is nested importance.

HTML Italic Text

HTML italic text displays the text in italix format

<i>HTML italic text example</i>
Watch GIF Try It Now

The Emphasis and strong elements can both be used to increase the importance of certain words or sentences.

HTML Emphasized Text

HTML emphasized text displays the text in emphasized format

<p>This is <em>emphasized </em> text format <em>example</em></p>
Watch GIF Try It Now

emphasis tag should be used when you want to emphasize a point in your text and not necessarily when you want to italicize that text.

Emphasis vs. Strong

Just like <strong> and <b> we have changes to <em> and <i>. The <i> tag is for "text conventionally styled in italic". There is no semantic meaning. <em> "represents a span of text with emphatic stress". .

HTML Deleted Text

HTML deleted text displays the text with cross mark over it

<p>This text has been <del>deleted</del>
Watch GIF Try It Now

HTML Inserted Text

The HTML <ins> element defines inserted (added) text.

<p>This is an important <ins>word</ins> so mark it</p>
Watch GIF Try It Now

HTML _Subscript Text

The HTML <sub> element defines subscripted text.

<p>HTML _subscript texts are defined _{like this}</p>
Watch GIF Try It Now

HTML ^Superscript Text

The HTML <sup> element defines superscripted text.

<p>HTML _supscript texts are defined _{like this}</p>
Watch GIF Try It Now

HTML Marked Text

The HTML <mark> element defines marked or highlighted text:

<h2>HTML <mark style="background-color:red;">Marked</mark> Formatting</h2>
Watch GIF Try It Now

Preformatted Text

Any text between the pre tags, including spaces, carriage returns and punctuation, will appear in the browser as it would in a text editor (normally browsers ignore multiple spaces)

<p><pre> Any text between the pre tags</pre>, including spaces, carriage returns and punctuation, will appear in the browser as it would in a text editor</p>
Try It Now

Centre

- <center> </center>

A useful tag, as it says, it makes everything in between the tags centred (in the middle of the page).

<p> <center>Make this text center</center> </p>
Watch GIF Try It Now

Notes

Although the <small> element, like the <b> and <i> elements, may be perceived to violate the principle of separation between structure and presentation, all three are valid in HTML5. Authors are encouraged to use their best judgement when determining whether to use <small> or CSS.

Browser Support

Property
text-formating	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

Practice with Our Interactive Live Code Editor and Take your HTML Skills to the next level

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5

Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and w3C

Last Updated Jul 21, 2015, 12:00:06 PM