# HTML : The Web Page's Skeleton

Before knowing what HTML is, we need to know why we need HTML in the first place.

<div data-node-type="callout">
<div data-node-type="callout-emoji">❓</div>
<div data-node-type="callout-text">So why do we Need HTML</div>
</div>

Because without it a Website will collapse, akin to a human without its bone. HTML gives a Web Page a structure to stand upon.

When you load a website, it is HTML that helps the poor browser distinguish :

* What is a Heading
    
* What is a Paragraph
    
* What is an Image
    
* What is a Button or a Link
    

Without HTML a Browser wouldn’t have a clue about what Content to Display or how its supposed to be arranged. Now we know why we need it. The next question should be

<div data-node-type="callout">
<div data-node-type="callout-emoji">❓</div>
<div data-node-type="callout-text">How does it tell a Browser that</div>
</div>

The answer lies in its name, HTML stands for **Hyper Text Markup Language**.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769639729884/842335ac-e221-4d72-a8c2-79dd1b0a0947.png align="center")

It is a language that encloses Text within special Tags that allow the browser to display them in various formats and link them with each other.

<div data-node-type="callout">
<div data-node-type="callout-emoji">❓</div>
<div data-node-type="callout-text">What are these Tags? How do they tell the Browser what to do with Text?</div>
</div>

An HTML tag is a label enclosed within `<>` that tells a bowser what the content enclosed with that tag is or how to deal with it.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769641258695/76b549f1-da53-49a4-b878-acdfedea1ed3.png align="center")

Some examples of HTML Tags are:

1. &lt;html&gt; - HTML Tag (The root element that wraps the entire HTML document)
    
2. &lt;head&gt; - Head Tag (Stores the meta data of a web page)
    
3. &lt;body&gt; - Body Tag (Stores the main content of the webpage)
    
4. &lt;div&gt; - Div Tag (Like a box groups elements together)
    
5. &lt;span&gt; - Span Tag (Used to style or target small pieces of text)
    
6. &lt;p&gt; - Paragraph Tag (Used to write normal text content like explanations, blog content)
    
7. &lt;h1&gt; - Heading Tag (Used to define titles and section headings on a webpage)
    
8. &lt;u&gt; - Underline Tag (Used to add a horizontal line under the enclosed text)
    
9. &lt;i&gt; - Italic Tag (Used to display text in an italicized font)
    
10. &lt;a&gt; - Anchor Tag (Used to create hyperlinks)
    

## HTML Element

Generally in HTML, a piece of content is accompanied by an **Opening and Closing Tag**. Both of these tags are of same type and help the Browser determine what the piece of content is and how to Display it. For eg:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769644270971/b9e688a9-6709-46ef-a253-9fe91547f979.png align="center")

In the above example :

* `<u>` - Underline Tag. Tells the browser to start underlining whatever content it encounters now.
    
* `Hello, how are you?` \- The piece of content that is to be underlined.
    
* `</u>` - Tells the browser to stop underlining the content.
    

And this whole structure of a piece of content being **accompanied by a set of Tags, makes up an HTML Element.**

> HTML Element → Opening Tag + Content + Closing Tag

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769642836122/c3ecd7a8-9891-49af-a0ff-5ce58c15b334.png align="center")

There are some special cases of tags that do not require a Closing tag because of the action they perform, we call them **Self Closing Elements**. Some examples are :

1. &lt;br&gt; - Break Tag, adds a line break.
    
2. &lt;hr&gt; - adds a horizontal line.
    

## Block Level Vs Inline Elements

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769644333924/6ac1a405-6027-4abb-96e7-ba3aa7d65c94.png align="center")

### **1\. Block Level Elements (The "Big Bosses")**

These elements are selfish. They always start on a new line and take up the **full width** available (like a wall). Nothing can sit next to them.

* **Examples:** `<div>`, `<h1>`, `<p>`, `<ul>`.
    
* Like a brick in a wall. You can't put two bricks in the exact same horizontal space. The next one has to go below.
    

### **2\. Inline Elements (The "Friendly Neighbors")**

These elements only take up as much width as they need. They do **not** start on a new line; they sit comfortably next to other elements.

* **Examples:** `<span>`, `<a>` (links), `<b>` (bold).
    
* Like words in a sentence. They sit side-by-side until they run out of room.
    

---

**Pro Tip :** Right Click on this very page and click on “Inspect”. You can see the real skeleton of this Web Page in you Browser.