Chapter 4 20 mins

Learning outcomes:

  1. Headings (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
  2. Paragraphs (<p>)
  3. Bold and italic text (<strong> and <em>)
  4. The <b> and <i> elements
  5. Superscripts and subscripts (<sup> and <sub>)
  6. Line breaks (<br>)


HTML defines six elements to denote headings on webpages, in order of decreasing hierarchy, importance and size. They are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

The 'h' stands for 'heading' while the number specifies the hierarchy of the heading. <h1> is the biggest and most important of headings, while <h6> is the smallest and least important.

In the following code, we layout all the six different headings, one after another, each with a different piece of text:

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

Here's the output produced:

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Live Example

See how the font sizes decrease as we go down.

There are only six levels of heading elements in HTML. So, for instance, there's nothing such as <h7>.

You might be thinking that the font size of each heading is fixed, as shown above, but that's not the case; we could customize the size of any heading whichever way we like, by using CSS (we'll learn that later on).

But obviously, it's only sensible to give larger sizes to higher-level headings, and smaller sizes to lower-level headings.

As per usability guidelines, it's recommended to have exactly one <h1> element on a webpage.

Likewise, the following is not desirable:

<!DOCTYPE html>
   <title>Working with text</title>
   <h1>Heading 1</h1>
   <h1>A subheading</h1>
   <p>This is a paragraph</p>

Stick to one and only one <h1> element:

<!DOCTYPE html>
   <title>Working with text</title>
   <h1>Heading 1</h1>
   <h2>A subheading</h2>
   <p>This is a paragraph</p>


The <p> element is used to denote a paragraph in HTML.

Paragraphs have vertical margins around them to be spaced out from other paragraphs, which is quite a common thing in copy texts.

In the following code, we create three different paragraphs:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is yet another paragraph.</p>

This is a paragraph.

This is another paragraph.

This is yet another paragraph.

Notice the vertical spacing between the paragraphs, a courtesy of the paragraphs themselves.

If you're creating a webpage for, let's say, a blog article, you'll be using <p> to denote each paragraph in the article.

One habit that you ought to develop, or at least start developing, at this stage is to use an HTML element solely for the purpose it's meant for.

For example, technically, one can give a heading using <p> but obviously it would be quite counter-intuitive to do so. Similarly, paragraph text could be given using an <h5> element but, again, there's absolutely no sense in doing so.

Bold and italicize

If you're familiar with word processor software or just about any other document editing software, you'll be aware of the following two fundamental text styling options:

  • Bold, to make text appear thicker.
  • Italicize, to make text appear slanted.

In HTML, we can accomplish this using the <strong> and <em> elements.

The <strong> element indicates that the enclosed text should be given 'strong' importance. The <em> element, on the otherhand, stands for 'emphasized' and indicates that the enclosed text carries emphasis to it.

As can be expected, both <strong> and <em> are container elements.

In the following code, we experiment around with <p>, <strong> and <em>:

<p>This is a <strong>strong</strong> word.</p>
<p>While this is an <em>emphasized</em> word.</p>

The <strong> element is used in the first <p> whereas <em> is used in the second one.

Let's see the output:

This is a strong word.

While this is an emphasized word.

We can even create bold-italicized text by combining <strong> and <em>.

An illustration follows:

<p>This is a <strong><em>strong-emphasized</em></strong> word.</p>

This is a strong-emphasized word.

The order of elements can even be switched; it's not mandatory to have <strong> first:

<p>This is a <em><strong>strong-emphasized</strong></em> word.</p>

This is a strong-emphasized word.

Pretty basic, right?

The similar <b> and <i> elements

While learning about <strong> and <em>, it's worthwhile discussing about a similar set of elements in HTML to produce a similar visual effect.

There exist two elements in HTML to produce the same visual effect as <strong> and <em>, namely <b> and <i>, respectively.

<b> stands for 'bold' whereas <i> stands for 'italics'.

Consider the following code, demonstrating both these elements:

<p>This is a <b>bold</b> word.</p>
<p>While this is an <i>italicized</i> word.</p>

This is a bold word.

While this is an italicized word.

As is apparent, the output here is the exact same as before.

So now what's the difference between these two sets of elements?

Well, the difference has something to do with semantic HTML, which we'll learn in detail in the HTML Foundation — Semantic HTML chapter.

To state it briefly, <b> and <i> are both exclusively meant to be used for visual styling; they don't carry any particular meaning with them.

For instance, if we make a piece of text bold using <b>, the text will only be made bold visually; semantically, that is, meaning-wise, it will still be considered normal text. However, if we make the same text bold using <strong>, it'll be styled and at the same time carry meaning with it, i.e. of containing some very important information.

Precisely speaking, <b> and <i> are both remnants of HTML's past, when document styling was also done in HTML in addition to defining its content and structure. Later on, in order to separate styling concerns from HTML came in the dedicated styling language, CSS.

So does this mean that <b> and <i> are out-of-fashion and deprecated?

Well, NOT at all! Both <b> and <i> are part of the HTML5 specification, perhaps because of their lucidity. Yes they are old but not deprecated by any means.

So which one should we use?

Well, let's start off with <i> and <em> as it's a bit easier to decide between them.

Should we use <i> or <em>?

Commonly these days, many icon libraries are used on websites to be able to work with icons as mere text and thus support easier styling. Now to denote each icon, these libraries typically use <i>.

