Mastering HTML Text Formatting with Examples (2024)

HTML offers a variety of tags to format text on your webpage, enhancing readability, visual appeal, and conveying meaning. These tags fall into two primary categories:

  1. Physical Formatting Tags: These tags control the visual appearance of the text without necessarily specifying its semantic meaning.

Examples include:

  • <b> (bold) and </b>: Make text bold, often used for emphasis or highlighting key points.

HTML


This is some **bold** text.
  • <i> (italic) and </i>: Slant text, typically for terms in a foreign language, technical terms, or thoughts within a narrative.

HTML


This sentence contains an _italicized_ word.
  • <u> (underline) and </u>: Underline text, often used for links (although CSS is preferred for modern styling).

HTML


This text is underlined.  (Use CSS for styling links)
  • <sup> (superscript) and </sub>: Display text slightly above the baseline, frequently used for scientific notation or footnotes.

HTML


E=mc<sup>2</sup>
  • <sub> (subscript) and </sub>: Display text slightly below the baseline, common for chemical formulas or mathematical equations.

HTML


H<sub>2</sub>O

2. Logical Formatting Tags: These tags convey the meaning or purpose of the text, allowing browsers to interpret and potentially render it differently. Examples include:

  • <strong> (strong) and </strong>: Indicate strong importance, similar to bold but often used for more urgent or critical content.

HTML


**Please remember** to save your work frequently.
  • <em> (emphasis) and </em>: Denote emphasis similar to italic but focusing on the importance of the text.

HTML


I am feeling _especially_ grateful today.
  • <cite>: Mark a title of a creative work (book, film, song).

HTML


The novel <cite>To Kill a Mockingbird</cite> is a classic.
  • <code>: Display inline code snippets. HTML

HTML


Use the `<code>for` loop to iterate through an array.
  • <pre> (preformatted text): Preserve whitespace and line breaks, ideal for code blocks or poems.

HTML

<pre>
This is a poem
written in preformatted text.
</pre>

Choosing the Right Tag: Semantics over Presentation

Browsers can use this information to adjust the presentation based on the context. For instance, a screen reader might emphasize <strong> content for visually impaired users.

Beyond the Basics: Advanced Text Formatting

HTML offers additional tags for specific formatting needs:

  • <abbr>: Abbreviation or acronym (often with a <title> element for explanation).
  • <blockquote>: Block quotation, typically indented for distinction.
  • <del>: Deleted text, often used for strikethrough effects.
  • <ins>: Inserted text, sometimes underlined.

Visit it for next step to learn 2024’s Beginner-Friendly Roadmap.

More from author

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Related posts

Advertisment

Latest posts

InVideo AI: Your AI Video Editing Assistant

In today's fast-paced digital world, video content has become an essential tool for businesses and individuals alike. However, creating high-quality videos can be time-consuming...

This AI Chatbot Can Do It All – Here’s What Makes Not Diamond Unique

In the rapidly evolving world of artificial intelligence, new tools are emerging that change how we interact with technology. One such tool is Not...

Mobiroller: Create Mobile Apps for Android & iOS Without Coding!

Introduction In a world where having a mobile app can impact your business dramatically, the question arises: How can you create one without spending a...