🌐Day 1: Introduction to HTML

on

🌐 Day 1 — Introduction to HTML

Hey everyone 👋 and welcome to the very first day of our complete Web Development journey! If you’ve ever looked at a beautiful website and wondered how it actually works underneath, this series will uncover that step by step. We’ll start from absolute zero — and today is all about understanding HTML, the language that gives structure and meaning to every web page on the internet.

💡 1️⃣ What Is HTML Exactly?

HTML stands for HyperText Markup Language. It isn’t a programming language; rather, it’s a way to describe the structure of information so a browser can render it visually. Think of HTML as the skeleton of your website — it defines where headings, paragraphs, images, links, and sections go.

When you visit any site — whether it’s Google, YouTube, or your favorite blog — your browser downloads HTML code from a server and paints it on your screen. Learning HTML gives you complete control over what appears on that canvas.

🧱 2️⃣ The Basic Structure of an HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my first web page built using HTML.</p>
</body>
</html>

Every HTML document follows this skeleton. The <!DOCTYPE html> line tells the browser we’re using modern HTML5 standards. Then we have an <html> element that wraps the entire page, a <head> section that holds information about the document (not visible to users), and finally a <body> section that contains all visible elements.

🏗 3️⃣ Breaking Down the Elements

  • <head> — Holds metadata like title, character set, and links to CSS or scripts.
  • <title> — Defines the page title shown on the browser tab.
  • <body> — Contains the visible content of the page such as text, images, and links.

Each HTML element uses an opening tag and a closing tag. The closing tag always includes a forward slash ( </p> for paragraphs ). Some elements — like <img> or <br> — don’t have closing tags because they’re self-contained.

📖 4️⃣ Adding Headings and Paragraphs

<h1>Welcome to My Website</h1>
<h2>About Me</h2>
<p>My name is Rahul Naidu, and this is my first web page built from scratch.</p>
<p>I love learning about technology and creating useful digital projects.</p>

Headings come in six sizes: <h1> to <h6>. Your main page title should always be <h1>. Sub-topics get smaller headings like <h2> or <h3>. Paragraphs use <p> and automatically add space before and after the text.

📄 5️⃣ Creating Comments in HTML

<!-- This is a comment. Browsers ignore it, but developers can see it. -->

Comments are super helpful when you want to leave notes for yourself or other developers. They don’t appear on the page — only inside the source code.

🔢 6️⃣ Nesting Elements Properly

You can place tags inside other tags, but remember — HTML should always be properly nested. 

<p>My favorite language is <strong>HTML</strong> because it builds the foundation of web pages.</p>

Here, <strong> is nested inside a <p> tag — this is valid and meaningful markup.

🎨 7️⃣ Whitespace and Indentation

Browsers ignore extra spaces, tabs, and line breaks. But indentation makes your code easier to read — and readability is vital as your projects grow.

📚 8️⃣ Common Mistakes Beginners Make

  • Forgetting to close tags.
  • Placing content outside the <body> section.
  • Using multiple <h1> tags per page.
  • Mis-nesting elements (closing a tag before closing its child).

🧠 9️⃣ Practice Task

  1. Create a file named day1.html.
  2. Add headings, paragraphs, and comments describing each section.
  3. View it in a browser and note how the hierarchy looks.

🧮 Mini Quiz

  • Q1: What does the <title> tag do?
  • Q2: Where is the visible content of a page placed?
  • Q3: Is HTML a programming language or a markup language?

🎯 Summary

Today you learned the foundation of web structure. Every webpage you’ll ever build will start with this exact skeleton. Tomorrow, we’ll add personality — formatting and styling — to turn plain text into engaging content.

Comments

Post a Comment