Understanding HTML Tags and Elements
I’m Ashwin Gudepu, a web development learner currently part of the Chai Code cohort. I’m blind, so accessibility is not an afterthought for me. I write about coding, tools, and lessons from building usable web apps.
What HTML Is and Why We Use It
HTML stands for HyperText Markup Language. It is the foundation of every webpage. HTML gives structure to content, just like a skeleton gives shape to a human body.
Without HTML, a webpage would only be plain text with no order. HTML helps us turn simple text into structured content such as headings, paragraphs, links, images, and forms.
HTML was created by Tim Berners-Lee in 1992. He is known as the father of the World Wide Web (WWW).
One of the most important features of HTML is linking documents together. This is why we can move from one page to another by clicking links across the internet.
HTML Is a Markup Language, Not a Programming Language
HTML is often misunderstood as a programming language, but it is not. HTML is a markup language.
A markup language is used to structure content, describe meaning, and format text. HTML can tell the browser that a piece of text is a heading, a paragraph, or a link.
However, HTML cannot make decisions, perform logic, or react to conditions. It only describes content.
Programming languages, on the other hand, can make decisions, handle logic, and respond to user actions. That is why JavaScript is used along with HTML.
What an HTML Tag Is
HTML works using tags. A tag is a rule that tells the browser how to treat the content.
A tag starts with a less-than symbol (<), ends with a greater-than symbol (>), and has a name inside.
<p>
This tag tells the browser that the content is a paragraph.
Opening Tag, Closing Tag, and Content
To clearly define where formatting starts and ends, HTML uses opening and closing tags.
Opening Tag
<p>
The opening tag starts the instruction.
Closing Tag
</p>
The closing tag ends the instruction. The slash symbol tells the browser to stop applying the rule.
Content
<p>This is a paragraph.</p>
The text written between the opening and closing tags is called the content.
What an HTML Element Means
An HTML element is the complete structure that includes the opening tag, the content, and the closing tag.
<h1>Introduction</h1>
This entire line is one HTML element.
Self-Closing (Void) Elements
Some HTML elements do not wrap content. They perform a single task and end immediately.
These are called self-closing or void elements.
Hello<br>World
The <br> tag breaks the line. It does not need a closing tag because it does not select content.
Other common void elements include <hr>, <img>, and <input>.
Block-Level vs Inline Elements
Block-Level Elements
Block-level elements start on a new line and take the full width of the page. They are used to build the main structure of a webpage.
<h1>Title</h1>
<p>Paragraph text</p>
Examples of block-level elements include <h1> to <h6>, <p>, and <div>.
Inline Elements
Inline elements stay on the same line and take only the space they need. They are used to modify small parts of text.
<p>This is <strong>important</strong> text.</p>
Examples of inline elements include <span>, <a>, and <strong>.
HTML Attributes
Attributes provide extra information about an element. They are always written inside the opening tag.
<a href="https://example.com">Visit site</a>
In this example, the href attribute tells the browser where the link should go.
Common attributes include href, src, alt, id, class, and type.
Commonly Used HTML Tags
Headings
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
Paragraph
<p>This is a paragraph.</p>
Link
<a href="page.html">Go to page</a>
Image
<img src="photo.jpg" alt="Person using a laptop">
Container
<div>
<h2>Title</h2>
<p>Description</p>
</div>
Inline Container
<p>This is <span>special</span> text.</p>
Final Understanding
HTML is used to structure content and make it readable. It does not control behavior or logic. HTML prepares the content so that CSS can style it and JavaScript can add interactivity.