# HTML for Beginners 🎯

## What is HTML?

HTML = **H**yper**T**ext **M**arkup **L**anguage

Think of HTML as the **skeleton of every webpage**. Just like your skeleton gives your body structure, HTML gives webpages their structure.

**Why do we use it?**

* Tell browsers what's a heading, what's a paragraph, what's a button
    
* Create the foundation every website needs
    
* Without HTML, websites would just be plain text with no structure
    

---

## What is an HTML Tag?

A tag is like a **label** or **command** that tells the browser: "Hey, this is a heading!" or "This is a paragraph!"

Tags look like this: `<p>`

They use angle brackets: `< >`

---

## Opening Tag + Content + Closing Tag

Most tags work in pairs:

html

```html
<p>This is a paragraph!</p>
```

**Breaking it down:**

* `<p>` = **Opening tag** (starts the paragraph)
    
* `This is a paragraph!` = **Content** (the actual text)
    
* `</p>` = **Closing tag** (ends the paragraph - notice the `/`)
    

**Think of it like a sandwich:**

* Opening tag = top bun 🍔
    
* Content = the filling 🥬🍅
    
* Closing tag = bottom bun
    

---

## Tag vs Element (What's the Difference?)

**TAG** = Just the label itself

* Example: `<h1>` or `</h1>`
    

**ELEMENT** = The whole thing (opening + content + closing)

* Example: `<h1>Welcome!</h1>` is a complete element
    

**Quick memory trick:** The element includes *everything*, the tag is just the bracket part.

---

## Self-Closing Tags (Void Elements)

Some tags don't need content or a closing tag. They're **self-contained**.

html

```html
<img src="cat.jpg">
<br>
<hr>
<input type="text">
```

**Why?** These tags don't wrap around content—they just do one thing:

* `<img>` displays an image
    
* `<br>` creates a line break
    
* `<hr>` draws a horizontal line
    
* `<input>` creates a form field
    

---

## Block vs Inline Elements

### Block Elements 📦

* Take up the **full width** available
    
* Start on a **new line**
    
* Stack like blocks
    

html

```html
<h1>Heading</h1>
<p>Paragraph</p>
<div>Division</div>
```

Each one appears on its own line!

### Inline Elements ➡️

* Only take up as **much space as needed**
    
* Don't start a new line
    
* Flow with text
    

html

```html
<span>This</span> <strong>flows</strong> <em>together</em>
```

All on the same line!

---

## Common HTML Tags You'll Use All the Time

### Headings (biggest to smallest)

html

```html
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
```

Use `h1` for the main title, `h2` for sections, etc.

### Paragraphs

html

```html
<p>A paragraph of text goes here.</p>
```

### Containers

html

```html
<div>A block container for grouping stuff</div>
<span>An inline container</span>
```

### Text Formatting

html

```html
<strong>Bold text</strong>
<em>Italic text</em>
```

### Links

html

```html
<a href="https://google.com">Click me!</a>
```

### Images

html

```html
<img src="photo.jpg" alt="A photo">
```

### Lists

html

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

---

## Quick Practice Example

html

```html
<h1>My First Webpage</h1>
<p>This is a paragraph about HTML.</p>
<p>HTML is <strong>awesome</strong>!</p>
```

**What this creates:**

* A big heading
    
* Two paragraphs
    
* The word "awesome" is bold
    

---

## Try This Right Now! 🚀

1. Right-click anywhere on this webpage
    
2. Click "Inspect" or "Inspect Element"
    
3. Look at the **Elements** tab
    
4. You're seeing the actual HTML!
    

**Explore:** Click the little arrows to expand tags and see what's inside.

---

## Key Takeaways ✨

✅ HTML = webpage skeleton  
✅ Tags use `< >` brackets  
✅ Most tags open `<p>` and close `</p>`  
✅ Element = complete tag + content  
✅ Some tags self-close `<img>`  
✅ Block = full width, Inline = only what's needed  
✅ Start with `h1`, `p`, `div`, `span`

**Next step:** Open a blank file, save it as `index.html`, and start typing tags. Open it in your browser and watch it work!