Formatting in HTML

Hey Everyone, Welcome back to my new blog.

Let's jump on to the the different tags, that changes the appearance in web page.

  • <b>,<strong>: Both makes text bold, but strong emphasises the word for screen readers.

  • <i>,<em>: Italicises the word, but em works when it comes to screen reading.

  • <u>: For underline.

  • <s>,<strike>: Strike through the text.

  • <sub>,<sup>: Used for sub and superscript.

  • <small>,<big>: For small, big text.

  • <mark>: Used for highlighting.

  • <abbr>: This tag is used to define abbreviation short form, it comes with title attribute.

  • <dfn>: For definitions, italicises the text and makes difference while screen reading.

  • <ins>: Used for inserted text, comes with underline, and makes difference while screen reading.

Paste the below code, in index.html, and show in browser, u will be able to visualize.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formatting in HTML</title>
</head>
<body>
   <h1>Formatting</h1>
   <div><b>Tag used b.</b></div>
   <div><strong>Tag used strong.</strong></div>
   <div><i>Tag used i.</i></div>
   <div><em>Tag used em.</em></div>
   <div><u>Tag used u.</u></div>
   <div><s>Tag using s.</s> <strike>Tag using strike.</strike> </div>
   <div>This is <sub>sub</sub> and this is <sup>sup</sup></div>
   <div><small>This is using small.</small></div>
   <div><big>This is big.</big></div>
   <div><mark>This is using mark.</mark></div>
   <div>The full form is mentioned using abbr tag and will be shown if you hover over <abbr title="Cascading Style Sheet">CSS</abbr>.</div>
   <div><dfn>This is written under definition tag, makes italic but makes difference while screen reading.</dfn></div>
   <div>Hello, <ins>This text</ins> is inserted, which generally underlines but makes difference in reading.</div>
</body>
</html>

Thanks for reading till the last, please leave a comment of how u like it. More to come.