` to `

# Understanding HTML Tags and Elements

### **What HTML is and why we use it?**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769685151510/91a73457-f41b-454d-abdd-e4945b9de897.png align="center")

Just as a skeleton provides the essential structural framework for the human body, **HTML (HyperText Markup Language)** serves as the structural foundation of a webpage. It organizes content into a hierarchy that the browser can interpret, ensuring every 'organ'—like text, images, and links—is held in its proper place.

### **What is an HTML tag?**

> An **HTML tag** consists of a keyword enclosed in angle brackets (`< >`). A complete **element** is made up of three parts:
> 
> * **Opening Tag:** For example, `<p>`. This signals where the element begins.
>     
> * **Content:** The text or data placed between the tags that will be displayed in the browser.
>     
> * **Closing Tag:** For example, `</p>`. This includes a forward slash to signal where the element ends.
>     
> 
> Together, the opening tag, the content, and the closing tag form a single **HTML element**.

### Self-closing (void) elements

While most HTML elements act as containers with a start and end, **void elements** (often called self-closing) do not have any content and therefore do not require a closing tag.

| **Tag** | **Purpose** | **Example** |
| --- | --- | --- |
| `<img>` | Embeds an image. | `<img src="logo.png" alt="Logo">` |
| `<br>` | Inserts a single line break. | `First line <br> Second line` |
| `<hr>` | Defines a thematic break (horizontal rule). | `<hr>` |
| `<input>` | Creates an input field for forms. | `<input type="text">` |
| `<meta>` | Provides metadata about the document. | `<meta charset="UTF-8">` |
| `<link>` | Links external resources (like CSS). | `<link rel="stylesheet" href="style.css">` |

1. ### Block-level vs Inline elements
    
    ![Basic HTML: Block-level, Inline, and Organizational Elements](https://media.gcflearnfree.org/content/5e82363212da9215e057b928_03_30_2020/block_vs_inline_diagram.png align="left")
    
    **Block-Level Elements:**
    
    A block-level element always starts on a new line and takes up the full width available within its parent container. 
    
    * **Common examples:**
        
        * `<div>`
            
        * `<p>`
            
        * `<h1>` to `<h6>`
            
        * `<ul>`, `<ol>`, `<li>`
            
        * `<header>`, `<footer>`, `<section>`, `<article>`, `<nav>` (semantic elements)
            
        * `<table>`, `<form>` 
            
    
    **Inline Elements:**
    
    An inline element does not start on a new line and only takes up as much width as is necessary to contain its content. 
    
    * **Common examples:**
        
        * `<span>`
            
        * `<a>`
            
        * `<img>`
            
        * `<strong>`, `<em>`, `<b>`, `<i>`
            
        * `<input>`, `<button>`, `<label>`
            
        * `<code>` 
            

### Commonly used HTML tags

These tags provide the "brain" and the boundary for the document. They aren't usually visible on the page itself.

***Root Tags***

* `<html>`: The root element that wraps all your content.
    
* `<head>`: Contains background info like the title and links to CSS.
    
* `<title>`: Sets the name shown on the browser tab.
    

***Text Content Tags***

These are the most frequently used tags for displaying information.

* `<h1>` to `<h6>`: Headings `<h1>` is the most important.
    
* `<p>`: Defines a paragraph of text.
    
* `<ul>` / `<ol>`: Unordered (bulleted) and Ordered (numbered) lists.
    
* `<li>`: The specific "List Item" inside a list.
    
* `<a>`: The anchor tag used for hyperlinks (e.g., `<a href="url">link</a>`).
    

***Media & Interactive Tags***

These bring the skeleton to life with images and functionality.

* `<img>`: (Void) Embeds an image.
    
* `<button>`: Creates a clickable button.
    
* `<form>`: A container for user input.
    
* `<input>`: (Void) A field where users can type data.