HTML Basics Explained: Tags, Elements, Block vs Inline for Beginners

What HTML is and why we use it

HTML is called HyperText Markup Language. Very simply level, HTML is the skeleton of a webpage.
It tells the browser:

what content exists
what is a heading
what is a paragraph
what is a button, image, or link

Without HTML, webpage has no structure just raw text. If website were a human body then:

HTML = skeleton
CSS = clothes/beauty
JavaScript = movement/brain

What an HTML tag is

An HTML tag is a label that tells the browser what a piece of content is. it’s fundamental building blocks of web pages, used to structure and format content for web browsers. They tell the browser how to display different elements, such as text, images, and links. Tags are written inside angle brackets < >.

Example:

<p>Hello World</p>

Here, <p> tells the browser: This text is a paragraph.”
it’s like a label on a box saying what’s inside.

Opening tag, closing tag, and content

Most HTML tags come in pairs, starting with an opening tags and ending with a closing tag, and some content between these two, there are some tags that are selfclosed and do not need seperate closing tag.

<p>Hello World</p>

<p> → opening tag
</p> → closing tag
Hello World → content

What an HTML element means

HTML element is a core building block of a web page that defines its structure and content. It is typically composed of a start tag, content, and end tag.

So this entire thing is one element:

<p>Hello World</p>
//This whole line is an HTML Element.

Tag is not the same as Element

Self-closing (void) elements

As normal elements need starting and ending tags with some content within them but some elements don’t wrap content and have no need of closing tag they are known as self closing elements.
They stand alone. It is written in a single line, and the tag is "closed" by including a forward slash (/) before the closing angle bracket (>), although in new HTML it’s not necessary to write forward slash. Example:

<img src="photo.jpg">
<br>
<hr>

These are called self-closing or void elements. They don’t need closing tags because there’s nothing inside them.

Block-level vs inline elements

This explains how elements behave on the page.

Block-level elements

Start on a new line, Used for structuring major sections of a page.
Take full width, means if any other element comes after this, then that will come in next line as no width remaining in that line.

Examples:

<div>
<h1>
<p>

Inline elements

Stay in the same line. Used for styling or adding functionality to content within a block-level element.
Take only required space.

Examples:

<span>
<a>
<strong>

Commonly used HTML tags

Here are a few we’ll use all the time:

<h1>Used to create Heading</h1>
<p>Used to create Paragraph</p>
<div>Used to create Container</div>
<span>Used to create Inline text</span>
<a href="#">Used to create Link</a>
<img src="image.png"> //can use image by this.
<ul><li>Defines an unordered list.</li></ul>
<ol><li>Defines an ordered list.</li></ol>
<li>Defines an list item</li>
<form>Defines an HTML form for user input</form>
<input type="..."> //Defines an input control within a form with type of input.
<button>Defines a clickable button</button>
<iframe src="..."></iframe> //Embeds an inline frame for external content.