# HTML for Beginners: Understanding the Basics
# HTML
If you want to build websites, there is one language you absolutely must learn first is HTML.
Before you worry about making things look pretty with colors and fonts (that’s CSS) or making things interactive (that’s JavaScript), you need structure.
## What is HTML?
HTML stands for **HyperText Markup Language**. It is not a programming language in the traditional sense (like Python or Java); it is a markup language.
Think of a webpage like a human body.
* HTML is the skeleton. It provides the essential structure and holds everything together. Without bones, a body is just a shapeless blob. Without HTML, a website is just a shapeless blob of unformatted text.
* CSS would be the skin, hair, and clothing (the style).
* JavaScript would be the muscles and brain (the movement and logic).
We use HTML to tell a web browser (like Chrome or Safari) what different parts of content are. We tell the browser, "This text is a main heading," "This block is a paragraph," and "This part is an image."
## HTML Tags
How do we tell the browser what something is? We use **tags**.
Imagine you are moving house and packing boxes. You wouldn't just throw everything into unlabeled boxes. You write labels on them: "Kitchen," "Books," "Bedroom."
HTML tags are those labels for your content. They are keywords surrounded by angle brackets: `<` and `>`.
### The Structure of a Tag
Most HTML elements follow a simple "sandwich" structure:
1. **An Opening Tag:** This marks the beginning of an element. It tells the browser, "Hey, a specific type of content starts here." (e.g., `
`)
2. **The Content:** The actual text, image, or other data goes here.
3. **A Closing Tag:** This marks the end. It looks just like the opening tag but has a forward slash (`/`) before the keyword. (e.g., `
`)
Here is a real example used for a paragraph of text:
```xml
This is a paragraph of text.
```
* `
` tells the browser: "Start a paragraph here."
* `This is a paragraph of text.` is the content displayed on the screen.
* `
` tells the browser: "End the paragraph here."
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769702903450/73261baa-b071-4e54-be43-b1fc05549b5e.png align="center")
## Tag vs. Element: What’s the Difference?
As you learn, you will hear the words "tag" and "element" used interchangeably, but there is a slight difference.
* A Tag is just the part inside the angle brackets (e.g., `
` is a tag).
* An Element is the complete package: the opening tag, the content *inside*, AND the closing tag.
Think of it like a sandwich. The bread pieces are the tags. The whole thing bread, lettuce, tomato, and cheese together is the element.
## Self-Closing Elements
Most elements have content inside them, so they need a closing tag to know where that content ends.
However, some elements don't hold text. They just *are*. These are called self-closing or void elements. Because they don't have content inside, they don't need a closing tag.
A perfect example is a line break, which just forces text to drop to the next line. The tag is ` `.
```xml
First line. Second line.
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769702938170/7614af13-921f-49fb-969f-297ab46079f8.png align="center")
Another common one is an image (``). You don't put text *inside* an image tag; you just tell the browser where the image file sits.
## Block vs. Inline
When you put elements on a page, they generally fall into two categories based on how they arrange themselves: **Block-level** and **Inline**.
### 1\. Block-level Elements
Imagine these elements are greedy; they want the whole line to themselves.
* They always start on a new line.
* They stretch out to take up the full available width of the page (from left to right).
**T**hink of paragraphs in a book. Each new paragraph starts on a fresh line.
*Examples:* Headings (`
```
* `src` → image path
* `alt` → text shown if image fails(important for accessibility)
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769704528251/2cf785cd-4e59-4fdf-a569-6a80a66ee058.png align="center")
### 7\. Lists
Unordered List
```xml