HTML Tags Explained: Key Concepts and Elements

What HTML is and why we use it?

HTML stands for HyperText Markup Language. Let's break that to understand what does it exactly means:
- HyperText -> It text but not simple text. A text which browser understand(text on steroids).
- Markup -> Labels added to the text to define structure of the web page.
- Language -> Rules to follow for communication.
HTML is the skeleton for a web page. Think of a webpage like a human body:
- HTML → skeleton (structure)
- CSS → clothes/skin (design)
- JavaScript → muscles/brain (behavior)

A tag is a special keyword wrapped inside angle brackets. Example: <p>.
Tag can be understood as a package item having a tag of fragile. This tag tell us about the item inside this package, similarly HTML tag browser tells browser about the type of content being passed.

Most HTML tag have two parts: Opening tag and a closing tag. Example: "<p>" is a opening tag and "</p>" is a closing tag. Whatever comes in between is the content.
Example:
```
  <p>This is a paragraph.</p>
```
where "<p>" is opening tag, "This is a paragraph." is the content and "</p>" is the closing tag.

Opening tag, closing tag and the content in between is collection called a HTML element.
Example:
```
  <p>My Heading</p>
```
this completely is called heading element.

Some tags does not wrap content in between them therefore they don't need a closing tag. This type of tag is called as self-closing elements.
Example:
```
  <img src="" alt="">
```

HTML elements which takes full width, starts on new line and stacks vertically are called Block level elements.

Example:

  <h1>Title</h1>
  <p>Paragraph</p>
  <div>Box</div>

"Title", "Paragraph" and "Box" will apper in three different lines like:

  Title
  Paragraph
  Box

HTML elements which stays on the same line, Only takes needed space are called Inline element.
Example:
```
  This is <span>important</span> text
```
Here the "important" will stay on same line as it is surrounded by an inline element .
Common block elements
- div
- p
- h1–h6
- section
- article
Common inline elements
- span
- a
- strong
- em
- img

Links:

  <a href="https://google.com">Go to Google</a>

Lists:

  <ul>
        <li>Item 1</li>
        <li>Item 2</li>
  </ul>

Inputs:

  <input type="text">
  <button>Submit</button>