HTML Tags and Elements : Understanding in Detail

Introduction:

Before learning about HTML, we tried to understand something basic that is -BROWSER.

We use browsers like chrome, edge or firebox every day, but earlier i never understand that what browser actually does. While learning about browsers, understood that browsers main job is to read files like HTML and display them as a webpages.

Then one question we might think of like :
If the browser shows webpages, then how does it know what is a heading, a paragraph, an image, or a link?

So the answers is : HTML
HTML is the language that browsers understands. It tells browser how to structure and display the content on webpage.

And now in this blog ,I will be sharing a learning about HTML Tags and Elements.

What is HTML and Why Do We Use It?

First of all ,

• HTML stands for Hyper Text Markup Language.

• We also called it skeleton of webpage.

• HTML is a language of Tags.

so we can think of HTML in this way :
As our body needs bones for structure of our body in the same way a Webpage needs HTML .
→ HTML gives structure to a webpage.

It tells the browser:

• This text is a heading

• This text is a paragraph

• This is an image

• This is a link

Without HTML, a webpage simply cannot exist.

Opening Tag, Closing Tag, and Content:

So , most HTML tags have three parts. We can show our content in mainly three parts by using HTML tags.
For example:

• <h1>Hello World</h1>

So the breakdown of this statements as follow:

• <h1> \= It is an opening tag which we can use in starting of our content if we want to give the Title or Heading to our webpage we mostly use this tag.

• Hello World \= It is the content

• </h1> \= It is the closing tag . If we want to terminate our content we use this tag.

If we forget the closing tag, the browser may get confused, and the webpage may not display correctly.

What is an HTML Element ?

So we can think that , both HTML tags and HTML elements are same things ,but its not actually, both are different things

Reason for this is as follows :
→ HTML Tag: It is just a label
Like for example:
<p>

→HTML Element:
An element is the complete structure.
For example:
<p>I am learning HTML</p>

So finally ,it became clear that:

• Tag = part of an element

• Element = opening tag + content + closing tag

Note (VIMP) : All elements use tags, but tags alone are not elements.

Self-Closing (Void) Elements:

While practicing HTML, realized that some tags don’t have closing tags, and it’s confusing .
Then, i got to know about self-closing(void) elements.

These elements:

• Do not contain any content

• Do not need a closing tag
  So there are some self closing tags which we use frequently in our HTML.

  1. <br> \= It is used for breaking the line between two paragraph/section.
     2. <hr> \= It is used for adding horizontal line between paragraphs.
     3. <img> \= only displays an image.

Since there is nothing to write inside, no closing tag is needed.

Block-Level vs Inline Elements:
These are the concepts regarding to an arranging the content on a webpage.
HTML elements are mainly of two types:

• Block-Level Elements:
  So these are the elements we define in the block of code of HTML.

  • Block level elements Start on a new line

  • Block level elements Take the full width of the page

    for example:

    <h1>Heading</h2>

    <p>Paragraph</p>

    <div>Box</div>

We can imagine them as a big boxes, placed one below another.

• Inline Elements:
  So these are the elements we define in a particular line of code where we want to change.

  • Inline elements Do not start on a new line

  • They Take only required space

    For Example:

    <span>Text</span>

    <a href=”#”>link</a>

    <strong>Bold</strong>

We can imagine them as small pieces inside a sentence.

Commonly Used HTML Tags:

There are some commonly used Tags in HTML as follows:

So ,by just using these basic commonly used HTML tags, we can understand that creating webpage is not more difficult .Each tag has a specific purpose, and once we understand that purpose, writing HTML starts making sense.

Conclusion:

So, In this blog we learnt about HTML its different tags and elements in it . HTML gives structure and meaning to content, and understanding tags and elements is the first step in web development. With this clear foundation, learning CSS and JavaScript feels much easier and less scary.