Hey everyone, we are back with an interesting article where we will learn about the basic tags in HTML to build webpages. These basic tags are essential that tell the browser how to display the content over the webpages.

We all know that there is a specific structure of HTML tags and elements to make a website. We used Tags to specify the content, Tags are nothing but some instructions that are enclosed in angle braces (< >). HTML tags contain three main parts: an opening tag, content, and closing tag.

But some HTML tags are unclosed tags. When you are working with HTML tags always remember to include closing tags. We will discuss all these things. At the end of the article, you’ll have enough knowledge to put together a basic webpage.

Let’s get started.


✅ Quick Brief about HTML Tags

An HTML tag is nothing but a special word surrounded by angle brackets. For example, If we want to use a paragraph somewhere, we just need to use <p>CONTENT</p>. When you are working with HTML tags always remember to include closing tags. If you forget to close the tag, the browser applies the effect of the opening tag until the end of the page.

We have 5 essential tags that define the structure of a webpage.

  1. <html></html>
  2. <head></head>
  3. <title></title>
  4. <body></body>
  5. <footer></footer>

Now let’s look at those tags:

1. <html></html> – the root element

Every web page starts with the html tags, it is the root element of the structure. Everything would be added inside the html tags. To create a page you need to write opening <html> and closing </html> tags. And all the other tags in between these tags only get considered by the browser.

2. <head></head> – the document head

The head tag contains the information related to the web page. It doesn’t show on the web page, but it contains a lot of information that can be used for other work. It contains the tags that can be put inside the head tag such as:

  1. <meta>
  2. <title>
  3. <script>
  4. <link>
  5. <style>
3. <title></title> – the page title

It contains the title of the page. The title is displayed on the Browser’s title bar (whatever you have written inside the tags), as well as in bookmarks, search engine results, and many other places.

4. <body></body> – the page content

This tag is used to display all the information or data, i.e, text, images, hyperlinks videos, etc., on the webpage to the user. Every web page should have one body tag and all the content like text, images, hyperlinks videos, etc., are enclosed between this tag.

5. <footer></footer> – the bottom of page

We can also show some important information or links in the footer tag. Every website has the footer region where they mentioned the contact info or any other info.

For example:

✅ Other basic tags

Some other useful tags to make a proper website.

1. Heading Tags <h1> … <h6>

So, this is one of the most used tags on any webpage. It can be used in different ways like any section headings, subheadings, etc.

HTML supports 6 heading elements: h1, h2, h3, h4, h5, and h6. h1 is for the most important headings, h2 is for less important subheadings, and so on. h6 would be the lowest font size among others.

2. Paragraph tag <p></p>

This tag is used to display the paragraphs on the website. The browser display paragraph in the vertical with some gap, which looks nice to show the content text.

We can also use a few other tags inside the <p> tag. Like, if you want to start a new line then you can use the <br> tag (break line), it looks neater and well structured.

3. Anchor tag <a></a>

The anchor tag is the most useful tag of the website. This tag can let you create a link, which can be redirected to an internal or outbound link. The content can be either on your own site or on another site.

You have to provide the URL inside the href attribute. You can use this tag in multiple ways, for example – used as a button element, or used to refer to some other websites.

5. Image tag <img>

This image lets you insert the image on the web page. To insert an image, you first upload the image to your web server, then use a <img> tag to reference the uploaded image filename in the src attribute. Here’s an example:

The alt attribute is important to add to the image tag, it would be helpful if the image is not loaded due to any reason. So, the browser will display the alternative text.

6. Container <div></div>

It is used to add more content to the page. We can use this tag in many different ways, like the sidebar, footer, header, main content, etc.

By adding class and/or id attributes to your div elements, you can then use CSS to style and position the divs. This can depend on your page layout that how you use it as a small, large container.

Here’s an example that uses a div to contain the content for a sidebar on the page:

7. Inline container <span></span>

The span element is similar to the div element, it also adds structure to the page. Only the difference is, that the span inline element and div is the block-level element.

  • Block-level elements, such as div, h1, and p, are elements that are designed to hold relatively large or stand-alone blocks of content, such as paragraphs of text. A block-level element always starts on a new line.
  • Inline elements, such as span, a, and img, are designed to hold smaller pieces of content – such as a few words or a sentence, within a larger block of content. Adding an inline element doesn’t cause a new line to be created.
  • Block-level elements can contain inline elements, but inline elements can’t contain block-level elements.

For example:

8. <!DOCTYPE>

All HTML documents must start with a <!DOCTYPE> declaration.

The declaration is not an HTML tag. It tells the browser what version of HTML the document is written so that the browser knows what to expect.

✅ Bringing it all together – example

Now that you’ve learned the basic main HTML tags, let’s put them all together in a single web page:


So, as you saw we made a webpage by using the main basic tags of HTML. These basic tags are much sufficient to start making your first basic website template. Do lots of practice. Believe me, it is easy.

For more such content keep following and subscribing to this page. Please reach out to us in the comment section or drop us an email, and we will surely help you in clearing doubts.

Thanks😉 Happy Learning.

Also, read

What is WhatsApp’s Zero-Day Vulnerability Leading Users into Danger? WhatsApp Call Links Features Starts Rolling Out To Users, What it Does JioPhone 5G Specs Surface: Tipped to get Snapdragon Chipset, 5,000mAh Can Moonlighting Be Allowed?- Global HR Experts’ Perspective Capgemini Off Campus Drive 2022 | Freshers | Engineering | PAN India Java Developer Salary in India – For Freshers & Experienced Flipkart Big Billion Days Sale Ends on Sept 30: Best 5G Phone Deals DA Hike: Good news, Waiting for Central Employees is over, Important Update On Dearness Allowance How will 5G India launch impact the lives of Indians? How to Check PNR Status and Live Train Status on WhatsApp