fbpx
April 2, 2020
HTML FORMATTING TITLE

Tutorial #5 | Understanding the HTML Formatting and The Usage

Hello! Welcome to this tutorial on HTML formatting. We will be looking at basic sections of the HTML formatting and how you can easily carry out the formatting process.

READ PREVIOUS TUTORIAL ON: Tutorial #4 | Understanding the HTML Attributes and Their Usage

What is HTML Formatting?

HTML formatting process simply involves adding format or text properties to adjust the property of a document. HTML formatting includes adding properties such as strike through, bold, italics, underline, subscript, superscript etc.

We will be explaining each of this HTML Formatting properties and we will be starting from the strike through.

Striking through text

Let’s assume you want to strike through a particular text in a sentence when creating a web document for example you want to strike through the word “good” in the sentence “this is a good looking boy”. We can easily achieve this using the strike text HTML element (<s> & </s>). The word to be stroked should be in between the opening and closing strike element tags just as shown below.

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

Result on web browser

Bold Text Formatting <b> & </b>

The bold text formatting helps to ensure a section of the sentence is made bold and the font weight thicker. For example to bolding the word “good” in the sentence “this a good looking boy” we insert the word good in between the HTML element <b> </b> as shown below

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

Result on web browser

Underline Text Formatting <u> & </u>

The underline text formatting helps to underline a section of a sentence in a web document and the section to be underlined is placed in between the underline elements. As shown below

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

Result on web browser

Italic Text Formatting <i> &</i>

To show up a section of a sentence in a web document in italic we can easily make use of the italic HTML element as shown below

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

Result on Web browser

Superscript Text Formatting <sup> & </sup>

To show up a section of a sentence in a web document in superscript we can easily make use of the superscript HTML element as shown below

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

RESULT ON WEB BROWSER

Subscript Text Formatting <sub> & </sub>

To show up a section of a sentence in a web document in subscript we can easily make use of the subscript HTML element as shown below

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

RESULT ON WEB BROWSER

Deleted Text Formatting <del> & </del>

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

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

Inserted Text formatting <ins> & <ins>

The inserted text element is used to insert a new text to a web document after deleting a text.

<!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 VIEW

Smaller Text Formatting <small> & </small>

The smaller text formatting element is used to decrease the font size of a section of text in a web document. What this HTML element does is to decrease the font size by one lower than the rest of the text as shown in the example below

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

RESULT ON WEB BROWSER

Grouping Web Content using HTML Elements

To group a section of an HTML document we can simple using HTML elements such as <div> and <span>. This elements allows us to group HTML documents and also add some styling features to them or reference them in future. for example

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
        <div> <p> This is a <span>good</span> looking boy  </p>   </div>
    
</body>
</html>

the <div> element is used for a large section and mostly takes the whole body of the page while the <span> element takes a small section of the web page. referencing elements such as class, id can easily be added to the opening tags of the <div> and <span> element when referencing them for future purpose.

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
        <div class="first_paragraph"> <p> This is a <span>good</span> looking boy  </p>   </div>
    
</body>
</html>

Conclusion

Now you understand the basics of HTML Formatting and you are really doing great. Lets move on to the next tutorial on  HTML PHRASE TAGS

Leave a Reply

Your email address will not be published. Required fields are marked *