A website is made up of 3 major ingredient, which are:

Till now, which ever website you have visited in your device (like chatgpt.com, youtube.com, leetcode.com), all these webpages first loads the HTML file and then essential files which are linked via HTML (like for style their is CSS files, for functionality their is JavaScript files). The HTML tells the browser what is the content and how to arrange them in the screen. You will know more about HTML as you go through the article.

Let’s break the chicken in the room…

Why do we need HTML? What evolution did HTML brought in Tech-World!!!

Communication Problem

The story begins, with a single Computers wanted to communicate with other of its own kind, they wanted to share information within themself wirelessly. But in late 1980s, the mode of communication was wired, and it was difficult to share information to larger distance as setting wire to wider area was costly and hard to maintain. The world needed a way to:

• Share documents

• Access information easily

• Connect multiple documents like pages

As during that time information/document were stored in different computer and different locations.

Solution for communication problem

In 1991, a scientist named Tim Berners-Lee invented 3 things:

Together, these formed World Wide Wed (www…)🌐 .

The goal was simple:

Create a System where any document can be linked with other and be accessible from any location.

HTML (Hyper Text Markup Language)

Lets break down each words:

HTML informs the browser, the meaning of the content and the information that is present in the screen. Without HTML, the content will look like a plain text and will lose its semantic meaning.

HTML Tags

HTML tags are special keyword enclosed in angular brackets(<>). They tell the browser how to structure and present the content in the screen.

Some famous HTML Tags are:-

HTML Tags	Tag Meaning
	Paragraph Tag
	Anchor Tag
	Image Tag
to	Header Tag

Their are two types of HTML tags:

1. Container (Paired) tags: They always comes with opening tag <tag-name> and closing tag </tag-name>.

   <p>This is Paragraph Tag</p>
   <h1>This is Header Tag</h1>
   <a>This is a Anchor Tag</a>
   

2. Empty (self-closing) tags: These don’t have closing tags as they don’t wrap content within themself.

   <img src="https://www.tutorialspoint.com/html/html_images.htm" alt="img-tag-click-me"> 
   <a href="https://chaicode.com/">
   

HTML Element

HTML Element is the complete unit of HTML consist of these 3 things:

Basic Syntax HTML Element

<tagname>Content</tagname>

Examples:

<p>This is also a paragraph Element</p>
<h1>Biggest Header Tag</h1>
<h6>Smallest Header Tag</h6>

Types of HTML Element

1. Content Element: These tags contains some content inside and as opening and closing tag.

   <h1>No Paragaph tags</h1>
   <div>Use this, say no to paragraph tags... just kidding</div>
   

2. Empty Elements (no Content): These tags doesn’t contains any content.

   <hr> <------- Draws Horizonal Line
   <br> <------- Gives a Line break, just like your Ex gave you a break
   

Tag vs Element

Block-Level vs Inline-Level Element

Block Level Element

• Start with the new line

• Consumes complete width of page

  Example: <div></div>, <h1></h1>, <p></p>

In-Line Level Element

• Stay in same line

• Consume only required width

  Example: <span></span>, <a></a>, <b></b>

Common HTML Tag List

Tag	Use-Case
	Main Heading
	Paragraph
	Block-level Container
	Inline-level Container
	Image tag
	Anchor tag (adding link to the page)
	Horizontal Line
	Line break

-—» THE END, see you in Next Article😁👍