Home » Learn Code » HTML5 » What are the 10 Basic HTML tags? How to use them?

What are the 10 Basic HTML tags? How to use them?

basic html tags

Today’s topic is basic HTML Tags. And how to use them to make the basic structure of a webpage? So, in this lesson, we will learn a few important HTML tags. These are the tags that we use again and again in our HTML documents.

These 10 tags are the most basic HTML tags. These are essential for any HTML document.

So, let’s go ahead and see what are those tags and what are their importance.

First and foremost, always remember that every HTML element is enclosed by an open tag and a close tag. And the content goes inside in between them. Let’s see the image to understand.

basic html tags

Hope you have understood the opening and closing tags. Let’s go ahead and see the basic tags of HTML.

Tip: Are you new to HTML? Start from here: What is HTML?

Basic HTML Tags

1- <!DOCTYPE html>

First of all, the HTML document starts with document type declaration ( !DOCTYPE ) like this syntax:

<!DOCTYPE html>

Always remember this code snippet. This code is essential because this tells the browser what is the version of HTML. And we will always add this at the top of all the HTML documents. For all the HTML documents that you will create, the above code should be at the top.

2- <html> tag

This tag is the most basic HTML tag. Without this tag, our HTML code will not work correctly. All HTML documents will begin with <html> open tag and end with </html> close tag.

Let’s see the code example below.

<!DOCTYPE html>
<html>
</html>

3- <head> tag

Thirdly, you will add a head tag which will also always use after the HTML tag when you start your HTML document. As given below:

<!DOCTYPE html>
<html>
<head>
</head>
</html>

4- <title> tag – Title Tag

Now, in the head tag, we use the title tag. Similar to the other three tags, this will always use in between head tags. And in the title tag, we write our webpage title.

<!DOCTYPE html>
<html>
<head>
<title> my webpage  </title>
</head>
</html>

5- <body> tag

Then, after the head and title tag, we use our most basic tag the body tag. In this tag, we write all our content. So, the body tag uses to display all webpage content. There is only one body tag in HTML.

<!DOCTYPE html>
<html>
<head>
<title> my webpage  </title>
</head>
<body>
</body>
</html>

6- heading tags (h1 to h6)

Now we will use heading tags. There are six types of headings.

h1 is the biggest heading

h3 is smaller than h2

h4 is smaller than h3

h5 is smaller than h5

h6 is the smallest heading

<!DOCTYPE html>
<html>
    <head>  <title> my webpage  </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>

7- <p> Tag – To Add paragraphs

Now, we will use a p tag mean paragraph tag, p tag uses to write paragraphs in HTML webpage.

<!DOCTYPE html>
<html>
    <head>  <title> my webpage  </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>
     <p> this is a paragraph tag </p>
</body>
</html>

8- <a> Tag – for HTML Hyperlinks

Furthermore, tags are used for adding links in HTML. We use href attribute in an open tag and given that attribute a site URL.

<a href="https://www.twitter.com"> Twitter </a>

9- <img> Tag – To Add Images

So this tag use for adding images to a webpage. This tag has no closing tag. In img tag, we give it an src attribute and give it a value of image file location.

<img src="images/filename.jpg>

10- <br> Tag – Line Break

At last, this is a line break tag. We use this tag to break a line. And this tag has no closing tag.

<br>

Note:

!DOCTYPE tells the browsers that this HTML code version is HTML5. So We are learning HTML5. Now HTML5 is the latest version which we are using now. Our browsers display HTML5 webpages.

Conclusion

So, I am going to show an image of our today’s work:

Our Source file:

what are the 10 basic html tags

Output in browser:

So, Keep practicing HTML tags.

Also, see What is HTML/ What HTML stands for? And How to use it?

5 thoughts on “What are the 10 Basic HTML tags? How to use them?”

  1. maillot de foot pas cher

    Your method of explaining all in this paragraph is
    genuinely pleasant, all can without difficulty
    be aware of it, Thanks a lot.

Leave a Reply

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