What HTML is and why we use it?

Let us understand first why we use HTML and what was before HTML which will help us to know its importance and then we will understand more about HTML

What was before HTML?

Since HTML and the World Wide Web were invented together, talking about “before HTML” also means talking about the time before the World Wide Web existed.

So before HTML or www today’s websites were called as networked information systems which were written in plain texts (like you write in notepad).

Due to Tim Berners-Lee’s invention of HTML, HTTP, and WWW, we have the modern websites and web applications we use today.

Why we use it?

HTML added structure, hyperlinks, and multimedia to documents, while plain-text systems only showed raw text files.

This is possible by ussing different HTML tags, for hyperlinks we have <a> tag, for images we have <img/> tag, etc.

What an HTML tag is?

An HTML tag is a keyword written inside angle brackets < > that tells the browser what type of content it is and how to treat it.

• To write paragraphs we need <p> tag

• To insert images we need <img> tag

• To Build navbars we use <nav> tag

and so on.. there are so many tags for each use case

All HTML tags create elements. Some are content elements and some are semantic structure elements.

Some HTML tags are used to give your website a structure like when you are creating Nav Bar for website you use <nav> tag. Using <nav> tag wont create a nav bar for you website but it will create a structure that inside <nav></nav> tag you will create nav bar for website.

This are most common Html tags which you will always need to create a website.

Opening tag, closing tag, and content

There is a way to use HTML tags and to insert content inside it.

<p> → This a opening tag As we open a tag now insert content which you needed.

<p> p tags are used to write paragraphs

Now we have to close it by using closing tag → </p>

<p> p tags are used to write paragraphs </p>

So here

<p> → Opening tag

p tags are used to write paragraphs → Content

</p> → Closing tag

Self-closing (void) elements

Some tags dont need a Closing tag. What are they ?

→ <img src=”photos.png”>

→ <input type=”password” placeholder=”Password”>

and so many…

A self-closing (void) element is an HTML tag that represents a single piece of content and does not need a closing tag.

Block-level vs inline elements

Block-level elements take up the full width of a line and always start on a new line.

Inline elements stay within the same line and do not start on a new line.

One more example to understand it more using <p> tag ( Block element) and <span> tag ( Inline Element )

code -

Lorem 
<p style="background-color: rgb(243, 90, 90); padding: 5px;">ipsum dolor 
sit amet consectetur</p> 
adipisicing elit. 
<span style="background-color: rgb(61, 61, 231); padding: 5px;">hello world</span>
Impedit, pariatur!