# Understanding HTML Tags and Elements

## **What is HTML?**

HTML (**HyperText Markup Language**) is the skeleton of a [website.It](http://website.It) doesn’t provide the color which is provided by CSS and interactivity which Js provides to a wesbite ,HTML provides the essential structure that holds everything together.

The easiest way to understand HTML is the **Box Analogy**. Every piece of content on a website is wrapped in an invisible box.

*   **The Opening Tag** “`<tag>`” is like the front of the box.
    
*   **The Content** is what we put inside the box.
    
*   **The Closing Tag** “`</tag>`“ is like the back of the box, sealing it shut.
    

## **HTML tags**

HTML tags are keywords enclosed in angle brackets “ `<` “ and “ `>` “ that indicate how content should be structured or displayed, forming the core of HTML syntax.

Opening tag: It starts with an element, e.g., “ <h1> “

Closing tag: It ends the element e.g., “ </h1> with a slash “ .

Content: It just sits/fit between opening and closing tag ( <h1> This is first heading content </h1> )

```xml
<h1>Hi , i am inside the h1 tag </h1>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1771005719452/2f6b8691-ae6c-4064-93bb-ba17414a2be3.webp align="center")

## **HTML Elements**

An HTML element is the complete unit that is opening tag, content (text, nested elements, or attributes), and closing tag, representing building blocks like a paragraph ,heading or image container.

```xml
<h1> I am inside Heading Tag 1</h1>
<p>I am inside paragraph tag</p>
<div>This is a container</div>
```

## **Common Basic Tags**

1.  Headers: `<h1>` to `<h6>`
    
    These are for titles and subtitles. `<h1>` is the most important (the main heading), and `<h6>` is the smallest.
    
    ```xml
     <h1>This is a Big Title</h1>
     <h2>This is a Subheading 1</h2>
     <h3>This is a Subheading 2</h3>
    ```
    
2.  2\. Paragraphs: `<p>`
    
    This is for our standard blocks of text.
    
    ```xml
     <p>This is a sentence inside a paragraph box.</p>
    ```
    
3.  Containers: `<div>`
    
    Big Box:Used to group large sections of content together. It starts on a new line.
    
4.  `<span>` (The Small Box): Used for small bits of text *inside* a sentence to style them specifically. It stays on the same line.
    
    ```xml
     <div>
       <h1>Welcome</h1>
       <p>This is a <span>highlighted</span> word inside a div.</p>
     </div>
    ```
    

## **Self-Closing Elements**

Self-closing (or void) elements don't need a closing tag because they don't wrap content; they end with a slash, like `<img src="image.jpg" alt="Description" />` or `<br />`. Examples include `<img>`, `<hr>`, and `<input>`, used for images, line breaks, and form inputs.

```xml

    <img src="example.jpg" alt="Sample image">

    <!-- Line break -->
    <br>

    <!-- Horizontal rule -->
    <hr>

    <!-- Input field -->
    <input type="text" placeholder="Enter text">

    <!-- Link to stylesheet (in head typically) -->
    <link rel="stylesheet" href="styles.css">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1771005930824/6a028ed2-e752-41fa-8448-94761b6cbc51.png align="center")

## **Block Vs Inline Elements**

Block-level elements, like “`<div>`” and `<p>` ,`<nav>`,`<header>` start on new lines and take full width, stacking vertically to form page sections.

Inline elements, like `<span>` and `<a>`, flow within text lines without breaking layout, used for styling words or links

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1771005512845/001d0001-b92f-4532-bd55-116b1f12e9cb.jpeg align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1771005559141/c147daf7-0249-4807-b58e-130d35857269.jpeg align="center")