⬅ Previous Next ➡

7. Text Formatting Tags

Text Formatting Tags
  • Text Formatting Tags: These tags are used to change the visual appearance of text (bold, italic, etc.) or to add semantic meaning to specific words or phrases.
  • Common Formatting Tags:
    • <b> and <strong>:
      • <b>: Makes text bold for visual appeal.
      • <strong>: Makes text bold and tells screen readers that the text is important.
    • <i> and <em>:
      • <i>: Displays text in italics.
      • <em>: Displays text in italics but adds emphasis (semantic weight).
    • <u>: Used to underline text. (Note: Often avoided today to prevent confusion with hyperlinks).
    • <mark>: Used to highlight text, usually with a yellow background.
    • <small>: Renders text in a smaller font size than the surrounding text.
  • Computer and Scientific Formatting:
    • <sub> (Subscript): Lowers the text below the normal line (e.g., in chemical formulas like H2O).
    • <sup> (Superscript): Raises the text above the normal line (e.g., in math like 52 or dates like 10th).
    • <del> (Deleted): Shows text with a strikethrough, indicating it has been removed.
    • <ins> (Inserted): Shows text with an underline, indicating it has been added to the document.
    • <code>: Used to display computer code in a monospaced font.
<!-- 1. Bold + Italic -->
<p>This is <b>bold</b> and this is <i>italic</i>.</p>

<!-- 2. Strong + Emphasis -->
<p><strong>Important</strong> and <em>emphasized</em> text.</p>

<!-- 3. Underline + Mark -->
<p><u>Underline</u> and <mark>highlight</mark> this.</p>

<!-- 4. Subscript -->
<p>Water formula: H<sub>2</sub>O.</p>

<!-- 5. Superscript -->
<p>Math power: x<sup>2</sup> + y<sup>2</sup>.</p>

<!-- 6. Line Breaks -->
<p>Line one<br>Line two<br>Line three</p>

<!-- 7. Deleted + Inserted -->
<p>Old: <del>200</del> New: <ins>150</ins></p>

<!-- 8. Small Text -->
<p>Terms apply <small>(read carefully)</small>.</p>

<!-- 9. Code Tag -->
<p>Use <code>console.log("Hi")</code> in JavaScript.</p>

<!-- 10. Keyboard Input -->
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

<!-- 11. Abbreviation -->
<p><abbr title="HyperText Markup Language">HTML</abbr> is a markup language.</p>

<!-- 12. Quote (inline) -->
<p>He said: <q>Never give up</q>.</p>

<!-- 13. Blockquote -->
<blockquote>Success is the sum of small efforts repeated daily.</blockquote>

<!-- 14. Address -->
<address>Written by Sourav Sahu<br>India</address>

<!-- 15. Preformatted Text -->
<pre>Line A
Line B
Line C</pre>

<!-- 16. Span with class -->
<p>This is <span class="red-text">colored</span> word.</p>

<!-- 17. Div Block -->
<div><p>This is inside a div block.</p></div>

<!-- 18. Link -->
<p>Visit <a href="https://example.com">Example</a> website.</p>

<!-- 19. Image -->
<img src="photo.jpg" alt="Sample Photo">

<!-- 20. Ordered List -->
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<!-- 21. Unordered List -->
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

<!-- 22. Description List -->
<dl>
  <dt>HTML</dt>
  <dd>Structure of web pages</dd>
</dl>

<!-- 23. Table -->
<table border="1">
  <tr><th>Name</th><th>Marks</th></tr>
  <tr><td>Amit</td><td>85</td></tr>
</table>

<!-- 24. Button -->
<button type="button">Click Me</button>

<!-- 25. Form Input -->
<form>
  <input type="text" placeholder="Enter name">
</form>

<!-- 26. Checkbox -->
<label><input type="checkbox"> Accept Terms</label>

<!-- 27. Radio Buttons -->
<label><input type="radio" name="g"> Male</label>
<label><input type="radio" name="g"> Female</label>

<!-- 28. Select Dropdown -->
<select>
  <option>BCA</option>
  <option>MCA</option>
</select>

<!-- 29. Textarea -->
<textarea rows="3" cols="30">Write here...</textarea>

<!-- 30. Audio/Video (HTML5) -->
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
</audio>
⬅ Previous Next ➡