HTML Text Formatting

HTML Text Formatting


In this tutorial, you will learn how to format the text on the web pages using HTML tags.


This text is bold

This text is italic

This is deleted text.

This is subscript and superscript


Formatting Text with HTML

HTML provides several tags that you can use to make some text on your web pages appear differently than normal text. Formatting elements were designed to display special types of text. Some of them give special meaning, while others just give a visual effect.

The best way to understand is by getting your hands dirty. The following example demonstrates the most commonly used formatting tags in action. Now, let’s try this out to understand how these tags basically work:

Example Code:


<p>This is <b>bold text</b>.</p>

<p>This is <strong>strongly important text</strong>.</p>

<p>This is <i>italic text</i>.</p>

<p>This is <em>emphasized text</em>.</p>

<p>This is <mark>highlighted text</mark>.</p>

<p>This is <code>computer code</code>.</p>

<p>This is <small>smaller text</small>.</p>

<p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p>

<p>This is <del>deleted text</del>.</p>

<p>This is <ins>inserted text</ins>.</p>


Difference between <strong> and <b> tag

Both <strong> and <b> tags render the enclosed text in a bold typeface by default.

1) The HTML <strong> element defines strong text, it indicates that its contents have strong importance ( or meaning ).

2) The HTML <b> element defines bold text, without any extra importance.
İt’s simply used to draw the reader’s attention without conveying any special importance.

Example Code:


<p><strong>WARNING!</strong> Today is my birthday. </p>

<p>But it <b>doesn't matter</b> for you and  others </p>

HTML <i> and <em> Elements

Similarly, both <em> and <i> tags render the enclosed text in italic type by default

1) The HTML <i> element defines italic text, without any extra importance. İt’s used to differentiate words from the surrounding text by styling the marked text in italics without implying any added emphasis to the italicized words.

2)The HTML <em> element defines emphasized text, with added semantic importance. The <em> element is used to indicate text that should receive greater emphasis than the surrounding text.

   
<p>Dogs are <em>cute and lovely</em> animals.</p>

    <p>This text is just  <i>italic</i></p>

Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is “important”.
Also, in HTML5 the <b> and <i>tags have been redefined, earlier they don’t have semantic meaning.

Comments are closed.