# HTML Elements Explained: The Essential Structure of the Web

Behind the every beautiful website HTML plays a crucial role by builing the cor structure of the site. **HTML** (HyperText Markup Language) works as the Skeleton of a website. It does not handle the styling and logic part of the site but makes the entire structure of the website. It decides where the texts, images and headings render.

## What is an HTML Tag?

Think of a **Tag** as a set of instructions for the browser. A tag tells the browser that the text inside here should be treated as a specific type of content. Such as if it is a heading then it will be treated as a heading.

Most tags come in pairs:

* **Opening Tag (**`<p>`): Tells the browser where the instruction starts.
    
* **Closing Tag (**`</p>`): Tells the browser where the instruction ends (notice the forward slash `/`).
    
* **Content:** The actual text or image sitting between the tags.
    

## Tag vs. Element: What’s the Difference?

These terms are often used changeably but there is a bit different:

* **The Tag** is just the piece of code like `<p>` or `</p>`.
    
* **The Element** is the whole package: the opening tag + the content + the closing tag.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1771161683616/3b4c4d8e-5a07-42b0-90d7-22eb0d02bce3.png align="center")

## Self-Closing (Void) Elements

Remember every element doesn’t need a closing tag. But some elements don't contain any text; they just "exist" as a single instruction. These kind of elements are called **Void Elements**.

* **Example:** The `<br>` tag (for a line break) or the `<img>` tag (for an image). You don't need to say "stop image" because the image is just a single point on the page.
    

## Block-Level vs. Inline Elements

This is the most important concept to understand how your website will actually look in the browser.

### Block-Level Elements

These elements always start on a new line and take up the **full width** available. They are like big boxes stacked on top of each other.

* **Examples:** `<div>`, `<h1>` to `<h6>`, `<p>`, `<ul>`.
    

### Inline Elements

These elements do **not** start on a new line. They only take up as much width as necessary and sit "in line" with other content. Inline elements doesn’t acquire the entir with of the line.

* **Examples:** `<span>`, `<a>` , `<strong>`.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1771162204993/272e0390-3238-42ee-9b0d-65277d370953.png align="center")

## Conclusion

When you start writing HTML code you will use these tags 90% of the time:

* `<div>`: A generic container (Block).
    
* `<span>`: A generic container for text (Inline).
    
* `<h1>` - `<h6>`: Headings for your titles.
    
* `<p>`: For your standard paragraph text.
    
* `<a>`: For creating links to other pages.