HTML Lesson 2: Let’s Talk about tags

HTML tags are the Central Nervous System of every web page

<h1> </h1> //A Heading Tag(Non Self - Closing tag)
<img >     //A Img tag (Self Closing Tag)

Before we dive into any of the fancy coding tutorials. Let’s get our basics straight. HTML tags contain the content on your HTML document. There are different tags used to display different types of information on your webpage. But, Tags can be broadly categorized into two categories: Self Closing tags and Non-Self Closing tags. The text in the blue above has two different tags. One is an h1 tag that is used to display headings on the webpage. img tag is used to display images on the webpage.

img tag is a self Closing tag because it doesn’t need to be closed manually unlike, the h1 tag which is a non-Self-closing tag and needs to be closed with </h1>. Most HTML tags are like h1 and require a closing tag too. We will discuss a variety of tags and create quite a few HTML pages along the way. HTML tags can be nested like sentences in the English language via a bracket.

Hi I am not who you think I am(Speaking to someone else).

In the above sentence we nested two different pieces of info in single sentences with the help of brackets. Now let’s do the something similar in HTML

<em><h1>THis is a Italic Heading</h1><em>

The em tags make the content inside them italic. You can nest HTML tags by placing the tags within each other. Remember while nesting. It follows the same rules as the English brackets. The one that opens first closes at last. We opened the em tag first and closed it after closing the h1 tag.

Element vs tag

An HTML element is a tag with content. like the above h1 tag. you already know what tag is. So, often you will find me using elements in place of tag and tag in place of the element. So don’t confuse.

Block vs Inline Elements:

The Block-level elements are those that take up an entire block of the Webpage. Imagine a webpage like a matrix. A block-level element will take up the whole row irrespective of how much space it actually needs. Examples: h1, p, and others.
An inline element will take only as much space as it needs. If It needs one column in the matrix it will take one Column, if it needs two columns it will take two or a full row. Examples: anchor(a) tag or em tag and many others.

Empty Elements

Some developers or teachers around the globe renamed Self Closing tags to Empty elements. You can call them whatever you want. It’s totally up to you. This is just the beginning of my tutorials. I will teach you all the HTML I know and many other technologies that will make you a full stack dev like JS, CSS, NodeJS, ExpressJS, MongoDB, React, and much more. So, Subscribe to the newsletter to stay updated. Don’t forget to comment your doubts