HTML Formatting Tutorial

HTML

In this section we will learn how to format a string text in an HTML document.

Formatting in HTML

HTML has provided multiple elements that are used for formatting a text content! For example, if you want to make a text into bold face, you can use the <b> element. If you want to change the style of a text into italic, you can use the <i> element and so on.

There are more elements related to styling a text content which in this section we will learn about them.

Bold Text in HTML: <b> and <strong> HTML tags for Bold

Both <b> and <strong> elements are used to turn the face of a text element into bold! You might be thinking if both of these elements are doing the same thing, then what’s the difference here?

Well, the <b> element only turns the face of a text into bold! But when it comes to <strong> element, the content of the element not just turn into bold but also they get strong emphasis as well. Basically, when a text reader software for blind people come across the content of the <strong> element, it puts stronger weight on the text and read it with more emphasis on the content.

Example: text bold in HTML

<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 600px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<b>This content is written within the body of the b element</b> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<strong>This content is written within the body of the strong element</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Italicize in HTML: <i> and <em> HTML Tags for Italic

The <i> and <em> elements also take text within their content and turn the style of that content into italic.

The main difference between the two however is that:

  • The <i> element only turns the style into italic.

  • But the <em> element not just turn the content into italic
    style but also when it comes to text reader software for blind people,
    it will try and read the content within the <em> element with more
    emphasis.

Example: HTML for Italics

<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 600px;
}
</style>
</head>
<body>
<p><i>This text is written within the body of the i element </i><br>
<em>But this text is written within the body of the em element</em>
</p>
</body>
</html>

HTML Subscript Tag: <sub> Element

The HTML element <sub> stands for subscript text and we use it when we want to add a subscript text to a content. Subscript text is a text that appears half a character below the normal line.

One of the best use cases for this element is when we want to represent chemical formula in a document.

Example: using <sub> tag in HTML

<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 600px;
}
</style>
</head>
<body>
<p>The chemical component of water is: H<sub>2</sub>O</p>
</body>
</html>

HTML Superscript Tag: <sup> Element

The <sup> element is the opposite of the <sub> element! It stands for superscript and is used when we want to add a text content half a character above the normal line.

For example, for math values when we want to show the power of a number, this element can become useful.

Example: using <sup> in HTML

<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 600px;
}
</style>
</head>
<body>
<p>This is how we write two to the power of 3: 2<sup>3</sup></p>
</body>
</html>

HTML Deleted Text

Sometimes, there is a text content in your document and you know it’s outdated or written in a wrong format and we should make it correct. Now, if you want to hold that content in the page and let people know that the content is deleted, you can use the <del> element.

The <del> element stands for <delete> and we use it when we want to take a mark on a text content as it’s been deleted.

Example: using <del> tag in HTML

<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 600px;
}
</style>
</head>
<body>
<p><del>Bill Gates</del> Steve Jobs: You can't connect the dots looking forward; you can only connect them looking backwards.</p>
</body>
</html>

HTML Mark Text: <mark> Element

The <mark> element is used to mark or highlight part of a text content. We use it when we want to make part of a text content noticeable by putting a mark on it.

Example: using <mark> element in HTML

<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 600px;
}
</style>
</head>
<body>
<p><del>Bill Gates</del> <mark>Steve Jobs</mark>: You can't connect the dots looking forward; you can only connect them looking backwards.</p>
</body>
</html>