HTML Formatting

You can use a range of tags in HTML to format text on your webpage. This tutorial covers the following HTML formatting tags:

      • <strong> is used for bold text
      • <b> is also used for bold text
      • <em> is used for italicised text
      • <i> is also used for italicised text
      • <u> is used for underlined text
      • <del> is used for deleted text
      • <sub> is used for subscripted text
      • <sup> is used for superscripted text
      • <mark> is used for marked/highlighted text
      • <hr/> is used for a horizontal rule (line) as seen below

The video below shows how to use these tags and also how to write comments inside your code that aren’t displayed on the webpage by the browser. Comments which are only visible in your code are written inside the <!– and –> tags.

Watch the video below and then scroll down to see the sample code and find out what each line of code does.

The code below shows how to use these different HTML formatting tags.

<!DOCTYPE html>
<html>
<head>
 <title>HTML Formatting</title>
 <meta charset="utf-8"/>
</head>

<body>
<p>This is a paragraph of plain text.</p>
<hr/>
<p>This is <strong>bold</strong> text and this is <em>italicised</em> text.</p>
<p>This is <u>underlined</u> text</p>
<p>This is <del>deleted</del> text and this is <mark>highlighted</mark> text.</p>
<p>This is <sub>subscripted</sub> text and this is <sup>superscripted</sup> text.</p>
<!-- this is a comment -->
</body>

</html>

A comment is not actually displayed in the web browser. It is hidden and only visible inside your code. You can use comments to include the author of the code and date it was created. You can also use it to make notes on code that needs to be changed or what different bits of code are used for.

The code from above would display the following content in your web browser (note that the comment is not visible):

HTML formatting
HTML formatting

The difference between the <strong> and <b> tags

The <strong> tag is a part of HTML5. The <b> tag has been around for a very long time. The <em> tag is also a HTML5 tag, whereas the <i> tag has been around for a long time. In most browsers, it will appear that <strong> and <b> both do the same thing – they make text bold. And it may also appear that <em> and <i> do the same thing – they italicise text. However, there is a difference.

The <b> tag is a style. It describes how the text it surrounds should be displayed. The <strong> tag is indication of how something should be understood. It describes the text it surrounds. (eg. this text should be stronger than the rest of the text you’ve displayed).