HTML Text Formatting

0

What Is HTML Text Formatting?

HTML Text Formatting refers to the process of adjusting and styling the text on your webpage to make it more readable, visually appealing, and structured. While HTML provides the structure of the text, formatting helps you control how that text looks. You can use various tags and attributes to adjust things like font weight, size, style, alignment, and decoration.

Let’s look at the common text formatting elements available in HTML.

1. Bold Text (<b> and <strong>)

  • <b>: The <b> tag makes the text bold. It’s primarily used for stylistic purposes without implying any additional meaning to the text. 
    <p>This is <b>bold</b> text.</p>
  • <strong>: The <strong> tag also makes the text bold, but it also indicates that the text is of strong importance. This is better for accessibility and SEO because screen readers may give more emphasis to content inside <strong> tags. 
    <p>This is <strong>important</strong> text.</p>

Note: Use <strong> when you want to emphasize the importance of the text, not just for visual boldness.

2. Italic Text (<i> and <em>)

  • <i>: The <i> tag makes the text italicized. It is often used for styling text like names, technical terms, or foreign words. 
    <p>This is <i>italicized</i> text.</p>
  • <em>: The <em> tag also italicizes text, but it indicates emphasis. Like <strong>, it adds meaning to the text—specifically, it highlights a word or phrase that should stand out. It is good for accessibility and SEO because screen readers emphasize the content inside <em>. 
    <p>This is <em>emphasized</em> text.</p>

Note: Use <em> for emphasis and <i> for styling purposes.

3. Underlined Text (<u>)

The <u> tag underlines the text. It’s typically used for styling links or other important text. However, keep in mind that underlining is often associated with hyperlinks, so it’s not always the best choice for emphasis.

<p>This is <u>underlined</u> text.</p>

4. Strikethrough Text (<s> and <del>)

  • <s>: The <s> tag adds a strikethrough (line through) effect to text. This is often used to indicate that something is no longer relevant or is crossed out for any reason. 
    <p>This text is <s>struck through</s>.</p>
  • <del>: The <del> tag also creates a strikethrough but semantically indicates that content has been deleted or is no longer valid. 
    <p>This text is <del>deleted</del>.</p>

Note: Use <del> when content is removed or changed, and <s> when text needs to be visually crossed out for stylistic reasons.

5. Subscript and Superscript

  • <sub>: The <sub> tag is used to create subscript text, which is often used in chemical formulas, mathematical equations, or other technical writing. 
    <p>Water is H<sub>2</sub>O.</p>
  • <sup>: The <sup> tag is used to create superscript text, which is often used for exponents in math or footnotes in documents. 
    <p>2<sup>3</sup> = 8</p>

6. Text Alignment

  • <center>: The <center> tag centers the text horizontally within its container. However, it is not recommended to use in modern HTML, as CSS is a better way to achieve text alignment. 
    <center>This text is centered.</center>
  • CSS Approach: For better control and flexibility, it’s common to use CSS for alignment: 
    <p style="text-align: center;">This text is centered using CSS.</p>
  • Text Align Options:
    • left aligns the text to the left.
    • right aligns the text to the right.
    • center centers the text.
    • justify spreads the text to both the left and right margins, creating a clean block of text.

7. Preformatted Text (<pre>)

The <pre> tag is used for preformatted text, where whitespace, such as spaces and line breaks, is preserved. This is useful when displaying code or any text where formatting needs to be kept exactly as it is.

<pre>
This text    has spaces
and line
breaks preserved.
</pre>

8. Whitespace and Non-Breaking Spaces

  • &nbsp;: The &nbsp; entity creates a non-breaking space, which means it prevents the browser from breaking the text at that point. It’s useful when you don’t want the browser to automatically wrap text at certain places, like between words. 
    <p>This&nbsp;is&nbsp;a&nbsp;text&nbsp;with&nbsp;non-breaking&nbsp;spaces.</p>
  • Multiple Spaces: HTML ignores multiple consecutive spaces in code. If you want to display extra spaces, you can use the &nbsp; entity or the <pre> tag to preserve the spacing.

9. Text Decoration

  • text-decoration: This is a CSS property that allows you to apply various text decorations such as underline, overline, and line-through. 
    <p style="text-decoration: underline;">This text is underlined using CSS.</p>
  • CSS Value Options:
    • underline
    • line-through
    • overline
    • none

10. Adding Quotes to Text

  • <q>: The <q> tag is used for inline quotes. It automatically adds quotation marks around the text. 
    <p><q>This is an inline quote.</q></p>
  • <blockquote>: The <blockquote> tag is used for block-level quotations. It’s typically used for long quotes that you want to appear in a separate block of text. 
    <blockquote>
    This is a blockquote. It usually appears as a separate paragraph with indentation.
</blockquote>

Conclusion

HTML text formatting allows you to control the visual presentation and structure of your content on a webpage. From bold and italic text to subscript and superscript, these tags help you make your content clearer and more accessible. For more advanced formatting, CSS can be used to enhance your page’s text styling even further.

By mastering HTML text formatting, you can create well-structured, readable, and engaging content for users while ensuring that your page follows good semantic practices.