HTML is the skeleton for constructing web pages. The content of your web page is written here. It's very simple to understand HTML. There are very few things to learn in this as compared to any other language so it becomes very essential to learn every tag with a good understanding.

So, today we are going to learn about how and where to use a particular tag.

Let's get started

<header>

This tag contains the head of your website such as it could contain your

website's log
navigation menu
hamburger menu

<main>

This tag contains the main content of your website if you have made a blogging website then the main will contain your blogs, if you have made an e-commerce platform then this will contain your products.

<footer>

This tag will lie at the end of your website and contain info about some copyrights. Sometimes it also contains contact details.

<body>
  <header>
     <!--navigation menu, website logo etc.-->
  </header>

  <main>
     <!--contain unique element that are not often repeated-->
  </main>

  <footer>
     <!--Includes copyright info-->
  </footer>
</body>

Significance of using these tags:

These tags are obviously not going to change the way how your site is going to look but they will for sure increase the readability of your code. Of course, you can use comments to tell another person what this HTML is for but the best way to do this is to let the code speak for itself. So, whenever the other developer gonna see your code they will themselves know- Oh! this is a header, Oh! that is the main so that will contain the main content of the site.

<div>

This is a division tag. This will divide your page into different sections. You can add whatever you want to this such as texts, links, images, etc. It mainly works as a container for your elements.

<span>

This work absolutely the same as the div tag. You can use it instead of a div tag and it'll function the same.

But, the main and the only difference between both is <span> is an inline element and <div> is a block element. It means if you write something in <div> it'll eventually take up the whole width and on the other hand, if you use <span> it'll take only that amount of width which is required.

<body>
   <div>This is a text written in a div and it'll take the whole width</div>
   <span>This is a text written in a span</span>
   <span>One more span to show that it's an inline element and it is coming after the above span in the same line</span>

</body>

<img>

Many a time you want to add pictures to your site. This can be done through the image tag. You can add pictures here by adding a source/path of the pictures.

Syntax:- <img src="" alt="">

src : where you add the path to the image.

alt : if for any reason your image is not able to be shown by the browser, then, the browser will show the alt text. Usually, alt contains the info about the image

NOTE: img tag does not have a closing tag

<body>
    <img src="puppies.jpeg" alt="4 cute puppies">
</body>

<video>

This is used to add videos to your site. This is only for the videos that are available in your folder.

Syntax: <video>

<source src="">

</video>

In the video tag, you have to add the source tag in which you'll add the source of the video.

->Use the controls attribute in the video tag that'll add the browser's default controls such as the pause button to the video.

<body>
   <video><source src="/media/cc0-videos/flower.webm"></video>
</body>

TIP: There are so many useful attributes that you can use and make your development even more exciting and easy. Try to search for them on your own.

<iframe>

This tag is used to embed a different webpage into your page. For example, you want to add a video from youtube to your site. You can do this using <iframe>.

YouTube makes it very easy for developers to add videos. Just right-click on the video and click on "copy embed code" and paste it into your HTML.

<body>
    <iframe width="853" height="480" src="https://www.youtube.com/embed/gPFqyLYf1DU" title="Inside Tesla's $5 billion Gigafactory" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</body>

This'll set up all the things for you.

<a>

This tag is used to add external links to your site. By this, you can add a URL to your site and then by clicking on this tag it'll take you to that URL.

<body>
   <a href="https://google.com">Go to google</a>
</body>

This is an inline element

Thank you for reading

HTML Tags that every developer must know

Table of contents