# Understanding HTML Tags and Elements

HTML is a **skeleton** of every web page. When you see a nicely designed website, everything you can click, read, or scroll through started as plain HTML text that browser understood and turned into what you see.

## What HTML is and why we use it

**HTML** stands for **HyperText Markup Language**.

Think of it as the **blueprint** that tells the browser:

* Where to put text, images, buttons, links
    
* How content is organized (headings, paragraphs, lists)
    
* What is clickable or interactive
    

Without HTML, browsers would just show blank screens. HTML gives structure to web pages, like the frame of a house before you paint the walls.

## What is an HTML tag?

An **HTML tag** is a way to **mark up** (label) different parts of your content.

Tags look like this: `<tagname>`

Most tags come in **pairs**:

```plaintext
Opening tag:  <p>
Closing tag:  </p>
```

The stuff between them is the **content**.

For example:

```xml
<p>Hello world!</p>
```

```plaintext
<p>          Hello world!          </p>
│Opening tag│            │Closing tag  │
```

In this:

* `<p>` is the **opening tag**
    
* `Hello world!` is the **content**
    
* `</p>` is the **closing tag**
    

The `<p>` tag tells the browser: "This is a paragraph."

## Opening tag, closing tag, and content

Every regular HTML tag has three parts:

1. **Opening tag**: `<p>`, `<h1>`, `<div>`
    
2. **Content**: text, images, other tags, etc.
    
3. **Closing tag**: `</p>`, `</h1>`, `</div>`
    

Examples:

```xml
<h1>My Big Title</h1>
<!-- Opening: <h1>  |  Content: "My Big Title"  |  Closing: </h1> -->

<div>This is a box</div>
<!-- Opening: <div>  |  Content: "This is a box"  |  Closing: </div> -->
```

**Tag names are always lowercase** in modern HTML.

## What is an HTML element?

An **element** is the **complete thing**: opening tag + content + closing tag.

```plaintext
Tag:     <p>
Element: <p>Hello world!</p>  ← the whole package
```

**Tag** = just the label (`<p>`, `</p>`)  
**Element** = opening tag + content + closing tag (`<p>Hello!</p>`)

Think of it like:

* **Tag** = the box label
    
* **Element** = the labeled box **with stuff inside**
    

## Self-closing elements

Some tags don't need closing tags because they **don't contain content**. These are called **void elements** or **self-closing tags**.

Common examples:

```xml
<img src="photo.jpg" alt="A picture">
<br>          <!-- line break -->
<hr>          <!-- horizontal line -->
<input type="text">
<meta charset="UTF-8">
```

See:

* `<img>` has no `</img>`
    
* `<br>` has no `</br>`
    
* They often have **attributes** like `src="..."` or `type="..."`
    

**Rule**: If it makes sense to put content inside, it needs a closing tag. If not, it's self closing.

## Block-level vs inline elements

HTML elements behave differently regarding **space and layout**:

### Block-level elements

* Take **full width** available
    
* Start on a **new line**
    
* Like big boxes stacked vertically
    

For example:

```xml
<h1>Big heading</h1>    <!-- takes full width, new line -->
<p>Paragraph text</p>   <!-- takes full width, new line -->
<div>Container box</div> <!-- takes full width, new line -->
```

### Inline elements

* Only take **width of their content**
    
* Sit **next to each other** on the same line
    
* Like words in a sentence
    

For example:

```xml
<span>Inline text</span> <span>stays on same line</span>
<a href="https://google.com">Link</a> <a href="...">also inline</a>
<strong>Bold text</strong> <em>italic text</em> <!-- side by side -->
```

visual example:

```plaintext
<div>Block 1</div>    <!-- new line -->
<div>Block 2</div>    <!-- new line -->

<span>Inline 1</span> <span>Inline 2</span>  <!-- same line -->
```

## Commonly used HTML tags

Here are the **most important** tags every beginner should know:

### Headings (important for structure):

```xml
<h1>Main title</h1>
<h2>Section title</h2>
<h3>Subsection</h3>
```

### Text content:

```xml
<p>This is a paragraph.</p>
<strong>Bold / important</strong>
<em>Italic / emphasis</em>
```

### Containers (group things together):

```xml
<div>Generic box</div>
<span>Generic inline box</span>
```

### Links and images:

```xml
<a href="https://example.com">Click me</a>
<img src="photo.jpg" alt="Description">
```

### Lists:

```xml
<ul>                    <!-- unordered list -->
  <li>First item</li>
  <li>Second item</li>
</ul>

<ol>                    <!-- ordered list -->
  <li>Step 1</li>
  <li>Step 2</li>
</ol>
```

---

Start with these basics, inspect real websites, and HTML will quickly feel natural.