# HTML Basics ## Introduction When you first start learning web development, HTML is the very first thing you encounter. But many beginners quickly get confused by questions like: * What exactly is an HTML tag? * What is an HTML element? * Are tags and elements the same thing? * Why do some tags have closing tags and some don’t? This article will clear all of that confusion. Think of HTML as the **skeleton of a webpage**. Just like a human body needs bones to hold everything together, a webpage needs HTML to define its structure. By the end of this article, you’ll clearly understand: * What HTML is * What tags and elements mean * How browsers read HTML * The difference between block and inline elements No prior experience required. Let’s start from the basics. --- ## What Is HTML and Why Do We Use It? HTML stands for **HyperText Markup Language**. HTML is **not a programming language**. It does not contain logic, conditions, or loops. Instead, HTML is a **markup language**, which means: > It describes the structure and meaning of content. HTML tells the browser things like: * This is a heading * This is a paragraph * This is a link * This is an image Without HTML, a browser would not know: * Where text starts and ends * What should look important * How content is organized In simple terms: > **HTML defines *what* the content is.** --- ## What Is an HTML Tag? An **HTML tag** is a keyword wrapped inside angle brackets (`< >`). Example: ```plaintext

``` This is an **opening tag**. Most HTML tags come in pairs: * An **opening tag** * A **closing tag** Example: ```plaintext

TechGyaan

``` Here: * `

` → opening tag * `

` → closing tag Tags tell the browser **how to interpret the content inside them**. --- ## Opening Tag, Closing Tag, and Content Let’s break this down clearly. Example: ```plaintext

TechGyaan

``` This has three parts: 1. **Opening tag** ```plaintext

``` 2. **Content** ```plaintext TechGyaan ``` 3. **Closing tag** ```plaintext

``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769771205298/03d01022-9e9b-4f7a-990e-068b412b23fd.png align="center") You can think of it like an object inside a box: * The tags are the box * The text is what’s inside the box --- ## What Is an HTML Element? **An HTML element is the complete structure**: * Opening tag * Content * Closing tag Example: ```plaintext

TechGyaan

``` This entire line is **one HTML element**. ### Important Difference * **Tag** → Just the markup (`

`, `

`) * **Element** → opening tag + content + closing tag **Tags build elements.** --- ## Self-Closing (Void) Elements Not all HTML elements have closing tags. Some elements are called **self-closing** or **void elements**. Examples: ```plaintext
``` These elements: * Do not wrap content * Exist as a single tag * Represent standalone items Example: ```plaintext A photo ``` There is no `` because the image itself *is* the content. --- ## Block-Level vs Inline Elements HTML elements are broadly divided into two categories: * Block-level elements * Inline elements ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769771329193/eaea3349-694c-4b2c-8921-cacd6ed991e5.jpeg align="center") Understanding this helps a lot when you start styling with CSS. --- ### Block-Level Elements Block-level elements: * Start on a new line * Take up the full width available Examples: ```plaintext

``` Example: ```plaintext

This is a paragraph

This is another paragraph

``` These paragraphs appear **one below the other**. --- ### Inline Elements Inline elements: * Do not start on a new line * Only take as much width as needed Examples: ```plaintext ``` Example: ```plaintext

This is important text.

``` Here, `` stays **inside the line**. --- ## Commonly Used HTML Tags Here are some HTML tags you’ll use almost daily: ```plaintext

to

→ Headings

→ Paragraph → Link → Image