Understanding Html Tags and Element

What is Html?

Html stands for “HyperText Markup Language” its basically the skeleton for the website its gives the structure to web page by using heading ,paragraph ,lists (ordered &unordered), makes text look attractive using tags like bold ,strong ,italic .

Without Html?

• Its difficult to understand what is heading what is link

Why Html is used for?

• It create the structure of the web page.

• It give proper heading ,subheading ,paragraph, section, div to make web page look more attractive and structured.

• Its helps to displays text, images videos and link on the web page.

• Its builds forms with login sign up page .

• when we use it with CSS , JS and react we can build a user interactive and useful working website.

What you understand by HTML tags?

Html tags are the series of collections of tags used for structuring the webpage. Html tag are special words written inside a ( < > ) angle brackets which tell browser how to structure and display web page.

Html tags are instructions given to create and format the webpage. Html tags tell the browser what kind of content we are writing .

Tags that are commonly used :

1. <p>This is a paragraph </p>

   here this <p> tag telling the browser that the content you are writing is paragraph.

2. <h1> Heading 1 </h1>

   here this <h1> tag telling the browser that this is heading .

3. <div></div>

   <div> tag is used to group and organize the content into sections its basically the block level container.

4. <span>Text </span>

   this is used to select ,style and manipulate the small part of text .

Opening tag ,Closing tag and Content

<h1> Heading </h1>

<h1> : opening tag

</h1>: closing tag

Heading : content

What an Html Element means?

Html element includes :

• opening tag

• content

• closing tag

  <p>Here you will explore about html </p>

  This as a whole is called element

Tag vs Element (Difference)

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

Element: <p>This is a paragraph</p> (this complete is a element )

Self -Closing (Void elements)

Some elements does not contain text or content .these are called self closing or void elements.

<br>

<hr>

<img src="" alt="">

Block Level Vs Inline Elements

Block Level: These elements take the complete line or complete width and start on new line .

<h1>This is Heading</h1>

<p>This is a paragraph</p>

<div>This is a container</div>

Inline Elements: These elements stays on the same line and take space or width only that needed.

<span>Text</span>

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

Diagrams: Block Level Elements Vs Inline Elements

Most Commonly used Html tags :

1. Heading tags:

<h1>, <h2>, <h3> ,<h4>,<h5> ,<h6>

2. Link tag:

<a href=" ">

3. Image tag:

<img src="" alt="">

4. Block container tag:

<div>

5. Inline container tag:

<span>

6. List tags

<ul>

<ol>

<li>

7. Break tag

   <br>

8. Horizontal line

   <hr >

ThankYou for reading ❤️