Understanding HTML Tags and Elements
HTML is a skeleton of every web page. When you see a nicely designed website, everything you can click, read, or scroll through started as plain HTML text that browser understood and turned into what you see.
What HTML is and why we use it
HTML stands for HyperText Markup Language.
Think of it as the blueprint that tells the browser:
Where to put text, images, buttons, links
How content is organized (headings, paragraphs, lists)
What is clickable or interactive
Without HTML, browsers would just show blank screens. HTML gives structure to web pages, like the frame of a house before you paint the walls.
What is an HTML tag?
An HTML tag is a way to mark up (label) different parts of your content.
Tags look like this: <tagname>
Most tags come in pairs:
Opening tag: <p>
Closing tag: </p>
The stuff between them is the content.
For example:
<p>Hello world!</p>
<p> Hello world! </p>
│Opening tag│ │Closing tag │
In this:
<p>is the opening tagHello world!is the content</p>is the closing tag
The <p> tag tells the browser: "This is a paragraph."
Opening tag, closing tag, and content
Every regular HTML tag has three parts:
Opening tag:
<p>,<h1>,<div>Content: text, images, other tags, etc.
Closing tag:
</p>,</h1>,</div>
Examples:
<h1>My Big Title</h1>
<!-- Opening: <h1> | Content: "My Big Title" | Closing: </h1> -->
<div>This is a box</div>
<!-- Opening: <div> | Content: "This is a box" | Closing: </div> -->
Tag names are always lowercase in modern HTML.
What is an HTML element?
An element is the complete thing: opening tag + content + closing tag.
Tag: <p>
Element: <p>Hello world!</p> ← the whole package
Tag = just the label (<p>, </p>)
Element = opening tag + content + closing tag (<p>Hello!</p>)
Think of it like:
Tag = the box label
Element = the labeled box with stuff inside
Self-closing elements
Some tags don't need closing tags because they don't contain content. These are called void elements or self-closing tags.
Common examples:
<img src="photo.jpg" alt="A picture">
<br> <!-- line break -->
<hr> <!-- horizontal line -->
<input type="text">
<meta charset="UTF-8">
See:
<img>has no</img><br>has no</br>They often have attributes like
src="..."ortype="..."
Rule: If it makes sense to put content inside, it needs a closing tag. If not, it's self closing.
Block-level vs inline elements
HTML elements behave differently regarding space and layout:
Block-level elements
Take full width available
Start on a new line
Like big boxes stacked vertically
For example:
<h1>Big heading</h1> <!-- takes full width, new line -->
<p>Paragraph text</p> <!-- takes full width, new line -->
<div>Container box</div> <!-- takes full width, new line -->
Inline elements
Only take width of their content
Sit next to each other on the same line
Like words in a sentence
For example:
<span>Inline text</span> <span>stays on same line</span>
<a href="https://google.com">Link</a> <a href="...">also inline</a>
<strong>Bold text</strong> <em>italic text</em> <!-- side by side -->
visual example:
<div>Block 1</div> <!-- new line -->
<div>Block 2</div> <!-- new line -->
<span>Inline 1</span> <span>Inline 2</span> <!-- same line -->
Commonly used HTML tags
Here are the most important tags every beginner should know:
Headings (important for structure):
<h1>Main title</h1>
<h2>Section title</h2>
<h3>Subsection</h3>
Text content:
<p>This is a paragraph.</p>
<strong>Bold / important</strong>
<em>Italic / emphasis</em>
Containers (group things together):
<div>Generic box</div>
<span>Generic inline box</span>
Links and images:
<a href="https://example.com">Click me</a>
<img src="photo.jpg" alt="Description">
Lists:
<ul> <!-- unordered list -->
<li>First item</li>
<li>Second item</li>
</ul>
<ol> <!-- ordered list -->
<li>Step 1</li>
<li>Step 2</li>
</ol>
Start with these basics, inspect real websites, and HTML will quickly feel natural.
