Learn how to organize your text and create useful divisions of your web pages 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 HTML that looks like the image above.

<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>

Some things 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 and <em> and <i> for italic. It doesn't matter which you use, I prefer STRONG and EM, but many people find B and I easier to remember.

Simply surround your text with the opening and closing tags, to make the text bold (<b>bold</b>) or italic (<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.

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 are 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.