HTML Tutorial

Previous
Next

HTML Text Formatting

Table of Content

Text Formatting in HTML

Enhance your web pages with proper text formatting using HTML tags and attributes. Imagine a plain white paper with just words written on it. Now think of a colorful paper with different-sized, bold, and underlined words, highlighted paragraphs, and maybe even pictures. HTML text formatting is like that colorful paper. It adds styles to your text to make it more visually appealing and easier to read.

Common Use Cases

  • Headings: To create different sections or levels in your text. (<h1>, <h2>)
  • Paragraphs: To separate and organize different sections of information. (<p>)
  • Bold, Italic, Underline: To emphasize or highlight specific words or phrases. (<strong>, <i>, <u>)
  • Lists: To display information in an organized and clear way. (<ul>, <li>)
  • Hyperlinks: To link to other websites or resources within the text. (<a>)

Benefits of HTML Text Formatting:

  • Improved Readability: It helps break up large blocks of text into smaller chunks, making it easier to follow.
  • Emphasis and Clarity: Different formatting options let you highlight important information and differentiate between different parts of the text.
  • Visual Appeal: By adding colors, fonts, and other elements, you can create a more visually engaging reading experience.
  • Accessibility: Properly formatted text can make your website more accessible for people with vision impairments.

Example

Here's an example of plain text vs. formatted text:

Plain Text:

The quick brown fox jumped over the lazy dog.

Formatted Text:

Animal Antics

The quick, brown fox jumped over the lazy dog.

As you can see, the formatted text is more structured, emphasized, and visually engaging.

HTML Text Formatting Elements

  • Bold: Make the text look black and thick. Use the tag <b>Text here</b>.
  • Italic: Present the text in a slanty style. Use the tag <i>Text here</i>.
  • Underline: Put a line below the text to emphasize it. Use the tag <u>Text here</u>.
  • Strikethrough: Draw a line through the middle of the text to indicate that it's not important anymore. Use the tag <strike>Text here</strike>.
  • Superscript: Lift the text slightly above the line, like 10<sup>2</sup> (which means 102). Use the tag <sup>Text here</sup>.
  • Subscript: Position the text slightly below the line, like H<sub>2</sub>O (indicating a water molecule H2O). Use the tag <sub>Text here</sub>.
  • Inserted Text: Show that the text is inserted. Use the tag <ins>Text here</ins>.
  • Marked Text: Highlight text with a background color. Use the tag <mark>Text here</mark>.

HTML Bold Element

The HTML <b> element makes text bold, highlighting important words or phrases within a text.

Example
 
<!DOCTYPE html>
<html>
<head>
    <title>HTML Bold Example</title>
</head>
<body>
    <p>This is a normal paragraph.</p>
    <p>This is a paragraph with <b>bold text</b> to highlight important information.</p>
</body>
</html>

Example Explanation

In this example, the <b> tag is used to make "bold text" stand out from the rest of the paragraph.

  • Normal Paragraph: "This is a normal paragraph."
  • Bold Text: "This is a paragraph with bold text to highlight important information."

HTML Strong Element

The HTML <strong> element indicates strong importance, rendering the text in bold and emphasizing its significance.

Example
 
<!DOCTYPE html>
<html>
<head>
    <title>HTML Strong Example</title>
</head>
<body>
    <p>This is a normal paragraph.</p>
    <p>This is a paragraph with <strong>strong text</strong> to emphasize important information.</p>
</body>
</html>

Example Explanation

In this example, the <strong> tag is used to make "strong text" stand out and signify its importance.

  • Normal Paragraph: "This is a normal paragraph."
  • Strong Text: "This is a paragraph with strong text to emphasize important information."

Difference Between <strong> and <b> Tags

While both the <strong> and <b> tags render text in bold, they serve different purposes. The <b> tag is used purely for visual styling, making text bold without conveying any extra meaning. The <strong> tag, on the other hand, indicates that the text is of strong importance or urgency, adding semantic meaning to the bold text.

HTML Italic Element

The HTML <i> element makes text italic, typically used to denote a different tone or style, such as foreign words, technical terms, or names of ships.

Example
 
<!DOCTYPE html>
<html>
<head>
    <title>HTML Italic Example</title>
