# HTML Basics: The Skeleton of the Web

If you imagine a website as a human body, **HTML (HyperText Markup Language)** is the skeleton. Just as bones give a body structure and hold everything in place, HTML provides the structure for a webpage. It tells the browser where the headings go, where the paragraphs sit, and where images belong.

Without HTML, the web would just be a blob of unformatted text.

## What is an HTML Tag?

Think of an HTML **tag** like a storage box.

* You have an **opening tag** (opening the box).
    
* You put **content** inside (the stuff in the box).
    
* You have a **closing tag** (taping the box shut).
    

Tags are keywords surrounded by angle brackets, like `<tagname>`. They tell the browser *how* to display the content inside them.

### The Anatomy of a Tag

Here is the standard syntax:

```xml
<p>This is a paragraph.</p>    
```

* **Opening Tag:** `<p>` (Starts the paragraph)
    
* **Content:** `This is a paragraph.` (The text you see on the screen)
    
* **Closing Tag:** `</p>` (Ends the paragraph—notice the forward slash `/`)
    

---

## Tags vs. Elements: What's the Difference?

New developers often use these terms interchangeably, but there is a distinct difference.

* **Tag:** The code bits in the brackets (e.g., `<h1>` or `</h1>`).
    
* **Element:** The *entire* package, from the opening tag to the closing tag, including the content inside.
    

> **Formula:** Opening Tag + Content + Closing Tag = **HTML Element**

### Visualizing the Breakdown

```xml
Element
┌──────────────────────────────┐
<button> Click Me </button>
└─┬────┘ └──┬───┘ └───┬─────┘
Opening   Content   Closing
  Tag                 Tag
```

## Self-Closing (Void) Elements

Some elements don't hold content. Since they don't have "stuff" inside them, they don't need a closing tag. These are called **self-closing** or **void** elements.

Common examples:

* `<br>`: Inserts a line break.
    
* `<img>`: Embeds an image.
    
* `<hr>`: Creates a horizontal line.
    

## Block-Level vs. Inline Elements

Understanding how elements sit on the page is crucial for layout.

### 1\. Block-Level Elements

These are the "greedy" elements. They always start on a new line and take up the **full width** available (like a block stretching from left to right).

* **Examples:** `<div>`, `<h1>`, `<p>`, `<ul>`
    
* **Visual:** Imagine stacking cardboard boxes vertically on top of each other.
    

### 2\. Inline Elements

These are the "social" elements. They do not start on a new line; they only take up as much width as necessary and sit happily next to other elements.

* **Examples:** `<span>`, `<a>` (links), `<b>` (bold)
    
* **Visual:** Like words in a sentence flow from left to right.
    

> **Analogy:**
> 
> * **Block elements** are like houses on a street (each takes up a specific plot of land).
>     
> * **Inline elements** are like furniture inside the house (they sit next to each other within the space).
>     

---

## Commonly Used Tags

Here are the essentials you will use 90% of the time:

| **Tag** | **Purpose** | **Type** |
| --- | --- | --- |
| `<h1>` to `<h6>` | Headings (`h1` is largest/most important). | Block |
| `<p>` | Paragraphs of text. | Block |
| `<a>` | Anchors (links to other pages). | Inline |
| `<img>` | Images. | Inline-block |
| `<div>` | A generic container for grouping content. | Block |
| `<span>` | A generic container for styling text. | Inline |