HTML Text Formatting and Comments

HTML text formatting improves readability using tags like <b>, <i>, <strong>, and <em>. HTML comments are used to add notes in code that are not visible in the browser.

10 views
5 min read
Try It Yourself

Experiment with the code in an interactive editor

What is Text Formatting?

Just like you make text bold or big in MS Word, HTML has tags for that.

Headings (H1 to H6):

1<h1>Most Important Heading</h1>  <!-- Use only ONCE per page -->
2<h2>Section Heading</h2>
3<h3>Sub-section Heading</h3>
4<h4>Small Heading</h4>
5<h5>Smaller Heading</h5>
6<h6>Smallest Heading</h6>

Why H1 only once?

  • Google uses H1 to understand what your page is about

  • Multiple H1 confuses Google

  • Think of H1 as the book title — a book has only one title

Text Styles:

1<strong>Bold text</strong>  <!-- Use for important words - helps SEO -->
2<em>Italic text</em>        <!-- Use for emphasis - changes meaning slightly -->
3<mark>Highlighted text</mark>  <!-- Like a marker pen - good for search terms -->
4<small>Small text</small>   <!-- For copyright, disclaimers, side notes -->
5<del>Deleted text</del>      <!-- Shows strikethrough - for showing removed content -->
6<ins>Inserted text</ins>     <!-- Shows underline - for showing added content -->
7<p>Normal paragraph</p>      <!-- Regular text -->

When to use what:

  • Use <strong> instead of <b> (strong has meaning, b is just visual)

  • Use <em> instead of <i> (em has meaning, i is just visual)

  • Google gives more importance to <strong> and <em>

What are comments?

Comments are like sticky notes in your code. Browser ignores them completely. Only developers can see them.

Why use comments?

Reason 1: To explain your code

1<!-- Header section starts here -->
2<header>Logo and menu</header>
3<!-- Header section ends here -->

Reason 2: To temporarily disable code (debugging)

1<!-- 
2<div>This section is not working yet</div>
3-->