HTML Text Formating




HTML Text Formating

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

Unlike different text formats in a wordpressor or word document, HTML also has different text formats to display the text on the webpage

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


Watch GIF Try It Now

HTML strong Text

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



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



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



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


Watch GIF Try It Now

HTML Inserted Text

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


Watch GIF Try It Now

HTML Subscript Text

The HTML <sub> element defines subscripted text.


Watch GIF Try It Now

HTML Superscript Text

The HTML <sup> element defines superscripted text.


Watch GIF Try It Now

HTML Marked Text

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


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)


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).


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