Learn HTML from Scratch - HTML BASICS

Introduction to HTML (day1)

Introduction to HTML

HTML, or Hypertext Markup Language, is the basic structure behind every website you see online. Think of it like designing your room, you decide where the bed goes, where to hang the lights, and where the study table should be. Similarly, HTML lets you arrange text, images, links, and more on a webpage.

It tells the browser what’s a heading, what’s a paragraph, where the image goes, and how the content is organized. Just like a room without furniture feels empty, a website without HTML is just a blank screen.

What is the Ideology behind it?

Imagine you’re setting up your dream content creator setup at home, you’ve got your desk, your ring light, your mic, and that perfect camera angle for reels or YouTube videos.

Now think of building a website the exact same way. HTML, CSS, and JavaScript are like the three core things that make your setup (or your website) actually work, look good, and feel alive.

First, there’s HTML this is your desk, your chair, your mic stands, the actual structure. It’s not flashy, but without it, you’ve got nowhere to sit, no place to record. HTML gives the basic skeleton to your website. It tells the browser: this is a heading, this is a paragraph, this is an image, this is a button. It’s like building the base of your setup.

But just a setup isn’t enough, right? You want vibes.

Enter CSS this is your LED strip lights, your aesthetic wall art, your desk setup color palette, the way your camera is framed. It’s what makes your setup look fire on camera. On a website, CSS decides how everything should appear - colors, fonts, layout, spacing. Without CSS, your site would be plain and boring. It gives you the style and personality.

But wait a great setup still isn’t everything. You need energy, action, and interaction.

That’s where JavaScript comes in your camera controls, the moment you hit record and the mic starts capturing sound, your background music starts playing, the lighting adjusts everything interactive and responsive. In a website, JavaScript brings life, it makes buttons work, menus drop down, sliders move, forms submit, and users engage.

So, to sum it up HTML is the setup, CSS is the vibe, and JavaScript is the action.

Why HTML?

HTML is important because it helps you build websites from scratch, customize content the way you want, and understand how the web actually works. It’s easy to learn, even for beginners, and opens up great employment opportunities in web development and tech.

Basic HTML Page Structure

Alright, so let’s actually look at what an HTML page really looks like under the hood.

Think of it like setting up the foundation of your house - before you paint the walls or add furniture, you need the walls, roof, and floor in place.

Here’s the skeleton of every HTML page:


<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my very first website.</p>
  </body>
</html>

Key Parts

<!DOCTYPE html> → Tells the version of the browser (HTML5).
<html> → Root element, everything goes inside it.
<head> → Info about the page (title, links, SEO).
<title> → Shows on the browser tab.
<body> → Main content of the page (text, images, buttons).
<h1> / <p> → Headings and paragraphs inside the body.

Some common things inside <head>:

<title> → Name of the page (shows on browser tab).
<meta> → Extra information (like keywords, description for SEO, or making the site mobile-friendly).
<link> → Connects external files like CSS (for styling).
<style> → Write small CSS styles directly inside HTML.
<script> → Add JavaScript to make your site interactive.

In short<head> = the control room where you set up rules and connect extra tools for your website.

Logic Behind HTML Document → Browser → Webpage

First, you write code in an HTML document. Then, the browser reads that code and interprets it. Finally, the browser shows it as a rendered webpage on your screen. See the picture below for more clarity.

image showing logic behind html, browser and rendered page

Mini Note:

Head and body tags are children of html tag.

HTML is present with opening and closing tag with content in between them.

Some html tags have no content (empty element).

HTML Comments:

We use comments to add explanation, reminder, warning about the code (so it will be easier to read). It will not appear on the webpage.


<!DOCTYPE html>
<html>
  <head>
    <title>Comment Example</title>
  </head>
  <body>
    <!-- This is a single-line comment -->

    <p>Hello World!</p>

    <!-- 
      This is a 
      multi-line comment 
    -->
  </body>
</html>

HTML Elements and it's Types

An HTML element is like a container that holds content on a webpage. It usually has three parts: an opening tag, the content, and a closing tag. For example, in <p>Hello World</p>, the <p> is the opening tag, Hello World is the content, and </p> is the closing tag. You can think of it like opening a box, putting something inside, and then closing it, the tags are the box flaps, and the content is what you place inside.

Nested Element: When one element is placed inside another element. creating a hierarchical structure.


<!DOCTYPE html>
<html>
  <head>
    <title>Nested Elements Example</title>
  </head>
  <body>
    <div>
      <h1>Main Container</h1>
      <p>This is a paragraph inside a div.</p>
      <div>
        <p>This is a nested div with another paragraph.</p>
        <span>This is a span inside the nested div.</span>
      </div>
    </div>
  </body>
</html>

Empty Element: It does not have any starting and ending tags and content inside it. Example of empty element is <br>, <hr>, <link>, <input> tags.


<!DOCTYPE html>
<html>
  <head>
    <title>Empty Element Example</title>
  </head>
  <body>
    <p>This is some text.</p>
    <br> <!-- Line break (empty element) -->
    <hr> <!-- Horizontal rule (empty element) -->
    <img src="example.jpg" alt="Sample image"> <!-- Image is also an empty element -->
  </body>
</html>

Block Level Element: They start on a new line and take up the full width available to them, no matter what their actual content width is. Example - <div>, <p>, <table>, <form>.


<!DOCTYPE html>
<html>
  <head>
    <title>Block-Level Elements Example</title>
  </head>
  <body>
    <h1>This is a heading (block element)</h1>
    <p>This is a paragraph (block element).</p>
    <div>
      <p>A div is also a block-level element.</p>
    </div>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
  </body>
</html>

Inline Element: They don't start on a new line, they appear on the same line as long as there is space, they only take required space. Example - <span>, <a>, <img>.


<!DOCTYPE html>
<html>
  <head>
    <title>Inline Elements Example</title>
  </head>
  <body>
    <p>
      This is a <span>span element</span> inside a paragraph.
    </p>

    <p>
      This is <strong>bold text</strong> and this is <em>italic text</em>.
    </p>

    <p>
      Visit <a href="#">this link</a> for more info.
    </p>
  </body>
</html>

So, this is what I studied on my first day of learning HTML just the basics and the page structure. In the next blog, we’ll go a little deeper into HTML attributes and tags to understand how they make our pages more powerful.

If you haven’t checked it out yet, do read my previous blog 👉 30 Days Frontend Roadmap Where I shared the complete plan I followed to learn basics of frontend in just 30 days.

That’s it for today — see you in the next blog.

in New blogs

# Frontend development Learn web development basics of html css how to learn frontend development in just one month html html comments html elements html ideology introduction to html learn html from scratch web dev with Shree web development web development programming languages

Shreekala Pandey 27 August 2025

Share this post

Our blogs

Sign in to leave a comment

Learn Frontend Development Basics in Just One Month - ROADMAP

Roadmap to learn frontend development