Understanding HTML Tags and Elements

HTML (HyperText Markup Language) structures all web content. It's not a programming language; it's a markup language that tells browsers what each part of a page is.

HTML Tags: The Building Blocks

A tag labels content. Think of it like a box with a label:

<h1>Welcome to My Site</h1>
↑    ↑                ↑
Open Content       Close

• Opening tag: <h1> (starts the element)

• Content: "Welcome to My Site"

• Closing tag: </h1> (ends the element)

HTML Element = Tag + Content

<p>This is a paragraph.</p>
↑ ↑                    ↑ ↑
| |__ HTML Element ____| |
|_______ HTML Tag _______|

Element: The complete package (opening tag + content + closing tag)
Tag: Just the <p> and </p> markers

Self-Closing (Void) Elements

Some elements don't have content or closing tags:

<img src="photo.jpg">  <!-- Image -->
<br>                   <!-- Line break -->
<input type="text">    <!-- Form input -->

These are complete in themselves.

Block vs Inline Elements

Block elements start on a new line and take full width:

<div>Header</div>     <!-- New line -->
<p>Paragraph</p>      <!-- New line -->
<h1>Title</h1>        <!-- New line -->

Inline elements flow within text:

Here's some <span>highlighted</span> text.
This has <strong>bold</strong> and <em>italic</em>.

Essential HTML Tags

<!-- Structure -->
<h1>Main Heading</h1>    <!-- Largest heading -->
<h2>Subheading</h2>      <!-- Smaller headings -->
<p>Paragraph text.</p>    <!-- Basic text -->
<div>Container box</div>  <!-- Group elements -->
<span>Inline text</span>  <!-- Style part of text -->

<!-- Media -->
<img src="image.jpg" alt="Description">
<a href="https://example.com">Link</a>

<!-- Lists -->
<ul>                      <!-- Unordered (bullets) -->
  <li>Item 1</li>
</ul>
<ol>                      <!-- Ordered (numbers) -->
  <li>First item</li>
</ol>

See HTML in Action

Right-click any webpage → "Inspect" to see its HTML skeleton. Every website uses these same basic tags—just arranged differently.

HTML creates the structure. CSS adds styling. JavaScript adds interactivity. Start with HTML—the foundation of the web.

Enjoyed reading this blog? Let's connect!
🐦 Twitter/X: @rohan_gupta96
💼 LinkedIn: https://www.linkedin.com/in/rohangupta9896
🐙 GitHub: https://github.com/rohan9896