Skip to content

Text Styles (Bold, Italics, Underline)

In HTML, text styles such as bold, italics, and underline are used to emphasize or distinguish parts of text. These styles can be applied using specific HTML tags or CSS properties. Here’s an explanation of how to use each style in HTML:

Bold Text

To make text bold, you can use the <b> or <strong> tags.

  • <b> Tag: This tag makes the enclosed text bold without implying any extra importance.

<p>This is <b>bold</b> text.</p>

  • <strong> Tag: This tag also makes the text bold but indicates that the enclosed text is of strong importance or has a semantic emphasis.

<p>This is <strong>important</strong> text.</p>

Italic Text

To italicize text, you can use the <i> or <em> tags.

<i> Tag: This tag italicizes the enclosed text without implying any extra emphasis.

<p>This is <i>italic</i> text.</p>

<em> Tag: This tag italicizes the text and indicates that the enclosed text is emphasized

<p>This is <em>emphasized</em> text.</p>

Underlined Text

To underline text, you use the <u> tag.

  • <u> Tag: This tag underlines the enclosed text. It is important to note that underlined text can be confused with hyperlinks, so use it sparingly.

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

Combining Text Styles

You can combine these tags to apply multiple styles to a single piece of text. For example:

<p>This is <strong><em>bold and italic</em></strong> text.</p>

CSS for Text Styles

In addition to HTML tags, you can use CSS to style text. This provides more flexibility and is the preferred method for applying styles in modern web development.

  • Bold:

<p style=”font-weight: bold;”>This is bold text.</p>

  • Italic:

<p style=”font-style: italic;”>This is italic text.</p>

  • Underline:

<p style=”text-decoration: underline;”>This is underlined text.</p>

Summary

  • Bold Text: Use <b> or <strong> tags.
  • Italic Text: Use <i> or <em> tags.
  • Underlined Text: Use the <u> tag.
  • CSS Styling: Use CSS properties like font-weight, font-style, and text-decoration.

Using these HTML tags and CSS properties, you can effectively style text on your web pages to enhance readability and emphasize important information.