Tag Breakdown🧱

Have you wondered, why are we writing HTML elements like <p>...</p> or some structure like that?

And what the cr*p is an HTML element, in the first place?

Let me demonstrate first for an example,

<p>My Cat is very grumpy</p>

Opening tag: It instructs a browser, "Hey you, now start reading content after me as a paragraph, or whatever the tag I meant for."
So, as

Browsers read from Top to Bottom & Left to Right.

It will read the content as a paragraph.

Content: This is the part we, as a user or viewer see. So, the letters you are seeing as a word and sentence, is the part that is written as content in HTML.

Closing Tag: This is the sign for browsers that, "You have done a good job, now you can stop reading content as paragraph and move on for next instruction."

So, let's back to the second question: What an HTML element is?
So, in general,

The consistency of the opening tag, content, and closing tag is called an HTML element.

But, that's not the only way of writing an element. Elements can be a lot more complex and nested in other elements. Like, hope you remembered from the last week <h1> tag and <p> tag was inside <body> tag/element. And we can nest other tags as well, like:

<p>My cat is <strong>very grumpy.</strong></p>

Will display 'My cat is very grumpy.'

But, there is some tag/element that don't need content or closing tag, ie:

<img src="image.jpg" alt="" >

This tag is used for showing an image. So, this will be an image element, but it doesn't need any content or closing tag. It's called a self-closing tag (But there is a lot. So we will dedicate our week to the image element later on.)

And tag uses attributes simply for their name or some complex instruction or accessibility. We will be discussing those in the next week so till then, stay safe.

Visit This Web App for all posts in one place.

Blog

Akhlak Hossain Jim

Join Our Newsletter. No Spam, Only the good stuff.

Related