# Understanding HTML Tags and Elements ## What Is HTML and Why Do We Use It **HTML (HyperText Markup Language)** is the standard language used to create and structure content on the web — it tells browsers *what* content is and *how* it should be organized. Think of HTML as the **skeleton of a webpage**: without it you’d just have plain text with no structure or meaning. HTML lets you define headings, paragraphs, links, images, lists, and more. --- ## What Is an HTML Tag? An **HTML tag** is a keyword wrapped in angle brackets (`<` and `>`). Tags act like labels that tell the browser about the content inside them. Example tags: ```javascript

``` Tags usually come in pairs — an **opening tag** (e.g., `

`) and a **closing tag** (e.g., `

`). The closing tag has a slash to show where the element ends. --- ## What Is an HTML Element? An **HTML element** is everything from the **start tag** to the **end tag** *including* the content between them. **Element = opening tag + content + closing tag** Example: ```javascript

Hello, world!

``` Together, this tells the browser: *display “Hello, world!” as a paragraph.* ### Self-Closing (Void) Elements Some elements don’t wrap around content; they exist on their own. For example: ```javascript
``` These are called **self-closing** or **void elements** — they don’t have closing tags. --- ## Block-Level vs Inline Elements HTML elements behave differently on the page depending on how they are displayed: ### Block-Level Elements * Start on a **new line** * Take up the **full width** available * Often used for main structure sections * Examples: `
`, `

`, `

` ```javascript
This is a block.

This starts on its own line.

``` ### ➿ Inline Elements * Stay **inside text flow** * Only take up as much width as needed * Often used within other elements * Examples: ``, ``, `` ```javascript

This is inline in a paragraph.

``` **Tip:** Block elements build structure; inline elements refine content inside that structure. --- ## Common HTML Tags You’ll See First Here are some fundamental tags used in most HTML pages: * `` – The root element of an HTML document * `` – Metadata container (title, scripts, styles) * `` – Main visible page content * `

` to `

` – Headings, with `

` largest * `

` – Paragraph text * `` – Hyperlink * `` – Image (self-closing) * `

` – Generic block container * `` – Generic inline container These tags help you define structure and content quickly. --- ## Tag vs Element: What’s the Difference? * **Tag:** A part of markup (`

`, `

`). * **Element:** A complete unit of content including tags and what’s inside them. In casual discussion, people often use “tag” and “element” interchangeably, but *technically*, the tag is just the markup while the element is the whole construct. --- ## Try It Yourself Open any webpage in your browser, right-click, and choose **Inspect** or **View Page Source**. You’ll see HTML in action — that’s your chance to practice recognizing tags and elements! --- ## Summary * **HTML** is the skeleton language of the web. * **Tags** are markers used to describe content. * **Elements** include tags and the content they wrap. * Some elements are **self-closing/void** (e.g., `
`, ``). * Elements can be **block-level** or **inline** depending on how they layout on the page.