HTML text formatting and decoration allow you to add unique elements and special meaning to the text that is displayed on a web page. It is a technique for making certain text elements stand out from the other texts on the page by incorporating designs or decorations into them. 

You can format text in HTML using a variety of elements to give it a different look. Let’s look at some of them.

HTML Elements for Formatting and Decoration

Some of the elements you can use to format text in HTML include:
<b> – Bold text: This element makes text characters bold.

<!DOCTYPE html>
<html>
<head>
  <title>FanielTech HTML Tutorial</title>
</head>
<body>

<p>This text does not have any HTML formatting elements yet</p>


<!-- the words in the b tag is bolded automatically -->

<p><b>This text contains the bold formatting element </b></p>

</body>
</html>

<strong> – This element is used to show a user how important a text is.

<!DOCTYPE html>
<html>
<head>
  <title>FanielTech HTML Tutorial</title>
</head>
<body>

<p>This text does not have any html formatting elements yet</p>


<!-- the words in the strong tag is displayed in a way that shows users concern and importance -->

<p>This text contains the <strong>strong formatting elements </strong></p>

</body>
</html>

<i> – This is used to make text appear in italic format

<!DOCTYPE html>
<html>
<head>
  <title>FanielTech HTML Tutorial</title>
</head>
<body>

<p>This text does not have any html formatting elements yet</p>

<p><i>This text contains the italic formatting element </i></p>

</body>
</html>

<em> – This is used to display an emphasized text

<!DOCTYPE html>
<html>
<head>
  <title>FanielTech HTML Tutorial</title>
</head>
<body>

<p>This text does not have any html formatting elements yet</p>

<!-- the em tag formats texts it displays on the browser to shows emphasis features-->
<p><em>This text contains emphasized formatting element </em></p>

</body>
</html>

<mark> – Marked text

<!DOCTYPE html>
<html>
<head>
  <title>FanielTech HTML Tutorial</title>
</head>
<body>

<p>This text does not have any html formatting elements yet</p>

<!-- the mark Tag helps to highlight the articles -->

<p><mark>This text the marked  formatting element </mark></p>

</body>
</html>

<small> – Smaller text

<!DOCTYPE html>
<html>
<head>
  <title>FanielTech HTML Tutorial</title>
</head>
<body>

<p>This text does not have any html formatting elements yet</p>

<!-- the small Tag helps to make words smaller -->
<p><small >This text contains the small formatting element </small></p>

</body>
</html>

<del> – Deleted text

<!DOCTYPE html>
<html>
<head>
  <title>FanielTech HTML Tutorial</title>
</head>
<body>

<p>This text does not have any html formatting elements yet</p>

<!-- the del tag eliminates list of words you don't want no more in tyour code-->
<p><del>This text contains the deleted text formatting element </del></p>

</body>
</html>


<ins> – Inserted text

<!DOCTYPE html>
<html>
<head>
  <title>FanielTech HTML Tutorial</title>
</head>
<body>

<p>This text does not have any html formatting elements yet</p>


<!-- the ins tag Tag helps to insert new words into your peoject -->

<p><ins>This text contains the  inserted formatting element </ins></p>

</body>
</html>

<sub> – Subscript text

<!DOCTYPE html>
<html>
<head>
  <title>FanielTech HTML Tutorial</title>
</head>
<body>

<p>This text does not have any html formatting elements yet</p>

<!-- the mark Tag helps to make the selected word a subscript -->
<p><sub>This text contains subscript formatting element </sub></p>

</body>
</html>

The Text-decoration Property 

Text-decoration is the property to apply underline, overline, line-through, underline overline values to the text to decorate it.

Let’s look at the types of text decoration in HTML.

text-decoration: none

<!DOCTYPE html>
<html>
<head>
  <title>FanielTech HTML Tutorial</title>

<!-- the code below shows how you can style the elements in the body -->

<style>
h1 {
text-align:center;
color:red;
}
.decor {
text-decoration: none;
font-size:33px;
}
</style>
</head>
<body>

<h1>This is an example for text-decoration:none </h1>

<!--text formatting and decoration allow you to add unique elements and special meaning to the text that is displayed on a web page-->

<p class="decor">
HTML text formatting and decoration allow you to add unique elements and special meaning to the text that is displayed on a web page. It is a technique for making certain text elements stand out from the other texts on the page by incorporating designs or decorations into them.

</p>
</body>
</html>

text-decoration: overline

<!DOCTYPE html>
<html>
<head>
  <title>FanielTech HTML Tutorial</title>

<!-- this example focus on the text decoration overline property -->

<style>
h1 {
text-align:center;
color:yellow;
}
.decor {
text-decoration: overline;
font-size:35px;
}

</style>
</head>
<body>

<h1>This is an example for text-decoration:overline </h1>
<p class="decor">
HTML text formatting and decoration allow you to add unique elements and special meaning to the text that is displayed on a web page. It is a technique for making certain text elements stand out from the other texts on the page by incorporating designs or decorations into them.
</p>
</body>
</html>

text-decoration: line-through

<!DOCTYPE html>
<html>
<head>
  <title>FanielTech HTML Tutorial</title>
<!-- the code example focuses on the line through text decoration feature -->


<style>
h1 {
text-align:center;
color:blue;
}
.decor {
text-decoration:  line-through;
font-size:20px;
}

</style>
</head>
<body>

<h1>This is an example for text-decoration: line-through </h1>
<p class="decor">
HTML text formatting and decoration allow you to add unique elements and special meaning to the text that is displayed on a web page. It is a technique for making certain text elements stand out from the other texts on the page by incorporating designs or decorations into them.
</p>
</body>
</html>

text-decoration: underline

<!DOCTYPE html>
<html>
<head>
  <title>FanielTech HTML Tutorial</title>
<!-- the example focuses on the underline text decoration element -->

<style>
h1 {
text-align:center;
color:green;
}
.decor {
text-decoration:  underline;
font-size:20px;
}

</style>
</head>
<body>

<h1>This is an example for text-decoration: underline </h1>
<p class="decor">
HTML text formatting and decoration allow you to add unique elements and special meaning to the text that is displayed on a web page. It is a technique for making certain text elements stand out from the other texts on the page by incorporating designs or decorations into them.
</p>
</body>
</html>

Conclusion

In this article, you learned about HTML text formatting and decoration.

Categorized in:

HTML