# Understanding HTML Tags and Elements Think of a webpage like a human body. The CSS is the skin and clothes (the style), JavaScript is the muscles (the movement), and **HTML (HyperText Markup Language)** is the **skeleton**. It provides the structure and tells the browser exactly what kind of content it is looking at—whether it's a heading, a paragraph, or a button. ### What is an HTML Tag? A **tag** is like a label. It tells the browser, "Everything inside here should be treated as a specific type of content." Tags are wrapped in angle brackets `< >`. Most tags come in pairs: 1. **Opening Tag (**`

`): Tells the browser where the content starts. 2. **Closing Tag (**`

`): Tells the browser where the content ends (notice the forward slash `/`). ### Tag vs. Element: What’s the Difference? These terms are often used interchangeably, but there is a subtle difference: * **Tag:** Just the markers (`

` or `

`). * **Content:** The actual text or data inside. * **Element:** The whole package—the opening tag, the content, and the closing tag combined. ### Self-Closing (Void) Elements Some elements don't have "content" in the traditional sense, so they don't need a closing tag. These are called **Void Elements**. * ``: Used to show an image. * `
`: Used for a single line break. * `
`: Creates a horizontal line across the page. ### Block-level vs. Inline Elements This is one of the most important concepts for building layouts. Think of these as "The Box" vs. "The Text." #### 1\. Block-level Elements These elements always start on a **new line** and take up the **full width** available (like a block). * **Common tags:** `
`, `

` through `

`, `

`, `