HTML TUTORIAL

How To Format Web Documents Using HTML

HTML FORMATTING
Written by ikenna

In this short tutorial, we will be looking at how to format web documents using HTML. In our previous tutorial, we looked at the HTML attributes and how you can implement them on your web document. If you have checked the tutorial, kindly do so using the link below

PREVIOUS COURSE: Introduction to HTML Attributes and How To Use Them

Introduction to Web Formatting Using HTML

Web formatting involves structuring text properties on the web document using HTML properties such as bold, italics, strike through, subscript, superscript, underline etc

As we move on, we will be looking at each of this HTML formats and how we can easily apply them

Striking through text

The strike through is a process of striking through text on web document. For example, let say we have a long text and we intend striking through a particular part of the text, we will simply make use of the opening and closing strike through tags (<s> & </s>). The words to be stroked should be placed inside the opening and closing tags

example

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
        <p> This is a  <s>good</s> clean boy  </p>
    
</body>
</html>

RESULT ON WEB BROWSER

This is a good clean boy

Bold Text Formatting <b> & </b>

The bold text formatting is used to bold the ext in a particular part of a web page. To bold a text, simply means to increase the font weight of the text and we do this by placing the text in between the opening and closing tags as shown below

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
        <p> This is a  <b>good</b> clean boy  </p>
    
</body>
</html>

RESULT ON WEB BROWSER

This is a good clean boy

Underline Formatting <u> & </u>

The underline formatting uses the opening and close underscore tags. This tags enables us to have text on a section of a web page fully underlined as shown below

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
        <u> This is a  good</u> clean boy  </p>
    
</body>
</html>

RESULT ON WEB BROWSER

This is a good clean boy

Italic Text formatting <i> & </i>

To enable us have a section of web page fully written in italics, we make use of the opening and closing (<i>&</i>) italics tags as shown below

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
        <i> This is a  good clean boy  </i>
    
</body>
</html>

RESULTS ON WEB BROWSER

This is a good clean boy

Deleted Text Format <del> & </del>

The deleted text element is used to delete strike a deleted text section of a web document as shown below

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
        <del> This is </del> a  good clean boy  
    
</body>
</html>

RESULT ON WEB BROWSER

This is a good clean boy

Inserted HTML Text Formatting <ins> & <ins>

Just like the deleted test formatting, the inserted text formatting is used to insert a new text to a web page.

example

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
        <p> This is a  <del>clean</del> <ins>good</ins> looking boy  </p>
    
</body>
</html>

Result on web browser

This is a clean good looking boy

Conclusion

We hope with the above article, you have fully understood the basics of HTML FORMATTING. lets move on to the next topic on HTML PHRASE TAGS

About the author

ikenna

Leave a Comment