Lesson 3 – HTML5 Formatting Elements

HTML5 formatting elements are special types of elements which represent or display special types of text. Some of the most common of these elements are as under.

  • <b> for Bold text
  • <strong> for Important text
  • <em> for Emphasized text
  • <ins> for Inserted text
  • <i> for Italic text
  • <small> for Small text.
  • <mark> for Marked text
  • <del> for Deleted text
  • <sup> for Superscript text
  • <sub> for Subscript text

Now we see all these formatting elements in action.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Formatting Elements</title>
</head>
<body>
    <p><b>for Bold text</p>
    <p><strong>for Important text</strong></p>
    <p><em>for Emphasized text</em></p>
    <p><ins>for Inserted text</ins></p>
    <p><i>for Italic text</i></p>
    <p><small>for Small text</small></p>
    <p><mark>for Marked text</mark></p>
    <p><del>for Deleted text</del></p>
    <p><sup>for Superscript text</sup></p>
    <p><sub>for Subscript text</sub></p>      
</body>
</html>

You can also see that we have put our formatting elements within paragraph elements. Elements enclosed within other elements are called Nested Elements. In fact, both the Head and Body tags are nested within the HTML tag. As a matter of fact, it is very common for big websites to have layers and layers of nested elements in their HTML5 code.

The browser will interpret the above code as follows.

Formatting Elements actually help you as a developer to represent special or important text in more prominent and pleasant manner to the readers.

The Line Break <br> element and the Horizontal Rule (hr>

There is no line break in HTML5 by default. You cannot use Enter (Windows) and Command (MAC) to break the line and start the next sentence on a new line. So, what do you do if you want to break the line without using Paragraph element? You use the Line Break or <br> element as shown in the following code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Formatting Elements</title>
</head>
<body>
    we are going to break this line.<br>
    The next sentence wills start on a new line. 
</body>
</html>

This is how the code will look like in the browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Formatting Elements</title>
</head>
<body>
    <p>HTML is a markup language which describes web pages</p> 

    <hr>

    <p>CSS provides the style and shape to an HTML5 document</p>
</body>
</html>

When you use Horizontal Rule, the browser practically separates two elements by “drawing” a line between them. Look at the following figure for clarification.

Void Elements

Both Horizontal Rule and Line Break elements have no closing tags as well. There are many other elements such as Image element which have only opening tag but no End or closing tag. This is because you will not put any text within the image or Line Break tags. Therefore, there is no need for the closing tag in these cases. These elements are often called Void Elements as well.

In the next chapter, we will discuss HTML5 Hyperlinks in detail.