# Understanding HTML Tags and Elements ## TL;DR > **HTML (HyperText Markup Language)** is used to structure content on the web. It uses **tags** to define elements like headings, paragraphs, and links. An HTML tag usually has an **opening tag**, **content**, and a **closing tag**, and together they form an **HTML element**, which tells the browser what the content is and how it should be structured. --- Have you ever wondered how a browser knows what should be a heading, paragraph, or link? That structure comes from **HTML**, the language that defines how content fits together on a web page. Think of HTML as the **skeleton of a webpage**—Just like a skeleton defines the shape of a body, it provides the basic structure that holds everything in place and forms the foundation of everything you see on the web. ## HTML ### What is HTML? **HTML (HyperText Markup Language)** is the standard language used to create and structure content on the web. It tells the browser **what each piece of content is**, such as headings, paragraphs, images, links, and forms. > **Markup languages** are computer languages that are used to structure, format, or define relationships between different parts of text documents with the help of symbols or tags inserted in the document. These languages are more readable than usual programming languages with strict syntax. ### **Simple HTML document:** ```xml Page Title

My First Heading

My first paragraph.

``` ### Why we use it? We use HTML because it provides a **clear and consistent structure** for web pages, allowing browsers to correctly display content and enabling other technologies like CSS and JavaScript to style and add interactivity. In short, HTML forms the **foundation of every web page**. --- ## HTML Tags and Element ### What is an HTML tag ? An **HTML tag** is a keyword enclosed in angle brackets (`< >`) that tells the browser **how to treat or display content** on a web page. > You can think of **HTML tags like labels on boxes**. > > The **tag** is the label that tells what’s inside the box, and the **content** is what the box contains. For example, a `

` tag tells the browser, “This text is a paragraph,” just like a label on a box tells you what’s inside. This helps the browser know **how to display and organize** the content. **Common HTML tag examples** include `

`, `

`,`

` to `

`,``, ``,`` ,``etc. > There are more **advanced HTML tags** which are used to create **structured, semantic, and interactive web pages**. ### HTML Element An **HTML element** is **a core component of an HTML document that defines the structure and content of a web page**. It consists of everything from the opening **tag** to the closing tag, including the content in between. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769696906488/430227ff-a53f-4e50-99ee-b87cd608497d.jpeg align="center") Most HTML elements are composed of three parts: * **Opening Tag**: Marks the beginning of the element. It consists of the element's name enclosed in angle brackets, e.g., `

` for a paragraph. * **Content**: The information inside the opening and closing tags, such as text or other nested elements. * **Closing Tag**: Marks the end of the element. It is the same as the opening tag but includes a forward slash before the element's name, e.g., `

` > An **HTML element** is the complete unit that makes up a webpage’s structure. > **In short:** > > * A **tag** is part of the syntax. > > * An **element** is the full unit that represents actual content on the webpage. > --- ## Self-closing Tags Void elements, also known as **self-closing tags**, are HTML elements that cannot contain any child nodes, text, or content, and therefore do not require a separate closing tag. They represent self-contained, single-purpose elements used to perform specific functions on a webpage. **Key Characteristics** * **No End Tags** * **Self-Closing Syntax (**`/`) Common **self-closing tags** include: * `` – Displays an image * `
` – Inserts a line break * `
` – Adds a horizontal line * `` – Creates an input field and **many more**…. --- ## Block-level and Inline elements ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769698198569/d0d26f82-20d9-4b6f-8bf6-f17c25b3eb12.webp align="center") ### Block-level Elements Block-level elements are HTML elements that **start on a new line** and take up the **full available width** of their parent container.They are typically used to define the main structure and layout of a webpage. Common block-level elements include `
`, `

`,`

` to `

`,`
`, etc. ### Inline Elements Inline elements are HTML elements that **do not start on a new line** and take up **only as much width as their content requires**. They are typically used to style or modify small pieces of content within a block-level element. Common block-level elements include ``, ``,`` ,``, etc. > **Block-level elements** act like **big boxes** that start on a new line and take up the full width, while **inline elements** are like **words in a sentence**, flowing within a line and only taking up as much space as needed. --- ## **Commonly Used HTML Tags and Their Uses** Tags form the **basic building blocks** used to structure and display content on web pages. Common and widely used tags include: * `` – Root element of an HTML document * `` – Contains metadata about the page * `` – Sets the title shown in the browser tab * `<body>` – Contains all visible page content * `<h1>` – `<h6>` – Headings (from most to least important) * `<p>` – Paragraph of text * `<a>` – Creates a hyperlink * `<img>` – Displays an image * `<br>` – Inserts a line break * `<hr>` – Adds a horizontal rule * `<div>` – Block-level container for layout * `<span>` – Inline container for styling text * `<ul>` / `<ol>` – Unordered and ordered lists --- ## Developer Tools ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769699341718/8a724119-82c1-4975-aaad-bee85b82d7ab.png align="center") Now that you’re familiar with the basics of **HTML and its tags**, the next step is to see them in action on real websites. Using **browser Developer Tools**, you can inspect any webpage to view its HTML structure and understand how HTML, CSS, and JavaScript work together in real time. <mark>To open Developer Tools</mark>, simply **right-click on a webpage and select “Inspect”**, or press **F12 / Ctrl+Shift+I (Cmd+Option+I on Mac)**. This hands-on exploration helps bridge theory and practice and builds confidence as you continue learning web development. --- ## Conclusion HTML is the foundation of every webpage, providing the structure that defines content and layout. By using tags and elements, HTML tells the browser what each piece of content represents and how it should be organized. Combined with hands-on exploration through browser Developer Tools, learning HTML becomes more practical and intuitive. Understanding HTML is essential for anyone starting web development, as it forms the base upon which styling, interactivity, and modern web applications are built. --- > If you enjoyed this article, check out my other blogs on this profile. > > 🔗 **Connect with me:** > [**LinkedIn**](https://linkedin.com/in/rajharsh4618) | [**GitHub**](https://github.com/Harsh-Raj4618) | [**X (Twitter)**](https://x.com/Harsh_Raj4618)