Understanding HTML Tags and Elements
Learn About HTML Tags and Elements: A Basic Overview
HTML is usually the first thing people learn when they start web development. Because it looks simple, many beginners don’t take it seriously. They think HTML is just about writing a few tags and then moving on to CSS or JavaScript.
But HTML is not just syntax. It is a core part of the World Wide Web. To really understand web development, you need to understand what HTML is, why it exists, and how browsers use it.
This article explains HTML from the basics, focusing on ideas and meaning, not memorisation.
What HTML is and why we use it
The question is why HTML exist and why we use it. Before HTML exist, documents on the computer were just plain text files, that files has no built in structure and no standardised way to connect documents together across different devices. Sharing documents globally was difficult.
In 1989, Tim Berners Lee was working at CERN. He proposed a system to share information using connected documents. This idea later became the World Wide Web (WWW).
The World Wide Web was built using three main parts:
HTML - To describe documents
HTTP - To transfer documents
URLs - To locate documents
HTML was not created alone. It was created as one part of the web system. Its role was clear, describe the structure and meaning of documents so that they could be shared and read anywhere.
HTML was designed mainly for documents, not apps. That is why it focuses on text, headings, paragraphs, and links.
So basically, HTML(HyperText Markup Language) is not a programming language. It is a declarative markup language that describes Structure + Meaning of the document so that machine (browser) render it.
HTML is like, it describes things,
This is header
<h1>Header</h1>This is paragraph
<p>Paragraph</p>This is image
<img>This part is navigation
<nav>Nav Bar</nav>This part is main content
<main>Main Content</main>
HTML as structure of Web
Think of HTML as the structure that holds the web together. A webpage without CSS and JavaScript still works. You can still read the content. That content exists because of HTML.
But without HTML, there is nothing to show at all. That is why HTML is always present, even in modern frameworks. React, Vue, and others still produce HTML in the end, because browsers understand HTML, not frameworks.
HTML only describes meaning
CSS controls how things look
JavaScript controls how things behave
HTML stays focused on structure.
What an HTML tag is
An HTML tag is a marker used to describe content. A tag tells the browser where something starts or ends.
Example:
<p>
This tag tells the browser that a paragraph starts here.
Tags are not content. Users never see them. They exist only for browsers and machines to understand the structure of a document.
There are three main kinds of tags:
opening tags
closing tags
self closing (void) tags
Each type helps define how content is structured.
Opening tag, Closing tag and Content
Consider this example:
<p>This is a paragraph</p>
This line has three parts:
<p> tells where the paragraph starts
This is a paragraph is the actual content
</p> tells where the paragraph ends
Closing tags are important because HTML is based on structure. If we do not add closing tag then browser will not know like after how much text this paragraph should be ended. To start using other tag we have to end previous one. The browser needs to know where one element ends and another begins.
What an HTML element means
An HTML element is the complete unit formed by tags and content. It combines both opening tag + content + closing tag (if required).
An element includes:
opening tag
content
closing tag (if required)
So this:
<p>This is a paragraph</p>
is one element.
A tag is only a part of an element.
Browsers convert HTML into a structure in memory called the DOM (Document Object Model). JavaScript works with this DOM, not directly with the HTML text.
That is why JavaScript selects elements, not tags.
Self Closing (Void) Elements
Some elements do not wrap content. These are called void elements. These elements do not have any kind of closing tag, they work without closing tags,
Examples include:
<img><br><input>
These elements represent single things, such as an image or an input field. Because there is nothing inside them, they do not need closing tags.
Block Level and Inline Elements
HTML elements are divided into block level and inline elements to describe structure.
Block level elements are used to build the main layout of a page. They usually start on a new line and group content together. They contains full width of the screen
Examples:
<div><p><h1><section>
Inline elements are used inside text. They do not break the line and are meant to describe small parts of content. They contain only that much space that is needed.
Examples:
<span><a><strong>
A simple idea is:
block elements are containers
inline elements live inside containers
Why Semantic HTML Exists
As the web grew, developers needed a clearer way to describe meaning. This is like telling browser that this part include this type of content and this part includes that types of content. Semantic tags give meaning to the structure of the website, this is helpful for screen readers that work behind the scene in the browser. Screen readers helps visual impaired people to understand the content of the website.
Tags like:
<header><nav><main><footer>
tell what a section is meant for.
These tags help:
search engines understand content
screen readers work better
developers read code more easily
Semantic HTML keeps documents clear and meaningful, just like HTML was originally designed to be.
Commonly Used HTML Tags
HTML has many tags, but they all exist for a reason.
Some tags are used to structure text, such as headings and paragraphs. Some are used for grouping content, like <div> and <span>. Others are used for links, images, and forms.
For example:
headings show importance and order
paragraphs group sentences
links connect pages
images display media
form tags collect user input
Some frequently used HTML tags are:
<html>- Root of the document<head>- Metadata<title>- Page title<body>- Visible content<h1>to<h6>- Headings<p>- Paragraph<a>- Link<img>- Image<div>- Container<span>- Inline container<br>- Line break<hr>- Horizontal line