Why? Well, because the letter 'i' can mean to refer to the word 'icon' (and there's no other element in HTML that resembles this word).

Following this nice convention of icon libraries, even if we don't use one, we should reserve the <i> element for icons, which leaves us with <em> to denote italic text.

In short, <i> for icons, <em> for italic text.

Now, let's talk about <b> and <strong>.

Should we use <b> or <strong>?

Well, unlike <i>, the <b> element isn't used for anything else besides styling text as bold. So, it's technically a little bit preferential as to whether you want to use <b> or <strong> to make text bold.

But let's try to come down to a conclusion.

When you really want to indicate that something in an HTML document is extremely important information, use <strong>. Otherwise, when you're just casually making text bold, <b> would be perfectly fine.

In short, <b> for making text bold as usual, <strong> when the importance of information is ought to be conveyed.

To summarize this whole discussion, <b>/<i> and <strong>/<em> shouldn't be that confusing for you to select between.

See what works for you, what you're more comfortable with, what makes sense in a given scenario (such as when emphasizing information is a real requirement), and make your ultimate decision.

If things are still unclear, or you just want more information regarding the <b> and <i> elements, there's a good discussion on the HTML Standard FAQ.

Superscript and subscript

Do you know what is superscript and subscript?

Well, anything that is above the normal line of text is called a superscript while anything below it is called a subscript. 'Super' for above and 'sub' for below.

Typically, both superscripts and subscripts are slightly smaller in size than the rest of the text.

Here's a quick demonstration:

Superscript and subscript
Superscript and subscript

In HTML, we have the ability to denote both superscripts and subscripts using the <sup> and <sub> elements, respectively.

Let's try denoting the square of 11, using a superscript for the exponent 2:

<p>11<sup>2</sup> = 121</p>

112 = 121

Let's also consider an example for a subscript.

In the following code, we denote a price value, with the fractional part shown as a subscript:

<p>The final price is $6<sub>.99</sub></p>

The final price is $6.99

Line breaks via <br>

In HTML, there is this behavior exhibited by many elements whereby sequences of whitespace in the source code are replaced by a single space in the output.

Here, whitespace simply refers to any character that literally denotes 'white' space, including an actual space, a tab, a newline, a carriage return, and so on.

For instance, consider the following <p> element:

   This is sentence 1.
   This is sentence 2.

We have a sentence followed by another sentence on a new line.

Surprisingly enough, when we take a look at the rendered output, we see that there is no new line for the second sentence; both are rendered on the exact same line.

This is sentence 1. This is sentence 2.

This is because the newline and the spaces after the first sentence, as highlighted below:

   This is sentence 1.
   This is sentence 2.

effectively get replaced by a single space in the output.

So then what if we want a new line in the output?

Well, we have two choices for this:

  • Use the <br> element.
  • Use preformatting, for e.g. with the help of the <pre> element (as discussed in the next-to-next chapter, HTML Advanced Text).

For now, we're concerned with the former so let's explore more about it.

The <br> element stands for 'break' and serves to introduce a line break into the normal flow of text rendered out on the webpage.

Whenever we need a literal newline character output in HTML, we can use <br>.

The <br> element is a void element, i.e. it doesn't have a separate ending tag unlike a container element (such as <p>).

Let's fix the code above by adding a <br> after the first sentence to denote a newline:

   This is sentence 1.<br>
   This is sentence 2.

This is sentence 1.
This is sentence 2.

See how the second sentence now shows up on a new line, thanks to <br>.

If we need two newlines, we can use two consecutive <br>s. Three newlines, three <br>s. And so on and so forth.

Shown below is a quick example to demonstrate this:

   This is sentence 1.<br>
   This is sentence 2.<br><br>
   This is sentence 3.

This is sentence 1.
This is sentence 2.

This is sentence 3.


Now one might get confused as to when to use <br> and when to use <p>, since they both can be used to put a piece of text on a new line (although not in the same way). Well, it's not very difficult to be able to make this distinction.

A <p> element should always be used whenever we wish to denote a new paragraph of text. That paragraph doesn't necessarily have to be a literal paragraph (containing a long piece of text); it can even be just a single word. Essentially, whenever we wish to have a separate block of text, we should go for the <p> element.

On the other hand, the <br> element should only be used when we want newlines within a block of text. A familiar example to help illustrate this idea is that of lyrics.

Suppose we have to represent a chorus of lyrics in HTML, with each lyrics line appearing on a new line in the output, as follows:

This is lyrics line 1.
And this is line 2.
Moving on, this is line 3.
To end with, this is line 4.

In this case, the entire chorus text could go inside <p> since it denotes one block of text, while <br> could be used to add a newline character at the end of each line within the <p>.

Here's the HTML code to represent the lyrics shown above:

   This is lyrics line 1.<br>
   And this is line 2.<br>
   Moving on, this is line 3.<br>
   To end with, this is line 4.<br>

This is lyrics line 1.
And this is line 2.
Moving on, this is line 3.
To end with, this is line 4.

Just for a side note, as we become more mature with HTML, we'll see that this isn't the only (or the best) way to denote a block of lyrics in HTML. But at least, for now, it helps us demonstrate the difference between <p> and <br>.

It's really important for beginners to not develop the habit of using <br>s where it makes more sense to instead use a new <p> element.

Don't misuse <br>s!

It's worthwhile noting here that even though <br> serves a pretty useful purpose of adding newlines in HTML output, we must be careful not to misuse it.

For example, if we want different pieces of text (denoting different paragraphs) on separate lines, we're much better off at using multiple <p> elements for those pieces of text instead of multiple <br>s within one <p>.

Only use <br> when there's no other sensible solution.

"I created Codeguage to save you from falling into the same learning conundrums that I fell into."

— Bilal Adnan, Founder of Codeguage