HTML Text

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>
<html>
<head>
   <title>Working with text</title>
</head>
<body>
   <h1>Heading 1</h1>
   <h1>A subheading</h1>
   <p>This is a paragraph</p>
</body>
<html>

Stick to one and only one <h1> element:

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

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

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  and  elements.

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

As can be expected, both  and  are container elements.

In the following code, we experiment around with ,  and :

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

The  element is used in the first  whereas  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  and .

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

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

This is a strong-emphasized word.

Pretty basic, right?

While learning about  and , 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  and , namely  and , respectively.

 stands for 'bold' whereas  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,  and  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 , 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 , it'll be styled and at the same time carry meaning with it, i.e. of containing some very important information.

Precisely speaking,  and  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  and  are out-of-fashion and deprecated?

Well, NOT at all! Both  and  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  and  as it's a bit easier to decide between them.

Should we use `` or ``?

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 .

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  element for icons, which leaves us with  to denote italic text.

In short,  for icons,  for italic text.

Now, let's talk about  and .

Should we use `` or ``?

Well, unlike , the  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  or  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 . Otherwise, when you're just casually making text bold,  would be perfectly fine.

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

To summarize this whole discussion, / and / 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  and  elements, there's a good discussion on the HTML Standard FAQ.

Why are some presentational elements like ,  and  still included? — The HTML Standard FAQ.

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

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

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

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

11² = 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

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

<p>
   This is sentence 1.
   This is sentence 2.
</p>

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:

<p>
   This is sentence 1.
   This is sentence 2.
</p>

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

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

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

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

This is sentence 1.
This is sentence 2.

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

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

Shown below is a quick example to demonstrate this:

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

This is sentence 1.
This is sentence 2.

This is sentence 3.

Easy?

Now one might get confused as to when to use   and when to use , 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  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  element.

On the other hand, the   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:

(Chorus)
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  since it denotes one block of text, while   could be used to add a newline character at the end of each line within the .

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

<p>
   (Chorus)<br>
   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>
</p>

(Chorus)
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  and  .

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

Don't misuse ` `s!

It's worthwhile noting here that even though   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  elements for those pieces of text instead of multiple  s within one .

Only use   when there's no other sensible solution.

Headings

Paragraphs

Bold and italicize

The similar `<b>` and `<i>` elements

Should we use `<i>` or `<em>`?

Should we use `<b>` or `<strong>`?

Superscript and subscript

Line breaks via `<br>`

Don't misuse `<br>`s!

More courses

PHP

Advanced JavaScript

Headings

Paragraphs

Bold and italicize

The similar <b> and <i> elements

Should we use <i> or <em>?

Should we use <b> or <strong>?

Superscript and subscript

Line breaks via <br>

Don't misuse <br>s!

More courses

PHP

Advanced JavaScript

The similar `<b>` and `<i>` elements

Should we use `<i>` or `<em>`?

Should we use `<b>` or `<strong>`?

Line breaks via `<br>`

Don't misuse `<br>`s!