</head>
<body>
    <p>This is a normal paragraph.</p>
    <p>This is a paragraph with <i>italic text</i> to denote a different tone or style.</p>
</body>
</html>

Example Explanation

In this example, the <i> tag is used to make "italic text" stand out and denote a different tone or style.

  • Normal Paragraph: "This is a normal paragraph."
  • Italic Text: "This is a paragraph with italic text to denote a different tone or style."

HTML Emphasis Element

The HTML <em> element emphasizes text, typically rendering it in italic and conveying a change in meaning or importance.

Example
 
<!DOCTYPE html>
<html>
<head>
    <title>HTML Emphasis Example</title>
</head>
<body>
    <p>This is a normal paragraph.</p>
    <p>This is a paragraph with <em>emphasized text</em> to convey importance.</p>
</body>
</html>

Example Explanation

In this example, the <em> tag is used to make "emphasized text" stand out and convey importance.

  • Normal Paragraph: "This is a normal paragraph."
  • Emphasized Text: "This is a paragraph with emphasized text to convey importance."

Difference Between <i> and <em> Tags

While both the <i> and <em> tags render text in italic, they serve different purposes. The <i> tag is used for visual styling to denote a different tone or style. The <em> tag, however, conveys semantic emphasis, indicating that the text is of particular importance or carries a different meaning.

HTML Underline Element

The HTML <u> element underlines text, typically used to denote misspelled words or to bring attention to specific text.

Example
 
<!DOCTYPE html>
<html>
<head>
    <title>HTML Underline Example</title>
</head>
<body>
    <p>This is a normal paragraph.</p>
    <p>This is a paragraph with <u>underlined text</u> to denote special attention.</p>
</body>
</html>

Example Explanation

In this example, the <u> tag is used to make "underlined text" stand out and denote special attention.

  • Normal Paragraph: "This is a normal paragraph."
  • Underline Text: "This is a paragraph with underlined text to denote special attention."

HTML Strikethrough Element

The HTML <strike> element draws a line through the text, indicating that it is no longer relevant or accurate.

Example
 
<!DOCTYPE html>
<html>
<head>
    <title>HTML Strikethrough Example</title>
</head>
<body>
    <p>This is a normal paragraph.</p>
    <p>This is a paragraph with <strike>strikethrough text</strike> to indicate it is outdated.</p>
</body>
</html>

Example Explanation

In this example, the <strike> tag is used to make "strikethrough text" stand out, indicating that it is outdated or no longer relevant.

  • Normal Paragraph: "This is a normal paragraph."
  • Strikethrough Text: "This is a paragraph with strikethrough text to indicate it is outdated."

HTML Superscript Element

The HTML <sup> element raises text slightly above the baseline, often used for footnotes, mathematical expressions, or ordinal indicators.

Example
 
<!DOCTYPE html>
<html>
<head>
    <title>HTML Superscript Example</title>
</head>
<body>
    <p>This is a normal paragraph.</p>
    <p>This is a paragraph with 10<sup>2</sup> to represent 10 squared.</p>
</body>
</html>

Example Explanation

In this example, the <sup> tag is used to raise "2" slightly above the baseline to represent "10 squared".

  • Normal Paragraph: "This is a normal paragraph."
  • Superscript Text: "This is a paragraph with 102 to represent 10 squared."

HTML Subscript Element

The HTML <sub> element lowers text slightly below the baseline, often used in chemical formulas or mathematical expressions.

Example
 
<!DOCTYPE html>
<html>
<head>
    <title>HTML Subscript Example</title>
</head>
<body>
    <p>This is a normal paragraph.</p>
    <p>This is a paragraph with H<sub>2</sub>O to represent the chemical formula for water.</p>
</body>
</html>

Example Explanation

In this example, the <sub> tag is used to lower "2" slightly below the baseline to represent the chemical formula for water.

  • Normal Paragraph: "This is a normal paragraph."
  • Subscript Text: "This is a paragraph with H2O to represent the chemical formula for water."

HTML Inserted Text Element

The HTML <ins> element indicates text that has been inserted into a document, typically rendered with an underline.

Example
 
<!DOCTYPE html>
<html>
<head>
    <title>HTML Inserted Text Example</title>
