Understanding HTML , Tags, Elements(Basics)

#webdev #html #beginners #frontend

Let us start by understanding what is HTML and why it is used.

So, HTML stands for a Hyper Text Markup Language which as the name suggests is a markup language which mean data showned in a structured format keeping the related data together .

It is the backbone of modern web technologies . HTML is the skeleton of the website which decides where and how a data will be shown.

HTML uses CSS as skin to fill the webpage with color and animations and what not and JS is the brain which decides when to show data when to not and what to do on diffrent events.

Intresting Fact : Did you know that HTML uses C under the hood while rendering or getting parsed beacuse browser are made from C lang. to be fastest and efficient.

Now that we know what HTML is let’s understand what HTML tags are and how they are used

As we now that HTML is a markup language so it uses some tags which help it to embed texts , images and videos in a diffrent formats. All of them have a common syntax

<Opening> <TagName>  <Closing>
    <       content     >

 HTML Element:
< Content> </ Content >

‘<’ and ‘>’ are Opening and Closing Brackets ‘/’ is used only in the closing bracket and show that the work of the tag ends here.

‘Content’ contains the TagName being used and according to the Tag the content should be added inside or to that Tag.

When we add both the Opening and Closing Tag together this Creates a HTML element.

For Example for heading there are tags from h1-h6 which vary in sizes as we go higher:

Now along with these Opening and Closing Tag there are also some Self Closing Void Elements which does not have any Closing Tags but work the same as HTML elements.

An example of is


 <img  src=”” />

This is an Example of self closing void element and there are many more like input , label , video Tags etc.

Now they are some other fancy term to call this elements Block- level elements and Inline-level elements , they differ slightly.

Block-level elements:

This elements are those element that starts from a new line takes up some space and margin like they take up a part of the page completely for themself as much as they require for their content.

<div style="border: 1px solid black;"> 

</ div>

Inline-level elements:

This elements are those elements that only take space as they need without disturbing other elements on the same line , without taking the entire page space or line space only takes what is required.

 <span style="border: 1px solid black;">
        World <b>This is HTML</b>
    </span

Some of the Commonly used HTML tags:

<div> </div> -- This is a container tag acts as a container is of block level 
<span> </span> -- This is also a Container tag but is of inline level
<p> </p> -- This is paragraph tag used to write paragraphs.
<h1...6> </ h1...6> -- This is a Heading tag used to write headings
<img src="" /> -- This is a Image tag used to embed image in your web page in the src you provide the link of the image.
<video src="" /> -- This is a video tag used to embed image in your web page in the src you provide the link of the video.
<section> </section> -- This is used to divide and create sections for a webpage.
<button> </button> -- This creates a button which acts as a button
<table> </table> -- This is used to create tables.