Home

Chapter 3: Text Formatting

Topics we are going to learn in this page:

1. em
2. i
3. b
4. strong
5. span
6. div
7. sub
8. sup
9. mark
10. del

Explantion of the topics:

1. em  &  i

   • <em>   &   <i> both makes the text inside it italic, to specify a special or important part of the text.
   • We should not use any of these tag only to make a text italic(We can make any text itelic using CSS), there must be some special reason or importance of that text for putting it inside <em>   or   <i>
   • Difference between <em>   &   <i>

     <i> Tag is like putting something in italics just for looks, while <em> Tag is for adding real emphasis or importance to the text, indicating that it should be read with more attention.

     An example for <em> could be: "Just do it already!", or: "We had to do something about it". A person or software reading the text would pronounce the words in italics with an emphasis, using verbal stress.

     An example for <i> could be: "The Queen Mary sailed last night". Here, there is no added emphasis or importance on the word "Queen Mary". It is merely indicated that the object in question is not a queen named Mary, but a ship named Queen Mary.

   • Example:
     Code:

         <p title="i tag Output"> I looked at it and thought <i>This can't be real! </i></p>
         <p title="em tag Output"> We <em>had to do</em> something about it. </p>
                         

     Output:

     I looked at it and thought This can't be real!

     We had to do something about it.

   ---

2. b  &  strong

   • <b>   &   <strong> both makes the text bold to draw the reader's attention to the element's contents.
   • However, these tags should not be used to apply bold styling, use the CSS font-weight property for that purpose. Use the these elements to draw attention(b) to certain text or to indicating a higher level of importance(strong).
   • Difference between <b>   &   <strong> : The <strong> element is for content that is of greater importance(Screen reader software reading the text would pronounce the words differently), while the <b> element is used to draw attention to text without indicating that it's more important.

   • Example:
     Code:

         <p title="b tag Output"> Keywords are displayed with the default style of the <b>element, likely in bold. </b></i></p>
         <p title="strong tag Output"> Before proceeding, <strong>make sure you put on your safety goggles </strong>.</p>
                         

     Output:

     Keywords are displayed with the default style of the element, likely in bold.

     Before proceeding, make sure you put on your safety goggles.

   ---

3. span

   The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes). It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline-level element.

   Example:
   Code:

       <p> Gradually add the <span style="color: #f00;"> olive oil </span> while running the blender slowly. </p>
               

   Output:

   Gradually add the olive oil while running the blender slowly.

   ---

4. div

   • The <div> tag defines a division or a section in an HTML document.
   • The <div> tag is used as a container to group some HTML elements- which is then styled with CSS or manipulated with JavaScript.
   • It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element). The <div> tag is easily styled by using the class or id attribute.
   • Any sort of content can be put inside the <div> tag!

   ---

5. sub

   The <sub> HTML element specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.

   Example:
   Code:

       <p> Chemical formula of water is  H<sub>2</sub>O and chemical formula of glucose is C<sub>6</sub>H<sub>12</sub>O<sub>6</sub> </p>
               

   Output:

   Chemical formula of water is H₂O and chemical formula of glucose is C₆H₁₂O₆

   ---

6. sup

   The <sup> HTML element specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.

   Example:
   Code:

       <p> a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup> </p>
               

   Output:

   a² + b² = c²

   ---

7. mark

   • The <mark> HTML element represents text which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context.
   • Don't use <mark> just for highlighting purposes(instead use CSS). <mark> indicates a portion of the document's content which is likely to be relevant to the user's current activity. This might be used, for example, to indicate the words that matched a search operation.

   • Example:
     Code:

         <p>Do not forget to buy <mark>milk</mark> today.</p>
                         

     Output:

     Do not forget to buy milk today.

   ---

8. del

   The <del> HTML element represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example. (The <ins> element can be used for the opposite purpose: to indicate text that has been added to the document.)

   Example:
   code:

       <p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
               

   Code:

   This text has been deleted, here is the rest of the paragraph.