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

Embed style markup tags for italics and bold in your HTML header code to add emphasis to your list of subjects.

Headings

Heading tags are the simplest way to divide your document. If you think of your site as a newspaper, then the headings are the headlines in 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>

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 paragraph 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>, many people find <b> for "bold" and <i> for "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 Are 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 employ specific meanings:

  • <b> denotes text that isn't more important than the surrounding text, but the 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 the 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.

Italics in Headers

Nothing precludes you from using italic tags in a header tag, although some browsers may strip this context. It's usually better to use CSS to ensure you obtain the visual outcome you're aiming for.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Create Bold and Italic Headings in HTML." ThoughtCo, Sep. 30, 2021, thoughtco.com/headings-bold-and-italic-3464048. Kyrnin, Jennifer. (2021, September 30). How to Create Bold and Italic Headings in HTML. Retrieved from https://www.thoughtco.com/headings-bold-and-italic-3464048 Kyrnin, Jennifer. "How to Create Bold and Italic Headings in HTML." ThoughtCo. https://www.thoughtco.com/headings-bold-and-italic-3464048 (accessed March 28, 2024).