HTML Comments, Headings, Paragraphs & Formattings

Hello guys…! Welcome to web development tutorial again..Today I’m going to continue the HTML tutorial from where we stopped last week. In this tutorial, I will explain and show you how to use HTML comments, headings, paragraphs & formattings. So let’s start.

HTML Comments

First of all, let me explain why we should use comments. Mainly, we put comments into our code to increase readability of the code. As well as we can use comments for debugging purpose. Usually, we describe our code in an understandable way by using comments. That will definitely ease making changes to the code when you need.

When we come to HTML Comments, they are not displayed by web browsers. HTML comments can be added to your code as follows.

<!­­--This is a comment--­­>

Example for an HTML document with comments is given below.

<html>
  <head>
    <title>HTML Comments</title>
  </head>
  <body>
    <!­­--Start of the first paragraph--­­>
    <p>This is a paragraph.</p>
    <!­­--End of the first paragraph--­­>
</body>
</html>
HTML Headings

There are six levels of headings in HTML. Please see the following example.

<html>
  <head>
    <title>HTML Headings</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
  </body>
</html>

The output of the above code has been shown below.

Preview of HTML Headings example

You can clearly see that, <h1> tag defines the biggest heading or we can say, <h1> tag is used to define most important headings in a document. And <h6> tag defines the smallest/ least important headings in the document. When we talking about html headings, there are very important points to remember.

  • Search engines use headings to index the structure and content of your web page. So don’t forget to use headings in your document.
  • Users can identify the structure of your webpage easily by going through these headings. So use headings in a simple and professional manner.
  • Do not use headings to make text Bigger or Bold.
HTML Paragraphs

To define paragraphs we use <p> tag. See following example.

<html> 
  <head> 
    <title>HTML Paragraphs</title> 
  </head> 
  <body> 
    <!­­--Start of the first paragraph--­­> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit erat, dignissim in laoreet ac, imperdiet sed leo. Sed sagittis hendrerit ultrices. Fusce eget justo efficitur, maximus turpis sed, scelerisque quam. Pellentesque non varius diam. Proin aliquam lorem nunc, sed molestie lacus facilisis ut. Quisque accumsan justo nec velit rutrum ornare.</p> 
    <!­­--End of the first paragraph--­­> 

    <!­­--Start of the second paragraph--­­> 
    <p>Nunc eu dui finibus, gravida odio eu, auctor lorem. Nam iaculis odio at risus interdum maximus. Phasellus nec lacinia felis, id fringilla neque. Donec fringilla vel tellus quis lacinia. In finibus vitae orci vitae finibus. Curabitur mattis lectus id hendrerit euismod. Aliquam non mollis tortor. Duis eget fermentum est. Curabitur et dolor turpis.</p> 
    <!­­--End of the second paragraph--­­> 
  </body> 
</html>

(Visit lipsum.com to generate sample paragraphs as in the above example)

Output of the above example should be as follows.

Preview of HTML Paragraphs example

The appearance of above paragraphs may be different yours with mine because of the different screen resolution or browser window sizes we are using. Change your browser window size to clarify the thing that I’m saying.

If you want to add line breaks in your html document, you can use <br> tag. <br> tag is an empty tag. So you can close it in the start tag. See the following example.

<html> 
  <head> 
    <title>My First Web</title> 
  </head> 
  <body> 
  <!­­--Paragraph with line breaks--­­> 
  <p>Lorem ipsum dolor sit amet, <br /> <!­­--Line break--­­> Donec elit erat, dignissim in laoreet ac. <br /> <!­­--Line break--­­>sed molestie lacus facilisis ut. Quisque accumsan justo nec velit rutrum ornare.</p> 

  <!­­--Same paragraph without line breaks--­­> 
  <p>Lorem ipsum dolor sit amet, Donec elit erat, dignissim in laoreet ac. sed molestie lacus facilisis ut. Quisque accumsan justo nec velit rutrum ornare.</p> 
  </body> 
</html>

Output :

Text Formattings

In a paragraph, we may want to bold some text, or we may want to underline some text. To do such things in an HTML document, we can use Text Formatting tags. I have given an example code and the preview of that code below.

<html>
  <head>
    <title>HTML Text Formattings</title>
  </head>
  <body>
    <b>Bold (b) text</b> <br />
    <i>Italic (i) text</i> <br />
    <u>underlined (u) text</u> <br />
    <strong>Important (strong) text</strong> <br />
    <em>emphasized (em) text</em> <br />
    <mark>highlighted (mark) text</mark> <br />
    <small>smaller (small) text</small> <br />
    <ins>inserted (ins) text</ins> <br />
    <del>deleted (del) text</del> <br />
    <sup>superscripted (sup) text</sup> <br />
    <sub>subscripted (sub) text</sub> <br />
  </body>
</html>

Output :
Preview of HTML Text Formattings example

This is the end of today’s tutorial. Please try above examples yourself. These Programming and Web development stuffs cannot be memorize by only reading. You should use them practically.

Do not hesitate to use the comment area below. And please share this tutorial if you think it’s worth to do so. As well as do not forget to subscribe Aiten Tutorials.

Leave a Reply

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