Every website you have ever visited like Google, YouTube, Instagram, or even this page, starts with one thing HTML.

Before colors, animations exist, a browser needs to understand what each part of content is, like is this a heading or a paragraph? That understanding comes from HTML

In this blog, we will break HTML into its core concepts like tags, elements, blocks and inline layout.

By the end, you won’t be just writing HTML, you will read websites like a browser does.

What is HTML

HTML stands for Hyper Text Markup Language and it is not a programming language. So it doesn’t think, calculate, or decide. HTML’s only job is to describe the structure of a webpage.

You can think of webpage like a human body where,

• HTML => Skeleton

• CSS => Skin

• JavaScript => Brain

Without HTML, the browser has no idea what is going on.

HTML tells the browser what each thing is on the page.

What is an HTML tag

A tag is a label which is written inside brackets < >.

Example:-

<p>

This tells browser that the thing inside are going to be a paragraph.

So, you can say that tags are instructions and not the content. The browser doesn’t show tags to user. It uses these tags to understand the structure of the content.

Opening Tag, Content, And Closing Tag

Most HTML elements works in pairs except void tags.

<p></p>

The reason why closing tags exist because the browser needs to know where something starts and where it ends. Without closing tags, the browser would be very confused. It would say “is everything after this a paragraph forever?”.

HTML Element

This is the actual part where most of the beginners get confused. So let’s make it crystal clear.

• Tag:-

  As, we have already understood that tag is just the label.

• Element:-

  An element is a complete unit in HTML. It consists of an opening tag, content, and a closing tag( as shown in the above diagram).

  Example:-

<p>Hello World</p>

Void elements

It is also known as self-closing elements because there is nothing to put inside them. They also don’t have closing tags because they don’t wrap any content.

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

Clearly, you can see hat img, br, and hr are the content itself. That is why they don’t need closing tags.

Some famous void elements:-

Block-level And Inline elements

• Block-Level Elements

  Block elements are those elements which start on a new line, take up the full available width of their parent/container, and naturally they stack vertically on the page which means each block element will be below the previous one.

  For example:-

    <h1>Title</h1>
    <p>Paragraph</p>
    <div>Box</div>
  

• Inline Elements

  Inline elements are those elements that stay within the same line of text, and only take much width as their content needs and also flow naturally with surrounding text instead of breaking the layout. You can think of inline elements as words or parts of a sentence.

  For example;-

    <span>word</span>
    <strong>bold</strong>
    <a>link</a>
  

Commonly used HTML tags

1. Text & structure

<h1> to <h6> //headings
<p> //paragraph
<span> //inline text
<strong> //importance
<bold> //bold

2. Layout containers

<div>//block-level container

3. Media

<img src=""> //image
<a href=""> //link

4. Basic Page Structure (semantic tags0

<header>
<main>
<footer>

HTML As A Sentence

HTML works like grammar in a language where a paragraph element(<p>) gives a structure like where the content starts and ends, while inline elements inside it like <span> or <strong> add meaning, act like emphasis on specific words within that sentence.

<p>This is a <strong>very</strong> important word.</p>

This means HTML only focuses on what the content is and how it is being structured.

Inspecting Browser

Inspecting HTML in the browser lets you see the how browser sees the web page.

• Open any website

• Right-click then Inspect

• In the Elements tab

• You’ll see:-

  • Tags

  • Elements

  • Nesting

  • Structure

Fun fact: you can literally fork any webpage’s structure like Youtube, Google, and etc by just inspecting a browser.

Conclusion

HTML is not about design or effects. It is about structure and meaning where tags act as labels, elements form a complete unit of content, block elements shape the layout, and last but not the least inline elements give meaning to specific parts of text.

While browser reads and interprets this structure behind the scenes.

That’s it.

You can go now, Bye bye