</head>
<body>
    <p>This is a normal paragraph.</p>
    <p>This is a paragraph with <ins>inserted text</ins> to indicate new additions.</p>
</body>
</html>

Example Explanation

In this example, the <ins> tag is used to underline "inserted text" to indicate new additions.

  • Normal Paragraph: "This is a normal paragraph."
  • Inserted Text: "This is a paragraph with inserted text to indicate new additions."

HTML Marked Text Element

The HTML <mark> element highlights text with a background color, indicating it is particularly relevant or important.

Example
 
<!DOCTYPE html>
<html>
<head>
    <title>HTML Marked Text Example</title>
</head>
<body>
    <p>This is a normal paragraph.</p>
    <p>This is a paragraph with <mark>highlighted text</mark> to indicate its importance.</p>
</body>
</html>

Example Explanation

In this example, the <mark> tag is used to highlight "highlighted text" with a background color to indicate its importance.

  • Normal Paragraph: "This is a normal paragraph."
  • Marked Text: "This is a paragraph with highlighted text to indicate its importance."

FAQ

How do I create a block of preformatted text?

How do I create a block of preformatted text? Use the <pre> tag to create a preformatted text block. This tag preserves whitespace and line breaks, displaying the text exactly as it is written in the HTML code.
What are physical and logical text formatting tags in HTML? Physical tags (e.g., <b>, <i>): define the specific style applied to the text. Logical tags (e.g., <strong>, <em>): indicate the meaning or importance of the text, which may or may not change the visual style.
Can I combine multiple text formatting tags? Yes, you can combine multiple text formatting tags to achieve the desired effect. For example, you can make text both bold and italic by nesting the <b> and <i> tags: <b><i>Bold and Italic Text</i></b>
What is the <code> tag used for? The <code> tag defines a piece of computer code. It typically renders the text in a monospaced font, distinguishing it from regular text.
What is HTML text formatting? HTML text formatting refers to the various HTML elements and tags used to change the appearance and style of text on a web page. These include elements for making text bold, italicized, underlined, and more.
What are the text formatting tags in HTML? Here is a list of commonly used text formatting tags in HTML:
  • Bold Text
  • Italic Text
  • Underlined text
  • Strikethrough
  • Inserted
  • Smaller
  • Marked or Highlighted text
  • Subscript or Superscript
  • Monospaced or code text
  • Quotation
  • Keyboard input
  • Variable
  • Sample Output
  • Abbreviation and Acronyms
  • Bidirectional text override
How to keep text formatting in HTML? To keep text formatting in HTML, you can use various text formatting tags like <b>, <i>, <u>, and <pre>. These tags help retain the desired formatting on your web pages.
How to change text style in HTML? To change text style in HTML, you can use CSS along with HTML tags. For example, the <span> tag can be styled using CSS properties like font-family, font-size, color, etc., to change the appearance of the text.
एचटीएमएल टेक्स्ट फॉर्मेटिंग क्या है? एचटीएमएल टेक्स्ट फॉर्मेटिंग विभिन्न एचटीएमएल तत्वों और टैग्स का उपयोग करके वेब पेज पर टेक्स्ट की उपस्थिति और शैली को बदलने की प्रक्रिया है। इसमें टेक्स्ट को बोल्ड, इटैलिक, अंडरलाइन आदि करने के लिए टैग्स शामिल हैं।
What is text formatting explain? Text formatting in HTML involves using various tags to alter the appearance of text. These tags can make text bold, italic, underlined, and more, thus enhancing the readability and visual appeal of web content.
What is HTML text used for? HTML text is used to create and format text on web pages. It allows web developers to structure content and apply styles to enhance the visual presentation and user experience.
How to auto format HTML? To auto format HTML, you can use tools like Prettier, an extension for code editors like VS Code. These tools automatically format your HTML code according to defined standards, improving readability and consistency.
What are HTML Formatting tags? HTML formatting tags include <b> for bold, <i> for italic, <u> for underline, and others. These tags help in styling the text to enhance readability and presentation.
How do you format text in HTML? You format text in HTML by using tags like <b>, <i>, <u>, <pre>, and <p>. These tags apply different styles to the text, such as making it bold, italicized, underlined, or preserving whitespace and line breaks.