HTML Basic Tags with Examples

You will gain an understanding of the basic tags that are utilized in an HTML document by reading this article.

List of Basics Tags in HTML

I already categorized and defined HTML tags based on the categories at the start of the course. But you can refer to this article as a reminder. However, this article only lists the most commonly used and well-known tags in HTML. So without any further delay, let's list out all the basic tags used in HTML. In this article, you will learn my take on the most fundamental tags, which I will list below:

  1. <H1>, <H2>, <H3>, <H4>, <H5>, and <H6> Tags
  2. <P> Tag
  3. <BR> Tag
  4. <HR> Tag
  5. <PRE> Tag
  6. <A> Tag
  7. <IMG> Tag

So these are the tags that are considered the most fundamental. The second, third, fourth, fifth, and sixth tags will be covered in subsequent articles, beginning with the next one, where the first and fifth tags are explained at the beginning of the course. By clicking on the link, you can go directly to the tag. However, for your understanding and convenience, I will include examples of all of the above-mentioned basic tags in this article.

HTML Basic Tags Example

Let me first create an example that demonstrates all 6 tags used, including the heading on the web page.

<!DOCTYPE html>
<html>
<body>
   
   <h1>Heading-level 1 (main heading)</h1>

   <h2>Heading-level 2 (second main heading or sub heading)</h2>

   <h3>Heading-level 3 (sub heading)</h3>

   <h4>Heading-level 4</h4>

   <h5>Heading-level 5</h5>

   <h6>Heading-level 6</h6>

</body>
</html>

The following snapshot shows the exact output produced by the above HTML example.

html basic tags

Now let me create another example that will use all the remaining six basic tags listed above.

HTML Code
<!DOCTYPE html>
<html>
<body>
   
   <p>This is a paragraph.</p>

   <p>Lorem ipsum dolor sit amet <br>consectetur adipisicing elit. <br><br>Aspernatur earum 
      <br><br><br>ducimus nemo blanditiis enim maiores itaque eligendi <br><br><br><br>architecto 
      non alias natus<br><br><br><br><br> tempore placeat ullam suscipit<br><br><br><br><br><br> 
      magni libero illo, doloremque commodi <br><br><br><br><br><br><br>quisquam hic ipsum delectus 
      <br><br><br><br><br><br><br><br>distinctio corporis? Facere voluptates 
      <br><br><br><br><br><br><br><br><br>adipisci veritatis.</p>

   <hr>

   <p>Pre-formatted tag's cotent start:</p>
   <pre>Lorem ipsum dolor 
sit, amet consectetur 
               adipisicing elit. Quam, 
         praesentium?</pre>
   <p>Pre-formatted tag's cotent end:</p>

   <p>Visit <a href="https://codescracker.com">codescracker.com</a>.</p>

   <img src="https://codescracker.com/html/images/codescracker.JPG" alt="codescracker">

</body>
</html>
Output

This is a paragraph.

Lorem ipsum dolor sit amet
consectetur adipisicing elit.

Aspernatur earum


ducimus nemo blanditiis enim maiores itaque eligendi



architecto non alias natus




tempore placeat ullam suscipit





magni libero illo, doloremque commodi






quisquam hic ipsum delectus







distinctio corporis? Facere voluptates








adipisci veritatis.


Pre-formatted tag's cotent start:

Lorem ipsum dolor 
sit, amet consectetur 
               adipisicing elit. Quam, 
         praesentium?

Pre-formatted tag's cotent end:

Visit codescracker.com.

html basic tags example one

Following is a step-by-step description of the above example:

HTML Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!