Text Formatting

There are two ways to format text with HTML. One way is to use HTML tags, which specify some characteristic of the text that should cause it to render differently. The other way is to use CSS typography properties to define specific formatting for a text element.

Note: Modern HTML specifications eschew using HTML tags to specify specific formatting of elements (bold, underline, italic etc.), instead using HTML to describe the characteristics of the text, allowing the software rendering the HTML to decide how tags are displayed. Best practice to define specific styling of text is to use CSS.

HTML Tags

The following HTML elements can affect the formatting of text:

  • <b>: Represents text that the reader’s attention should be directed to, without further significance. Usually displayed with boldface.
  • <em>: Represents text which is emphasized. Usually displayed with italics.
  • <h1> - <h6>: Represents various heading levels for text. Usually affects font size and weight.
  • <i>: Represents text set off as an idiomatic expression, technical term, taxonomical designation and so on. Usually displayed with italics.
  • <strong>: Represents text that is urgent or important. Usually displayed with boldface.
  • <u>: Represents text to be displayed with a non-textual annotation. Usually displayed using a solid underline.

While legacy usage of the <b>,<i>, and <u> elements were to explicitly format text in a HTML document, that use has been deprecated. These tags now indicate characteristics of the text without specifying a definitive format for how it is rendered. If a specific format is required, CSS should be used.

Style HTML Using CSS

To render text with some specific format, CSS is used. CSS can be applied using a stylesheet or using the style attribute. The following CSS properties can be used to format text:

  • @font-face: Specifies a custom font to be used to display text.
  • font: Shorthand property that sets different properties for an element’s font in a single declaration.
  • font-family: Specify the typeface.
  • font-size: Sets the text size.
  • font-style: To set the font style in which text will appear. Should be used instead of <i> to display italics.
  • font-weight: To set the text to be thicker or thinner. Should be used instead of <b> to make text bold.
  • text-decoration: To add lines on the text. Should be used instead of <u> to underline text.
  • text-shadow: Adds shadow to text.

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn HTML on Codecademy