How to Create Bold and Italic Headings in HTML

Creating design sections on your page

Old Gothic Bold Italic
Stewf/Flikr/CC BY 2.0

Headings are a useful way to organize your text, create useful divisions, and optimize your webpage for search engines. You can easily create headings using HTML heading tags. You can also change the look of your text with the bold and italic tags.

Headings

Heading tags are the simplest way to divide up your document. If you think of your site as a newspaper, then the headings are the headlines on the newspaper. The main headline is an h1 and subsequent headings are h2 through h6.

Use the following codes to create the HTML.

<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

Tips to Remember

  • Try to keep your headings in a logical order, h1 comes before h2, which comes before h3, and so on.
  • Don't worry too much about how the headings look—you should use CSS to style headlines rather than using a headline out of order.
  • Headline tags are block-level elements, so they put in line breaks for you. Don't put P tags inside heading tags.

Bold and Italic

There are four tags you can use for bold and italic:

  • <strong> and <b> for bold
  • <em> and <i> for italic

It doesn't matter which you use. While some prefer <strong> and <em>, but many people find <b> for "bold" and <i> italic easier to remember.

Simply surround your text with the opening and closing tags, to make the text bold or italic:

<b>bold</b>
<i>italic</i>

You can nest these tags  (which means that you can make text both bold and italic) and it doesn't matter which is the outer or inner tag.

For example:

This text is bold

<strong>This text is bold</strong>

This text is in italics

<em>This text is italics</em>

This text is both bold and italics

<strong><em>This text is both bold and italics</em></strong>

Why There Two Sets of Bold and Italics Tags

In HTML4, the <b> and <i> tags were considered style tags that affected only the look of text and said nothing about the contents of the tag, and it was considered bad form to use them. Then, with HTML5, they were given a semantic meaning outside the look of the text.

In HTML5 these tags have specific meanings:

  • <b> denotes text that isn't more important than the surrounding text, but typical typographic presentation is bold text, such as keywords in a document abstract or product names in a review.
  • <i> denotes text that isn't more important than the surrounding text, but typical typographic presentation is italic text, such as a book title, technical term, or phrase in another language.
  • <strong> denotes text that has a strong importance compared to the surrounding text.
  • <em> denotes text that has an emphatic stress compared to the surrounding text.